ux: new dashnav design

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

@@ -1,95 +1,62 @@
 <div class="navbar">
-	<div class="navbar-inner">
-		<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
-			<i class="gicon gicon-dashboard"></i>
-			{{ctrl.dashboard.title}}
-			<i class="fa fa-caret-down"></i>
-		</a>
 
-		<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>
-
-		<ul class="nav 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>
-			<li class="dropdown">
-				<a class="pointer" data-toggle="dropdown">
-					<i class="fa fa-cog"></i>
-				</a>
-				<ul class="dropdown-menu dropdown-menu--navbar">
-					<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
-						<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>
-			</li>
-			<li class="navbar-mini-btn-wrapper" ng-show="::ctrl.dashboard.meta.canSave">
-				<button class="btn btn-secondary btn-mini" ng-click="ctrl.addPanel()">
-					<i class="fa fa-plus-circle"></i> Add Panel
-				</button>
-			</li>
-		</ul>
-
-		<div class="nav nav--grow">
+	<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
+		<i class="gicon gicon-dashboard"></i>
+		{{ctrl.dashboard.title}}
+		<i class="fa fa-caret-down"></i>
+	</a>
+
+	<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>
+
+	<div class="navbar-buttons">
+		<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
+			<i class="gicon gicon-add-panel"></i>
+		</button>
+
+		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canStar" ng-click="ctrl.starDashboard()" bs-tooltip="'Mark as favorite'" data-placement="bottom">
+			<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}"></i>
+		</button>
+
+		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
+			<i class="fa fa-share-square-o"></i></a>
+		</button>
+
+		<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
+			<i class="fa fa-save"></i>
+		</button>
+
+		<button class="btn navbar-button" ng-if="::ctrl.dashboard.snapshot.originalUrl" ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
+			<i class="fa fa-link"></i>
+		</button>
+
+		<div class="dropdown">
+			<button class="btn navbar-button" data-toggle="dropdown">
+				<i class="fa fa-cog"></i>
+			</button>
+
+			<ul class="dropdown-menu dropdown-menu--navbar">
+				<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
+					<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 ng-if="!ctrl.dashboard.timepicker.hidden">
-				<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
-			</li>
-		</ul>
 	</div>
 
+	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
+
 </div>
 
 <dashboard-search></dashboard-search>

public/app/features/dashboard/timepicker/timepicker.html

@@ -1,38 +1,26 @@
-<ul class="nav gf-timepicker-nav">
+<div class="navbar-buttons">
+	<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom" ng-click='ctrl.move(-1)'>
+		<i class="fa fa-chevron-left"></i>
+	</button>
 
-  <li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom">
-    <a ng-click='ctrl.move(-1)'>
-      <i class="fa fa-chevron-left"></i>
-    </a>
-  </li>
-  <li class="dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom">
-    <a ng-click='ctrl.zoom(2)'>Zoom Out</a>
-  </li>
-  </li>
-  <li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom">
-    <a ng-click='ctrl.move(1)'>
-      <i class="fa fa-chevron-right"></i>
-    </a>
-  </li>
+	<button class="btn navbar-button dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
+		<i class="fa fa-search-minus"></i>
+	</button>
 
-  <li>
-    <a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="gf-timepicker-nav-btn">
-      <i class="fa fa-clock-o"></i>
-      <span ng-bind="ctrl.rangeString"></span>
-      <span ng-show="ctrl.isUtc" class="gf-timepicker-utc">
-        UTC
-      </span>
+	<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom" ng-click='ctrl.move(1)'>
+		<i class="fa fa-chevron-right"></i>
+	</button>
+</div>
 
-      <span ng-show="ctrl.dashboard.refresh" class="text-warning">
-        &nbsp; Refresh every {{ctrl.dashboard.refresh}}
-      </span>
-    </a>
-  </li>
+<div class="navbar-buttons">
+	<button bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="btn navbar-button gf-timepicker-nav-btn">
+		<i class="fa fa-clock-o"></i>
+		<span ng-bind="ctrl.rangeString"></span>
+		<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">UTC</span>
+		<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
+	</button>
 
-  <li class="dashnav-refresh-action">
-    <a ng-click="ctrl.timeSrv.refreshDashboard()">
-      <i class="fa fa-refresh"></i>
-    </a>
-  </li>
-
-</ul>
+	<button class="btn navbar-button dashnav-refresh-action" ng-click="ctrl.timeSrv.refreshDashboard()">
+		<i class="fa fa-refresh"></i>
+	</button>
+</div>

public/sass/_variables.dark.scss

@@ -122,8 +122,9 @@ $list-item-link-color: $text-color;
 $list-item-shadow:     $card-shadow;
 
 // Scrollbars
-$scrollbarBackground: #3a3a3a;
+$scrollbarBackground: #404357;
 $scrollbarBackground2: #3a3a3a;
