ux: nav experiments

pkg/api/index.go

@@ -105,8 +105,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
 		alertChildNavs := []*dtos.NavLink{
-			{Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list"},
-			{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications"},
+			{Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
+			{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
 		}
 
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{

public/app/core/components/grafana_app.ts

@@ -199,14 +199,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
           }
         }
 
-        // hide menus
-        var openMenus = body.find('.navbar-page-btn--open');
-        if (openMenus.length > 0) {
-          if (target.parents('.navbar-page-btn--open').length === 0) {
-            openMenus.removeClass('navbar-page-btn--open');
-          }
-        }
-
         // hide sidemenu
         if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) {
           if (target.parents('.sidemenu').length === 0) {

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

@@ -17,7 +17,7 @@
     </a>
 	</div>
 
-  <div class="dropdown navbar-section-wrapper"  ng-if="::ctrl.hasMenu">
+  <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>

public/app/core/components/search/search.html

@@ -4,9 +4,9 @@
 <div class="search-container" ng-if="ctrl.isOpen">
 
 	<div class="search-field-wrapper">
-		<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()">
-			<i class="fa fa-search"></i>
-		</div>
+		<!-- <div class="search&#45;field&#45;icon pointer" ng&#45;click="ctrl.closeSearch()"> -->
+		<!-- 	<i class="fa fa&#45;search"></i> -->
+		<!-- </div> -->
 
 		<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
 						ng-keydown="ctrl.keyDown($event)"

public/app/core/components/sidemenu/sidemenu.html

@@ -67,12 +67,5 @@
 		</ul>
 	</li>
 
-	<li>
-		<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
-			<span class="sidemenu-item-text">Pin</span>
-		</a>
-	</li>
-
 </ul>
 

public/app/core/components/sidemenu/sidemenu.ts

@@ -19,7 +19,7 @@ export class SideMenuCtrl {
   maxShownOrgs: number;
 
   /** @ngInject */
-  constructor(private $scope, private $location, private contextSrv, private backendSrv, private $element) {
+  constructor(private $scope, private $rootScope, private $location, private contextSrv, private backendSrv, private $element) {
     this.isSignedIn = contextSrv.isSignedIn;
     this.user = contextSrv.user;
     this.appSubUrl = config.appSubUrl;
@@ -44,6 +44,10 @@ export class SideMenuCtrl {
    return config.appSubUrl + url;
  }
 
+ search() {
+   this.$rootScope.appEvent('show-dash-search');
+ }
+
  openUserDropdown() {
    this.orgMenu = [
      {section: 'You', cssClass: 'dropdown-menu-title'},

public/app/core/services/context_srv.ts

@@ -64,9 +64,7 @@ export class ContextSrv {
 
   toggleSideMenu() {
     this.sidemenu = !this.sidemenu;
-    if (!this.sidemenu) {
-      this.setPinnedState(false);
-    }
+    this.setPinnedState(this.sidemenu);
   }
 }
 

public/sass/_variables.dark.scss

@@ -226,7 +226,7 @@ $navbarBrandColor:                $link-color;
 $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 
 $navbarButtonBackground:          $navbarBackground;
-$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+$navbarButtonBackgroundHighlight: $body-bg;
 
 // Sidemenu
 // -------------------------
@@ -237,7 +237,8 @@ $side-menu-item-hover-bg: $dark-2;
 // -------------------------
 $menu-dropdown-bg:            $body-bg;
 $menu-dropdown-hover-bg:      $dark-2;
-$menu-dropdown-border-color:  $dark-4;
+$menu-dropdown-border-color:  $dark-3;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
 
 
 // Pagination

public/sass/_variables.light.scss

@@ -192,9 +192,10 @@ $side-menu-item-hover-bg: $gray-6;
 $menu-dropdown-bg:            $white;
 $menu-dropdown-hover-bg:      $gray-6;
 $menu-dropdown-border-color:  $tight-form-border;
+$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
 
 // search
-$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
+$search-shadow: 0 5px 30px 0 $gray-4;
 
 // Dropdowns
 // -------------------------

public/sass/components/_dropdown.scss

@@ -99,21 +99,23 @@
   &--navbar,
   &--sidemenu {
     background: $menu-dropdown-bg;
+    box-shadow: $menu-dropdown-shadow;
     margin-top: 0px;
+    border: none;
 
     > li > a {
-      padding: $spacer/2 $spacer;
+      padding: $spacer/2 1.2rem;
       border-left: 2px solid transparent;
 
       i {
         display: inline-block;
-        padding-right: 21px;
+        margin-right: 10px;
       }
 
       &:hover {
         @include left-brand-border-gradient();
         color: $link-hover-color;
-        background: $input-label-bg !important;
+        background: $menu-dropdown-hover-bg !important;
       }
     }
   }

public/sass/components/_navbar.scss

@@ -60,9 +60,9 @@
   position: relative;
   float: left;
   margin: 0;
-  background-color: $navbarButtonBackground;
-  padding: 0.4rem 2.0rem 0.4rem 1rem;
-  min-height:: $navbarHeight;
+  background-color: $side-menu-bg;
+  padding: 0.4rem 1.0rem 0.4rem 1rem;
+  min-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 70%;
@@ -101,24 +101,24 @@
   }
 }
 
+.navbar-page-btn-wrapper {
+  float: left;
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
+  }
+}
+
 .navbar-page-btn {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  float: left;
   display: block;
   margin: 0;
-  font-size: 1.4rem;
   color: darken($link-color, 5%);
-  background-color: $navbarButtonBackground;
   font-size: $font-size-lg;
   padding: 1rem 1rem 0.75rem 1rem;
   min-height:: $navbarHeight;
 
-  &:hover, &.active {
-    background: $navbarButtonBackgroundHighlight;
-  }
-
   .fa-caret-down {
     font-size: 60%;
     padding-left: 0.2rem;
@@ -129,6 +129,7 @@
     top: 2px;
     font-size: 20px;
     line-height: 8px;
+    margin-right: 0.5rem;
   }
 
   > img {
@@ -141,12 +142,3 @@
   }
 }
 
-.navbar-page-btn-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.navbar-section-wrapper {
-  position: relative;
-  float: left;
-}

public/sass/components/_sidemenu.scss

@@ -6,7 +6,7 @@
   position: absolute;
   top: 52px;
   left: 0;
-  border-top: 1px solid $tight-form-border;
+  //border-top: 1px solid $tight-form-border;
   width: $side-menu-width;
   background-color: $side-menu-bg;
   z-index: 1000;
@@ -32,7 +32,7 @@
     min-height: calc(100% - 54px);
   }
   .dashboard-container {
-    padding-left: $side-menu-width + 20px;
+    padding-left: $side-menu-width + 8px;
   }
   .page-container {
     margin-left: $side-menu-width;
@@ -56,18 +56,11 @@
       background-color: $side-menu-item-hover-bg;
       @include left-brand-border-gradient();
 
-      .sidemenu-item {
-        border-top: 1px solid $menu-dropdown-border-color;
-        border-bottom: 1px solid $menu-dropdown-border-color;
-      }
-
       .dropdown-menu {
         margin: 0;
         display: block;
         opacity: 0;
         top: 0px;
-        border: 1px solid $dark-4;
-        border-left: none;
         // important to overlap it otherwise it can be hidden
         // again by the mouse getting outside the hover space
         left: $side-menu-width - 2px;
@@ -133,10 +126,9 @@
 }
 
 .side-menu-header {
-  padding: 10px;
+  padding: 10px 10px 10px 20px;
   background-color: $side-menu-item-hover-bg;
   font-size: 18px;
-  border-bottom: 1px solid $menu-dropdown-border-color;
 }
 
 .sidemenu-org-section .dropdown-menu-title {