More progress on new design

src/app/controllers/sidemenuCtrl.js

@@ -34,26 +34,23 @@ function (angular, _, $, config) {
         text: "Account", href: $scope.getUrl("/account"),
         requireRole: "Admin",
         icon: "fa fa-shield",
-        links: [
-          { text: 'Info',         href: $scope.getUrl("/account")},
-          { text: 'Data sources', href: $scope.getUrl("/account/datasources")},
-          { text: 'Users',        href: $scope.getUrl("/account/users")},
-          { text: 'API Keys',     href: $scope.getUrl("/account/apikeys")},
-        ]
       });
-    }
-
-    if ($scope.grafana.user.isSignedIn) {
       $scope.menu.push({
-        text: "Profile", href: $scope.getUrl("/profile"),
-        icon: "fa fa-user",
+        text: "Users", href: $scope.getUrl("/account/users"),
+        requireRole: "Admin",
+        icon: "fa fa-users",
+      });
+      $scope.menu.push({
+        text: "API Keys", href: $scope.getUrl("/account/apikeys"),
+        requireRole: "Admin",
+        icon: "fa fa-key",
       });
     }
 
     if ($scope.grafana.user.isSignedIn) {
       $scope.menu.push({
-        text: "Sign out", href: $scope.getUrl("/logout"),
-        icon: "fa fa-sign-out",
+        text: "Profile", href: $scope.getUrl("/profile"),
+        icon: "fa fa-user",
       });
     }
 
@@ -70,6 +67,14 @@ function (angular, _, $, config) {
       });
     }
 
+    if ($scope.grafana.user.isSignedIn) {
+      $scope.menu.push({
+        text: "Sign out", href: $scope.getUrl("/logout"),
+        target: "_self",
+        icon: "fa fa-sign-out",
+      });
+    }
+
     $scope.onAppEvent('$routeUpdate', function() {
       $scope.updateState();
     });

src/app/partials/sidemenu.html

@@ -13,7 +13,7 @@
 		</li>
 
 		<li ng-repeat="item in menu" ng-class="{'active': item.active}">
-			<a href="{{item.href}}" class="sidemenu-item">
+			<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
 				<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
 				<span class="sidemenu-item-text">{{item.text}}</span>
 	   	</a>

src/css/less/grafana.less

@@ -11,6 +11,7 @@
 @import "tightform.less";
 @import "sidemenu.less";
 @import "gfbox.less";
+@import "navbar.less";
 
 .row-control-inner {
   padding:0px;
@@ -51,70 +52,6 @@
   width: 24px;
 }
 
-.navbar-inner {
-  padding-left: 0px;
-}
-
-.navbar .nav>li>a {
-  padding: 19px 15px 8px;
-}
-
-.top-nav {
-  float: left;
-}
-
-.top-nav-menu-btn {
-  display: block;
-  float: left;
-  padding: 11px 6px 12px 14px;
-  position: relative;
-  border-right: 1px solid @black;
-  font-weight: bold;
-  font-size: 90%;
-  i {
-    font-size: 170%;
-    color: @gray;
-    padding: 0px 0px 0px 6px;
-    position: relative;
-    top: 4px;
-  }
-}
-
-.top-nav-breadcrumb {
-  display: block;
-  float: left;
-  padding: 18px 9px 8px 12px;
-  font-size: 1.4em;
-  font-weight: bold;
-  color: darken(@gray, 10%);
-  i {
-    padding-left: 9px;
-  }
-}
-
-.top-nav-section {
-  display: block;
-  float: left;
-  padding: 19px 9px 8px 0;
-  font-weight: bold;
-  i {
-    padding-left: 8px;
-  }
-}
-
-.top-nav-title {
-  display: block;
-  float: left;
-  padding: 18px 10px 10px 0px;
-  font-size: 1.3em;
-  font-weight: bold;
-  i {
-    padding-left: 4px;
-    position: relative;
-    top: 2px;
-  }
-}
-
 .row-button {
   width: 24px;
 }
