ux: wip

public/app/core/components/navbar/navbar.html

@@ -1,31 +1,27 @@
-<div class="navbar-inner">
+<div class="page-nav container">
 
-	<div ng-if="::!ctrl.hasMenu">
-		<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
-      <i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
-      <img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
-      {{::ctrl.section.title}}
-    </a>
-	</div>
+  <div class="page-breadcrumb">
+    <div class="page-breadcrumb__item dropdown" ng-repeat="item in ::ctrl.model.items">
+      <a class="pointer" ng-href="{{::item.url}}" data-toggle="dropdown" ng-if="::item.items">
+        {{::item.title}}
+        <i class="page-breadcrumb__caret fa fa-caret-down"></i>
+      </a>
 
-  <div class="dropdown navbar-page-btn-wrapper"  ng-if="::ctrl.hasMenu">
-    <a href="{{::ctrl.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
-      <i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
-      <img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
-      {{::ctrl.section.title}}
-      <i class="fa fa-caret-down"></i>
-    </a>
-    <ul class="dropdown-menu dropdown-menu--navbar">
-      <li ng-repeat="navItem in ::ctrl.model.menu">
-        <a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
-          <i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
-          {{::navItem.title}}
-        </a>
-      </li>
-    </ul>
-  </div>
+      <a class="pointer" ng-href="{{::item.url}}" ng-if="::!item.items">
+        {{::item.title}}
+      </a>
 
-  <div ng-transclude></div>
+      <ul class="dropdown-menu dropdown-menu--navbar">
+        <li ng-repeat="subItem in ::item.items">
+          <a class="pointer" ng-href="{{::subItem.url}}" ng-click="ctrl.navItemClicked(subItem, $event)">
+            <i class="{{::subItem.icon}}" ng-show="::subItem.icon"></i>
+            {{::subItem.title}}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </div>
 
+
 <dashboard-search></dashboard-search>

public/app/core/components/navbar/navbar.ts

