mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
refactor(): began refactoring topnav directive to be more like the new style of components, and also make it usable on all pages including dashboard
This commit is contained in:
27
public/app/core/components/navbar/navbar.html
Normal file
27
public/app/core/components/navbar/navbar.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<div class="navbar navbar-static-top">
|
||||
<div class="navbar-inner"><div class="container-fluid">
|
||||
<div class="top-nav">
|
||||
<div class="top-nav-btn top-nav-menu-btn">
|
||||
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
|
||||
<span class="top-nav-logo-background">
|
||||
<img class="logo-icon" src="img/fav32.png"></img>
|
||||
</span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<span class="icon-circle top-nav-icon">
|
||||
<i ng-class="icon"></i>
|
||||
</span>
|
||||
|
||||
<a ng-href="{{titleUrl}}" class="top-nav-title">
|
||||
{{ctrl.title}}
|
||||
</a>
|
||||
<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div ng-transclude></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
36
public/app/core/components/navbar/navbar.ts
Normal file
36
public/app/core/components/navbar/navbar.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config';
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import coreModule from '../../core_module';
|
||||
|
||||
export class NavbarCtrl {
|
||||
contextSrv: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private $scope, contextSrv) {
|
||||
this.contextSrv = contextSrv;
|
||||
}
|
||||
}
|
||||
|
||||
export function navbarDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/core/components/navbar/navbar.html',
|
||||
controller: NavbarCtrl,
|
||||
bindToController: true,
|
||||
controllerAs: 'ctrl',
|
||||
transclude: true,
|
||||
scope: {
|
||||
title: "@",
|
||||
titleUrl: "@",
|
||||
},
|
||||
link: function(scope, elem, attrs) {
|
||||
scope.icon = attrs.icon;
|
||||
scope.subnav = attrs.subnav;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('navbar', navbarDirective);
|
@@ -1,12 +1,11 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import config from 'app/core/config';
|
||||
import store from 'app/core/store';
|
||||
import _ from 'lodash';
|
||||
import angular from 'angular';
|
||||
import $ from 'jquery';
|
||||
import coreModule from '../../core_module';
|
||||
|
||||
class SideMenuCtrl {
|
||||
export class SideMenuCtrl {
|
||||
isSignedIn: boolean;
|
||||
showSignout: boolean;
|
||||
user: any;
|
||||
@@ -135,7 +134,7 @@ class SideMenuCtrl {
|
||||
};
|
||||
}
|
||||
|
||||
function sideMenuDirective() {
|
||||
export function sideMenuDirective() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/sidemenu/sidemenu.html',
|
||||
@@ -146,4 +145,4 @@ function sideMenuDirective() {
|
||||
};
|
||||
}
|
||||
|
||||
angular.module('grafana.directives').directive('sidemenu', sideMenuDirective);
|
||||
coreModule.directive('sidemenu', sideMenuDirective);
|
@@ -22,6 +22,8 @@ import './jquery_extended';
|
||||
import './partials';
|
||||
|
||||
import {grafanaAppDirective} from './components/grafana_app';
|
||||
import {sideMenuDirective} from './components/sidemenu/sidemenu';
|
||||
import {navbarDirective} from './components/navbar/navbar';
|
||||
import {arrayJoin} from './directives/array_join';
|
||||
import 'app/core/controllers/all';
|
||||
import 'app/core/services/all';
|
||||
@@ -29,4 +31,4 @@ import 'app/core/routes/all';
|
||||
import './filters/filters';
|
||||
import coreModule from './core_module';
|
||||
|
||||
export {arrayJoin, coreModule, grafanaAppDirective};
|
||||
export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective};
|
||||
|
@@ -1,6 +1,5 @@
|
||||
define([
|
||||
'./panellinks/module',
|
||||
'./sidemenu/sidemenu',
|
||||
'./dashlinks/module',
|
||||
'./annotations/annotations_srv',
|
||||
'./templating/templateSrv',
|
||||
|
@@ -1,9 +1,15 @@
|
||||
<topnav icon="fa fa-fw fa-list" title="Playlists" title-url="playlists" subnav="true">
|
||||
<!-- <topnav icon="fa fa-fw fa-list" title="Playlists" title-url="playlists" subnav="true"> -->
|
||||
<!-- <ul class="nav"> -->
|
||||
<!-- <li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li> -->
|
||||
<!-- <li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- </topnav> -->
|
||||
<navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
|
||||
<ul class="nav">
|
||||
<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
|
||||
<li class="active" ng-show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li>
|
||||
</ul>
|
||||
</topnav>
|
||||
</navbar>
|
||||
|
||||
<div class="page-container" ng-form="playlistEditForm">
|
||||
<div class="page">
|
||||
|
Reference in New Issue
Block a user