+
 $scrollbarBorder: black;
 
 // Tables

public/sass/base/_icons.scss

@@ -54,3 +54,7 @@
 .gicon-org {
   background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
 }
+
+.gicon-zoom-out {
+  background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
+}

public/sass/components/_navbar.scss

@@ -1,19 +1,13 @@
 
 .navbar {
-  display: block;
-  overflow: visible;
   position: relative;
   padding-left: $side-menu-width;
   box-shadow: $navbarShadow;
   z-index: $zindex-navbar-fixed;
   background: $navbarBackground;
-}
-
-.navbar-inner {
-  min-height: $navbarHeight;
+  height: $navbarHeight;
   padding-right: $spacer;
   display: flex;
-  @include clearfix();
 }
 
 .sidemenu-open {
@@ -22,48 +16,49 @@
   }
 }
 
-.navbar .nav {
-  position: relative;
-  left: 0;
-  float: left;
-
-  &--grow {
-    flex-grow: 1;
-  }
-}
-
-
-.navbar .nav > li {
-  float: left;
-}
-
-// Links
-.navbar .nav > li > a {
-  float: none;
-  padding: 17px 13px 13px;
-  color: $navbarLinkColor;
-  text-decoration: none;
-
-  .fa { font-size: 115%; }
-}
-
-// Hover/focus
-.navbar .nav > li > a:focus,
-.navbar .nav > li > a:hover {
-  color: $navbarLinkColorHover;
-  text-decoration: none;
-}
-
-// Active nav items
-.navbar .nav > .active > a,
-.navbar .nav > .active > a:hover,
-.navbar .nav > .active > a:focus {
-  color: $navbarLinkColorActive;
-  text-decoration: none;
-  background-color: $navbarLinkBackgroundActive;
-}
+// .navbar .nav {
+//   position: relative;
+//   left: 0;
+//   float: left;
+//
+//   &--grow {
+//     flex-grow: 1;
+//   }
+// }
+//
+//
+// .navbar .nav > li {
+//   float: left;
+// }
+//
+// // Links
+// .navbar .nav > li > a {
+//   float: none;
+//   padding: 17px 13px 13px;
+//   color: $navbarLinkColor;
+//   text-decoration: none;
+//
+//   .fa { font-size: 115%; }
+// }
+//
+// // Hover/focus
+// .navbar .nav > li > a:focus,
+// .navbar .nav > li > a:hover {
+//   color: $navbarLinkColorHover;
+//   text-decoration: none;
+// }
+//
+// // Active nav items
+// .navbar .nav > .active > a,
+// .navbar .nav > .active > a:hover,
+// .navbar .nav > .active > a:focus {
+//   color: $navbarLinkColorActive;
+//   text-decoration: none;
+//   background-color: $navbarLinkBackgroundActive;
+// }
 
 .navbar-page-btn {
+  flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -106,3 +101,47 @@
 .navbar-mini-btn-wrapper {
   padding: 15px;
 }
+
+.navbar-buttons {
+  height: $navbarHeight;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: $spacer;
+}
+
+.navbar-button {
+  @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+
+  display: inline-block;
+  font-weight: $btn-font-weight;
+  padding: 5px 10px;
+  line-height: 16px;
+  color: $text-muted;
+  border: 1px solid #151515;
+  margin-right: 1px;
+
+  .gicon {
+    font-size: 16px;
+  }
+
+  .fa {
+    font-size: 16px;
+  }
+
+  &--add-panel {
+    .gicon {
+      font-size: 22px;
+    }
+    padding: 2px 8px;
+  }
+
+  &--tight {
+    .fa {
+      font-size: 14px;
+      position: relative;
+      top: 2px;
+    }
+    padding: 6px 4px;
+  }
+}

public/sass/components/_scrollbar.scss

@@ -71,7 +71,7 @@
 }
 
 .ps__thumb-y {
-  @include gradient-vertical($blue, lighten($blue, 20%));
+  @include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
   border-radius: 6px;
   width: 6px;
   /* there must be 'right' for ps__thumb-y */

public/sass/components/_timepicker.scss

@@ -1,15 +1,10 @@
-.nav.gf-timepicker-nav {
-  margin-right: 0;
-}
-
 .timepicker-timestring {
   font-weight: normal;
 }
 
-.gf-timepicker-nav-btn {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.gf-timepicker-nav {
+  flex-wrap: nowrap;
+  display: flex;
 }
 
 .gf-timepicker-dropdown {
@@ -118,14 +113,3 @@
   @extend .fa-chevron-left;
 }
 
-.gf-timepicker-time-control {
-  font-size: $font-size-sm;
-  a {
-    padding: 18px 7px 13px !important;
-  }
-}
-
-.dashnav-move-timeframe  {
-  position: relative;
-  top: 1px;
-}