@@ -8,13 +8,9 @@ import {NavModel, NavModelItem}  from '../../nav_model_srv';
 
 export class NavbarCtrl {
   model: NavModel;
-  section: NavModelItem;
-  hasMenu: boolean;
 
   /** @ngInject */
   constructor(private $scope, private $rootScope, private contextSrv) {
-    this.section = this.model.section;
-    this.hasMenu = this.model.menu.length > 0;
   }
 
   showSearch() {
@@ -35,13 +31,11 @@ export function navbarDirective() {
     templateUrl: 'public/app/core/components/navbar/navbar.html',
     controller: NavbarCtrl,
     bindToController: true,
-    transclude: true,
     controllerAs: 'ctrl',
     scope: {
       model: "=",
     },
     link: function(scope, elem) {
-      elem.addClass('navbar');
     }
   };
 }

public/app/core/nav_model_srv.ts

@@ -37,14 +37,19 @@ export class NavModelSrv {
 
   getDatasourceNav(subPage) {
     return {
-      section: {
-        title: 'Data Sources',
-        url: 'datasources',
-        icon: 'icon-gf icon-gf-datasources'
-      },
-      menu: [
-        {title: 'List view', active: subPage === 0, url: 'datasources', icon: 'fa fa-list-ul'},
-        {title: 'Add data source', active: subPage === 1, url: 'datasources/new', icon: 'fa fa-plus'},
+      items: [
+        {
+          title: 'Configuration',
+          items: [
+            {title: 'Data sources', active: subPage === 0, url: 'datasources',  icon: 'fa fa-database'},
+            {title: 'Users',        active: subPage === 0, url: 'users',        icon: 'fa fa-fw fa-users'},
+            {title: 'Plugins',      active: subPage === 0, url: 'plugins',      icon: 'icon-gf icon-gf-apps'},
+          ]
+        },
+        {
+          title: 'Data sources',
+          url: 'datasources',
+        }
       ]
     };
   }

public/app/features/dashboard/dashnav/dashnav.html

@@ -1,64 +1,83 @@
-<navbar model="ctrl.navModel">
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="dropdown navbar-page-btn-wrapper">
 
-<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
-	<li>
-		<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
-	</li>
-	<li>
-		<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
-	</li>
-	<li>
-		<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
-	</li>
-</ul>
+      <a href="{{::ctrl.navModel.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
+        <i class="{{::ctrl.navModel.section.icon}}" ng-show="::ctrl.navModel.section.icon"></i>
+        <img ng-src="{{::ctrl.navModel.section.iconUrl}}" ng-show="::ctrl.navModel.section.iconUrl"></i>
+        {{::ctrl.navModel.section.title}}
+        <i class="fa fa-caret-down"></i>
+      </a>
 
-<ul class="nav pull-left dashnav-action-icons">
-	<li ng-show="::ctrl.dashboard.meta.canStar">
-		<a class="pointer" ng-click="ctrl.starDashboard()">
-			<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
-		</a>
-	</li>
-	<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
-		<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
-		<ul class="dropdown-menu">
-			<li>
-				<a class="pointer" ng-click="ctrl.shareDashboard(0)">
-					<i class="fa fa-link"></i> Link to Dashboard
-					<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
-				</a>
-			</li>
-			<li>
-				<a class="pointer" ng-click="ctrl.shareDashboard(1)">
-					<i class="icon-gf icon-gf-snapshot"></i>Snapshot
-					<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
-				</a>
-			</li>
-			<li>
-				<a class="pointer" ng-click="ctrl.shareDashboard(2)">
-					<i class="fa fa-cloud-upload"></i>Export
-					<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
-				</a>
-			</li>
-		</ul>
-	</li>
-	<li ng-show="::ctrl.dashboard.meta.canSave">
-		<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
-	</li>
-	<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
-		<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
-	</li>
-</ul>
+      <ul class="dropdown-menu dropdown-menu--navbar">
+        <li ng-repeat="navItem in ::ctrl.navModel.menu">
+          <a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
+            <i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
+            {{::navItem.title}}
+          </a>
+        </li>
+      </ul>
+    </div>
 
-<ul class="nav pull-right">
-	<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
-		<a ng-click="ctrl.exitFullscreen()">
-			Back to dashboard
-		</a>
-	</li>
-	<li>
-		<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
-	</li>
-</ul>
+    <ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
+      <li>
+        <a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
+      </li>
+      <li>
+        <a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
+      </li>
+      <li>
+        <a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
+      </li>
+    </ul>
 
-</navbar>
+    <ul class="nav pull-left dashnav-action-icons">
+      <li ng-show="::ctrl.dashboard.meta.canStar">
+        <a class="pointer" ng-click="ctrl.starDashboard()">
+          <i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
+        </a>
+      </li>
+      <li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
+        <a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
+        <ul class="dropdown-menu">
+          <li>
+            <a class="pointer" ng-click="ctrl.shareDashboard(0)">
+              <i class="fa fa-link"></i> Link to Dashboard
+              <div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
+            </a>
+          </li>
+          <li>
+            <a class="pointer" ng-click="ctrl.shareDashboard(1)">
+              <i class="icon-gf icon-gf-snapshot"></i>Snapshot
+              <div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
+            </a>
+          </li>
+          <li>
+            <a class="pointer" ng-click="ctrl.shareDashboard(2)">
+              <i class="fa fa-cloud-upload"></i>Export
+              <div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li ng-show="::ctrl.dashboard.meta.canSave">
+        <a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
+      </li>
+      <li ng-if="::ctrl.dashboard.snapshot.originalUrl">
+        <a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
+      </li>
+    </ul>
+
+    <ul class="nav pull-right">
+      <li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
+        <a ng-click="ctrl.exitFullscreen()">
+          Back to dashboard
+        </a>
+      </li>
+      <li>
+        <gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
+      </li>
+    </ul>
+  </div>
+</div>
 

public/app/features/dashboard/dashnav/dashnav.ts

@@ -144,6 +144,17 @@ export class DashNavCtrl {
     onFolderChange(folderId) {
       this.dashboard.folderId = folderId;
     }
+
+    showSearch() {
+      this.$rootScope.appEvent('show-dash-search');
+    }
+
+    navItemClicked(navItem, evt) {
+      if (navItem.clickHandler) {
+        navItem.clickHandler();
+        evt.preventDefault();
+      }
+    }
 }
 
 export function dashNavDirective() {

public/app/features/plugins/ds_edit_ctrl.ts

@@ -44,7 +44,6 @@ export class DataSourceEditCtrl {
   ) {
 
     this.navModel = navModelSrv.getDatasourceNav(0);
-    this.isNew = true;
     this.datasources = [];
     this.tabIndex = 0;
 
@@ -58,6 +57,7 @@ export class DataSourceEditCtrl {
   }
 
   initNewDatasourceModel() {
+    this.isNew = true;
     this.current = angular.copy(defaults);
 
     // We are coming from getting started

public/app/features/plugins/partials/ds_edit.html

@@ -1,23 +1,10 @@
-<div class="page-header container">
-  <div class="page-header-inner">
-    <div class="page-breadcrumb">
-      <div class="page-breadcrumb__item">
-        <a class="pointer">
-          Configuration <i class="fa fa-caret-down"></i>
-        </a>
-      </div>
-      <!-- <div class="page&#45;breadcrumb__item">/</div> -->
-      <div class="page-breadcrumb__item">
-        <a class="pointer">
-          Data sources
-        </a>
-      </div>
-    </div>
+<navbar model="ctrl.navModel"></navbar>
 
+<div class="page-container">
+  <div class="page-header">
     <h1>
       <i class="icon-gf icon-gf-datasources"></i>
-      <span ng-show="ctrl.isNew">Add data source</span>
-      <span ng-hide="ctrl.isNew">Settings</span>
+      Settings <span ng-show="ctrl.isNew" class="muted">(new)</span>
     </h1>
 
     <a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
@@ -40,9 +27,7 @@
       </ul>
     </div>
   </div>
-</div>
 
-<div class="page-container">
 
   <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 

public/app/features/plugins/partials/ds_list.html

@@ -1,13 +1,7 @@
-<div class="page-header container">
-  <div class="page-header-inner">
-    <div class="page-breadcrumb">
-      <div class="page-breadcrumb__item">
-        <a class="pointer">
-          Configuration <i class="fa fa-caret-down"></i>
-        </a>
-      </div>
-    </div>
+<navbar model="ctrl.navModel"></navbar>
 
+<div class="page-container">
+  <div class="page-header">
     <h1>
       <i class="icon-gf icon-gf-datasources"></i>
       <span>Data Sources</span>
@@ -17,12 +11,8 @@
       <i class="fa fa-plus"></i>
       Add data source
     </a>
-
   </div>
-</div>
-
 
-<div class="page-container container">
   <section class="card-section" layout-mode>
     <layout-selector></layout-selector>
 

public/sass/layout/_page.scss

@@ -19,8 +19,6 @@
 }
 
 .page-header-inner {
-  @include brand-bottom-border();
-  @include clearfix();
 }
 
 .page-body {
@@ -43,7 +41,10 @@
 }
 
 .page-header {
-  padding: 2rem 0 1rem 0;
+  padding: $spacer 0 0 0;
+  margin-bottom: 2rem;
+  @include brand-bottom-border();
+  @include clearfix();
 
   h1 {
     font-size: $font-size-h2;
@@ -101,9 +102,43 @@
 }
 
 .page-breadcrumb__item {
-  a {
+  > a {
     color: $text-color-weak;
+    display: block;
+    padding: 0.6rem 3rem 0.6rem 1rem;;
   }
-  padding-right: $spacer;
+
+  &:hover a {
+    .page-breadcrumb__caret {
+      opacity: 1;
+    }
+  }
+
+  background: black;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 100%;
+    content: '';
+    height: 0;
+    width: 0;
+    border: 24px solid transparent;
+    border-right-width: 0;
+    border-left-width: 20px;
+    transform: translateX(4px);
+    border-left-color: #ffffff;
+  }
+}
+
+.page-breadcrumb__caret {
+  opacity: 0;
+  position: absolute;
+  display: block;
+  width: 16px;
+  height: 16px;
+  right: 20px;
+  top: 14px;
 }