feat(sidemenu): improved user dropdown and sidemenu, will be improved further, #3687

public/app/core/controllers/sidemenu_ctrl.js

@@ -24,26 +24,32 @@ function (angular, _, $, coreModule, config) {
       });
     };
 
-    $scope.loadOrgs = function() {
-      $scope.orgMenu = [];
+    $scope.openUserDropdown = function() {
+      $scope.orgMenu = [
+        {section: 'You', cssClass: 'dropdown-menu-title'},
+        {text: 'Profile', url: $scope.getUrl('/profile')},
+      ];
 
       if (contextSrv.hasRole('Admin')) {
+        $scope.orgMenu.push({section: contextSrv.user.orgName, cssClass: 'dropdown-menu-title'});
         $scope.orgMenu.push({
-          text: "Organization settings",
-          href: $scope.getUrl("/org"),
+          text: "Settings",
+          url: $scope.getUrl("/org"),
         });
         $scope.orgMenu.push({
           text: "Users",
-          href: $scope.getUrl("/org/users"),
+          url: $scope.getUrl("/org/users"),
         });
         $scope.orgMenu.push({
           text: "API Keys",
-          href: $scope.getUrl("/org/apikeys"),
+          url: $scope.getUrl("/org/apikeys"),
         });
       }
 
-      if ($scope.orgMenu.length > 0) {
-        $scope.orgMenu.push({ cssClass: 'divider' });
+      $scope.orgMenu.push({cssClass: "divider"});
+
+      if (config.allowOrgCreate) {
+        $scope.orgMenu.push({text: "New organization", icon: "fa fa-fw fa-plus", url: $scope.getUrl('/org/new')});
       }
 
       backendSrv.get('/api/user/orgs').then(function(orgs) {
@@ -61,12 +67,12 @@ function (angular, _, $, coreModule, config) {
           });
         });
 
-        if (config.allowOrgCreate) {
-          $scope.orgMenu.push({
-            text: "New Organization",
-            icon: "fa fa-fw fa-plus",
-            href: $scope.getUrl('/org/new')
-          });
+        $scope.orgMenu.push({cssClass: "divider"});
+        if (contextSrv.isGrafanaAdmin) {
+          $scope.orgMenu.push({text: "Server admin", url: $scope.getUrl("/admin/settings")});
+        }
+        if (contextSrv.isSignedIn) {
+          $scope.orgMenu.push({text: "Sign out", url: $scope.getUrl("/logout"), target: "_self"});
         }
       });
     };

public/app/partials/sidemenu.html

@@ -8,27 +8,21 @@
 			</a>
 		</li>
 
-		<li class="sidemenu-org-section dropdown" ng-if="contextSrv.user.isSignedIn">
-			<div class="sidemenu-org" data-toggle="dropdown" ng-click="loadOrgs()">
+		<li class="sidemenu-org-section dropdown" ng-if="contextSrv.isSignedIn">
+			<div class="sidemenu-org" data-toggle="dropdown" ng-click="openUserDropdown()">
 				<div class="sidemenu-org-avatar">
 					<img ng-src="{{contextSrv.user.gravatarUrl}}">
 				</div>
 				<div class="sidemenu-org-details">
-					<span class="sidemenu-org-user">{{contextSrv.user.name}}</span>
-					<span class="sidemenu-org-name">{{contextSrv.user.orgName}}</span>
+					<span class="sidemenu-org-user sidemenu-item-text">{{contextSrv.user.name}}</span>
+					<span class="sidemenu-org-name sidemenu-item-text">{{contextSrv.user.orgName}}</span>
 				</div>
 				<i class="fa fa-caret-down small"></i>
 			</div>
 			<ul class="dropdown-menu" role="menu">
-				<li class="dropdown-menu-title"><span>You</span></li>
-				<li>
-					<a href="profile" class="sidemenu-item">
-						Update profile
-					</a>
-				</li>
-				<li class="dropdown-menu-title"><span>{{contextSrv.user.orgName}}</span></li>
 				<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
-					<a href="{{menuItem.href}}" ng-if="menuItem.href">
+					<span ng-if="menuItem.section">{{menuItem.section}}</span>
+					<a href="{{menuItem.url}}" ng-if="menuItem.url" target="{{menuItem.target}}">
 						<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
 						{{menuItem.text}}
 					</a>