@@ -128,24 +65,6 @@
   top: 30%;
 }
 
-.grafana-search-metric-actions {
-  visibility: hidden;
-  padding-left: 20px;
-}
-
-.grafana-search-metric-name {
-  white-space: nowrap;
-}
-
-.grafana-search-metric-result:hover {
-  .grafana-search-metric-actions {
-    visibility: visible;
-  }
-  .grafana-search-metric-name {
-    color: @blue;
-  }
-}
-
 .dashboard-fullscreen {
   .main-view-container {
     overflow: hidden;

src/css/less/navbar.less

@@ -0,0 +1,65 @@
+.navbar-inner {
+  padding-left: 0px;
+}
+
+.navbar .nav>li>a {
+  padding: 19px 15px 8px;
+}
+
+.top-nav {
+  float: left;
+}
+
+.top-nav-menu-btn {
+  display: block;
+  float: left;
+  padding: 11px 6px 12px 14px;
+  position: relative;
+  border-right: 1px solid @black;
+  font-weight: bold;
+  font-size: 90%;
+  i {
+    font-size: 170%;
+    color: @gray;
+    padding: 0px 0px 0px 6px;
+    position: relative;
+    top: 4px;
+  }
+}
+
+.top-nav-breadcrumb {
+  display: block;
+  float: left;
+  padding: 18px 9px 8px 12px;
+  font-size: 1.4em;
+  font-weight: bold;
+  color: darken(@gray, 10%);
+  i {
+    padding-left: 9px;
+  }
+}
+
+.top-nav-section {
+  display: block;
+  float: left;
+  padding: 19px 9px 8px 0;
+  font-weight: bold;
+  i {
+    padding-left: 8px;
+  }
+}
+
+.top-nav-title {
+  display: block;
+  float: left;
+  padding: 18px 10px 10px 0px;
+  font-size: 1.3em;
+  font-weight: bold;
+  i {
+    padding-left: 4px;
+    position: relative;
+    top: 2px;
+  }
+}
+
+

src/css/less/sidemenu.less

@@ -1,4 +1,4 @@
-.sidemenu-container {
+.sidemenu-wrapper {
   display: none;
   a:focus {
     text-decoration: none;
@@ -6,7 +6,7 @@
 }
 
 .sidemenu-open {
-  .sidemenu-container {
+  .sidemenu-wrapper {
     display: block;
     position: absolute;
     top: 0;
@@ -23,7 +23,7 @@
     width: auto;
   }
 
-  .pro-main-view {
+  .main-view {
     padding-left: 200px;
   }
 
@@ -95,25 +95,7 @@
 
   .sidemenu-item-text {
     padding-left: 15px;
+    text-shadow: 1px 0px 10px @orange;
   }
 }
 
-.sidemenu-logo-container {
-  background: @grafanaPanelBackground;
-  text-align: center;
-  border-bottom: 1px solid black;
-  img {
-    display: inline-block;
-    width: 102px;
-    padding: 6px 0px 6px 11px;
-  }
-}
-
-.sidemenu-toggle {
-  float: right;
-  display: block;
-  font-size: 200%;
-  padding: 11px 8px 11px 8px;
-  background: @grafanaTargetFuncBackground;
-}
-

src/views/index.html

@@ -27,9 +27,9 @@
   <body ng-cloak ng-controller="GrafanaCtrl">
     <link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
 
-		<div class="pro-container" ng-class="{'sidemenu-open': grafana.sidemenu}">
+		<div class="main-view-wrapper" ng-class="{'sidemenu-open': grafana.sidemenu}">
 
-			<aside class="sidemenu-container" ng-if="grafana.sidemenu">
+			<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
 				<div ng-include="'app/partials/sidemenu.html'"></div>
 			</aside>
 
@@ -43,7 +43,7 @@
 				</div>
 			</div>
 
-			<div ng-view class="pro-main-view"></div>
+			<div ng-view class="main-view"></div>
 
 		</div>