feat(ux): minor tweaks and fixes, added hover submenu dropdowns

pkg/api/index.go

@@ -53,6 +53,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 		Icon: "icon-gf icon-gf-dashboard",
 		Url:  setting.AppSubUrl + "/",
 		Children: []*dtos.NavLink{
+			{Text: "Home dashboard", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/"},
 			{Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"},
 			{Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"},
 		},

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

-<ul class="sidemenu sidemenu-main">
+<ul class="sidemenu">
 
-	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn">
-		<div class="sidemenu-org" data-toggle="dropdown" ng-click="ctrl.openUserDropdown()">
+	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
+		<div class="sidemenu-org">
 			<div class="sidemenu-org-avatar">
 				<img ng-src="{{ctrl.user.gravatarUrl}}">
 			</div>
@@ -9,8 +9,8 @@
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
 				<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
 			</div>
-			<i class="fa fa-caret-right small"></i>
 		</div>
+		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
 			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
 				<span ng-if="menuItem.section">{{menuItem.section}}</span>
@@ -36,13 +36,14 @@
 		</div>
 	</li>
 
-	<li ng-repeat="item in ctrl.mainLinks">
+	<li ng-repeat="item in ctrl.mainLinks" class="dropdown">
 		<a href="{{item.url}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
 			<span class="icon-circle sidemenu-icon">
 				<i class="{{item.icon}}" ng-show="item.icon"></i>
 				<img ng-src="{{item.img}}" ng-show="item.img">
 			</span>
 			<span class="sidemenu-item-text">{{item.text}}</span>
+			<span class="fa fa-caret-right" ng-if="item.children"></span>
 		</a>
 		<ul class="dropdown-menu" role="menu" ng-if="item.children">
 			<li ng-repeat="child in item.children">

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

@@ -22,6 +22,7 @@ export class SideMenuCtrl {
     this.appSubUrl = config.appSubUrl;
     this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled'];
     this.updateMenu();
+    this.openUserDropdown();
 
     this.$scope.$on('$routeChangeSuccess', () => {
       this.updateMenu();
@@ -133,7 +134,6 @@ export class SideMenuCtrl {
  updateMenu() {
    this.systemSection = false;
    this.mainLinks = [];
-   this.orgMenu = [];
 
    var currentPath = this.$location.path();
    if (currentPath.indexOf('/admin') === 0) {

public/less/search.less

 .search-container {
-  left: 59px;
+  left: 72px;
   top: 39px;
-  margin: 15px;
+  margin: 16px 0 0 2px;
   z-index: 1000;
   position: absolute;
   width: 700px;

public/less/sidemenu.less

+@sideMenuWidth:  220px;
+
 .sidemenu-canvas {
   position: relative;
 }
@@ -6,13 +8,11 @@
   position: absolute;
   top: 52px;
   left: 0;
-  width: 220px;
+  width: @sideMenuWidth;
   background-color: @bodyBackground;
-  border: @sideMenuBorder;
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   visibility: hidden;
-  // box-shadow: @sideMenuShadow;
 
   a:focus {
     text-decoration: none;
@@ -32,7 +32,7 @@
     min-height: 100%;
   }
   .main-view-container {
-    padding-left: 210px;
+    padding-left: @sideMenuWidth;
   }
   .page-container {
     margin-left: 195px;
@@ -42,7 +42,7 @@
     a {
       background-color: @pageBackground;
       padding-right: 67px;
-      padding-left: 24px;
+      padding-left: 22px;
     }
     .icon-gf-grafana_wordmark  {
       display: inline-block;
@@ -54,6 +54,9 @@
   .sidemenu-org {
     box-shadow: none;
   }
+  .search-container {
+    left: auto;
+  }
 }
 
 .sidemenu {
@@ -62,18 +65,16 @@
   margin: 0;
   padding: 0;
 
-  .fa-caret-down {
+  li {
     position: relative;
-    top: 2px;
-    font-size: 90%;
-  }
 
-  .dropdown-menu {
-    top: 0px;
-    left: 200px;
-    margin: 0;
-    >li>a {
-      color: @linkColor;
+    &:hover {
+      .dropdown-menu {
+        display: block;
+        top: 0px;
+        left: @sideMenuWidth;
+        background-color: @bodyBackground;
+      }
     }
   }
 }
@@ -146,13 +147,6 @@
     padding: 4px;
     overflow: hidden;
   }
-
-  .fa {
-    float: left;
-    font-size: 120%;
-    line-height: 41px;
-    padding: 0 15px;
-  }
 }
 
 .sidemenu-section-tagline {
@@ -191,24 +185,22 @@
 }
 
 .sidemenu-org {
-  border-bottom: @sideMenuBorder;
-  border-top: @sideMenuBorder;
   padding: 17px 10px 15px 14px;
   box-sizing: border-box;
   cursor: pointer;
   &:hover {
-    background-color: @grafanaTargetFuncBackground;
+    background-color: @sideMenuBackgroundHighlight;
   }
   display: table;
   position: relative;
   width: 100%;
 }
 
-.sidemenu-org .fa-caret-right {
+.sidemenu .fa-caret-right {
   position: absolute;
-  top: 50%;
+  top: 38%;
   right: 25px;
-  font-size: 80%;
+  font-size: 14px;
   color: @linkColor;
 }
 
@@ -240,7 +232,6 @@
   color: @linkColorDisabled;
 }
 
-
 .sidemenu-org-user {
   display: block;
 }

public/less/variables.dark.less

@@ -79,7 +79,7 @@
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
 @headingsFontWeight:    200;    // instead of browser default, bold
-@headingsFontStyle:    	normal; 
+@headingsFontStyle:    	normal;
 @headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;
 
@@ -167,7 +167,6 @@
 // Sidemenu
 // -------------------------
 @sideMenuTopShadow:          @navbarDropdownShadow;
-@sideMenuBorder:             1px solid @bodyBackground;
 @sideMenuBackground:         @grayDark;
 @sideMenuBackgroundHighlight: lighten(@grayDark, 4%);
 @sideMenuShadow: 0 0 35px 0 @bodyBackground;

public/less/variables.light.less

@@ -92,7 +92,7 @@
 
 @headingsFontFamily:    inherit; // inherit. empty to use BS default, @baseFontFamily
 @headingsFontWeight:    normal;    // instead of browser default, bold
-@headingsFontStyle:    	italic; 
+@headingsFontStyle:    	italic;
 @headingsColor:         @textColor; // empty to use BS default, @textColor
 
 
@@ -180,11 +180,8 @@
 
 // Sidemenu
 // -------------------------
-@sideMenuTopShadow:             @navbarDropdownShadow;
-@sideMenuBorder:                1px solid @grafanaTargetBorder;
 @sideMenuBackground:            @grafanaPanelBackground;
 @sideMenuBackgroundHighlight:   darken(@sideMenuBackground, 4%);
-@sideMenuShadow: 0 5px 30px 0 lighten(@grayLight, 30%);
 
 // search
 @searchShadow: 0 5px 30px 0 lighten(@grayLight, 30%);