@@ -40,6 +34,13 @@
 			</ul>
 		</li>
 
+		<li ng-if="!contextSrv.isSignedIn">
+			<a href="login" class="sidemenu-item" target="_self">
+				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
+				<span class="sidemenu-item-text">Sign in</span>
+			</a>
+		</li>
+
 		<li class="sidemenu-system-section" ng-if="systemSection">
 			<div class="sidemenu-system-section-inner">
 				<i class="fa fa-fw fa-cubes"></i>
@@ -51,75 +52,20 @@
 		</li>
 
 		<li ng-repeat="item in mainLinks">
-			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
+			<a href="{{item.href}}" class="sidemenu-item sidemenu-main-link" target="{{item.target}}">
 				<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
 				<span class="sidemenu-item-text">{{item.text}}</span>
-	   	</a>
-		</li>
-	</ul>
-
-	<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="!systemSection">
-
-		<!-- <li ng-if="contextSrv.user.isSignedIn">
-			<a href="profile" class="sidemenu-item">
-				<img ng-src="{{contextSrv.user.gravatarUrl}}">
-				<span class="sidemenu-item-text">{{contextSrv.user.name}}</span>
-	   	</a>
-		</li> -->
-
-		<!-- <li class="dropdown">
-			<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()" tabindex="0">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
-				<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
-	   	</a>
-			<ul class="dropdown-menu" role="menu" style="left: 65px">
-				<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
-					<a href="{{menuItem.href}}" ng-if="menuItem.href">
-						<i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
-						{{menuItem.text}}
-					</a>
-					<a ng-click="menuItem.click()" ng-if="menuItem.click">
-						<i class="{{menuItem.icon}}"></i>
-						{{menuItem.text}}
-					</a>
-				</li>
-			</ul>
-		</li> -->
-
-		<li ng-if="contextSrv.isGrafanaAdmin">
-			<a href="admin/settings" class="sidemenu-item">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-cog"></i></span>
-				<span class="sidemenu-item-text">Grafana admin</span>
-	   	</a>
-		</li>
-		<li ng-if="showSignout">
-			<a href="logout" class="sidemenu-item" target="_self">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
-				<span class="sidemenu-item-text">Sign out</span>
-	   	</a>
-		</li>
-
-		<li ng-if="!contextSrv.isSignedIn">
-			<a href="login" class="sidemenu-item" target="_self">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
-				<span class="sidemenu-item-text">Sign in</span>
-	   	</a>
+			</a>
 		</li>
-	</ul>
 
-	<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
-		<li>
-			<a href="{{appSubUrl}}/" class="sidemenu-item">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
-				<span class="sidemenu-item-text">Exit admin</span>
-	   	</a>
-		</li>
-		<li ng-if="showSignout">
-			<a href="logout" class="sidemenu-item" target="_self">
-				<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-out"></i></span>
-				<span class="sidemenu-item-text">Sign out</span>
-	   	</a>
-		</li>
+		<ul class="sidemenu sidemenu-small" style="margin-top:50px" ng-if="systemSection">
+			<li>
+				<a href="{{appSubUrl}}/" class="sidemenu-item">
+					<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-backward"></i></span>
+					<span class="sidemenu-item-text">Exit admin</span>
+				</a>
+			</li>
+		</ul>
 	</ul>
 
 </div>

public/less/sidemenu.less

@@ -33,7 +33,6 @@
 }
 
 .sidemenu {
-  font-size: 16px;
   font-weight: @baseFontWeight;
   list-style: none;
   margin: 0;
@@ -48,32 +47,11 @@
     top: 2px;
     font-size: 90%;
   }
-
-  &.sidemenu-small {
-    font-size: 14px;
-
-    .icon-circle {
-      border-radius: 50%;
-      background: @iconContainerBackground;
-      box-shadow: @iconContainerShadow;
-      border: @iconContainerBorder;
-      width: 28px;
-      height: 28px;
-      i {
-        top: 1px;
-        left: 4px;
-        font-size: 110%;
-      }
-    }
-
-    .sidemenu-item {
-      // color: @textColor;
-      line-height: 28px;
-      padding-left: 25px;
-    }
-  }
 }
 
+.sidemenu-main-link {
+  font-size: 16px;
+}
 
 .sidemenu-item-text {
   width: 110px;