Began work on Account -> Organization rethink, #1506

pkg/api/dtos/models.go

@@ -20,7 +20,7 @@ type CurrentUser struct {
 	Email          string     `json:"email"`
 	Name           string     `json:"name"`
 	AccountRole    m.RoleType `json:"accountRole"`
-	AccountName    string     `json:"acountName"`
+	AccountName    string     `json:"accountName"`
 	IsGrafanaAdmin bool       `json:"isGrafanaAdmin"`
 	GravatarUrl    string     `json:"gravatarUrl"`
 }

src/app/controllers/sidemenuCtrl.js

@@ -18,69 +18,23 @@ function (angular, _, $, config) {
     $scope.menu = [];
     $scope.menu.push({
       text: "Dashboards",
-      icon: "fa fa-th-large",
+      icon: "fa fa-fw fa-th-large",
       href: $scope.getUrl("/"),
     });
 
     if (contextSrv.hasRole('Admin')) {
       $scope.menu.push({
         text: "Data Sources",
-        icon: "fa fa-database",
+        icon: "fa fa-fw fa-database",
         href: $scope.getUrl("/account/datasources"),
       });
       $scope.menu.push({
-        text: "Account", href: $scope.getUrl("/account"),
-        requireRole: "Admin",
-        icon: "fa fa-shield",
-      });
-    }
-
-    if (contextSrv.user.isGrafanaAdmin) {
-      $scope.menu.push({
-        text: "Admin", href: $scope.getUrl("/admin/settings"),
-        icon: "fa fa-cube",
-        requireSignedIn: true,
+        text: "Organization", href: $scope.getUrl("/account"),
+        icon: "fa fa-fw fa-users",
       });
     }
 
     $scope.updateState = function() {
-      var currentPath = config.appSubUrl + $location.path();
-      var search = $location.search();
-
-      _.each($scope.menu, function(item) {
-        item.active = false;
-
-        if (item.href === currentPath) {
-          item.active = true;
-        }
-
-        if (item.startsWith) {
-          if (currentPath.indexOf(item.startsWith) === 0) {
-            item.active = true;
-            item.href = currentPath;
-          }
-        }
-
-        _.each(item.links, function(link) {
-          link.active = false;
-
-          if (link.editview) {
-            var params = {};
-            _.each(search, function(value, key) {
-              if (value !== null) { params[key] = value; }
-            });
-
-            params.editview = link.editview;
-            link.href = currentPath + '?' + $.param(params);
-          }
-
-          if (link.href === currentPath) {
-            item.active = true;
-            link.active = true;
-          }
-        });
-      });
-
     };
 
     $scope.init = function() {

src/app/features/account/partials/account.html

@@ -1,4 +1,4 @@
-<topnav icon="fa fa-shield" title="Account" subnav="true">
+<topnav icon="fa fa-fw fa-users" title="Organization" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="account">Overview</a></li>
 		<li><a href="account/users">Users</a></li>
@@ -8,7 +8,7 @@
 <div class="page-container">
 	<div class="page">
 
-		<h2>Account Info</h2>
+		<h2>Organization Details</h2>
 
 		<form name="accountForm">
 			<div>

src/app/features/account/partials/datasourceEdit.html

@@ -1,4 +1,4 @@
-<topnav title="Data sources" icon="fa fa-database" subnav="true">
+<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
 	<ul class="nav">
 		<li><a href="account/datasources">Overview</a></li>
 		<li ng-class="{active: isNew}"><a href="account/datasources/new">Add new</a></li>

src/app/features/account/partials/datasources.html

@@ -1,4 +1,4 @@
-<topnav title="Data sources" icon="fa fa-database" subnav="true">
+<topnav title="Data sources" icon="fa fa-fw fa-database" subnav="true">
 	<ul class="nav">
 		<li class="active" ><a href="account/datasources">Overview</a></li>
 		<li><a href="account/datasources/new">Add new</a></li>

src/app/features/account/partials/users.html

@@ -1,4 +1,4 @@
-<topnav title="Account" icon="fa fa-shield" subnav="true">
+<topnav title="Organization" icon="fa fa-users" subnav="true">
 	<ul class="nav">
 		<li><a href="account">Overview</a></li>
 		<li class="active"><a href="account/users">Users</a></li>

src/app/features/admin/partials/edit_user.html

@@ -1,4 +1,4 @@
-<topnav icon="fa fa-cube" title="Admin" subnav="true">
+<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
 	<ul class="nav">
 		<li><a href="admin/settings">Settings</a></li>
 		<li><a href="admin/users">Users</a></li>

src/app/features/admin/partials/new_user.html

@@ -1,4 +1,4 @@
-<topnav icon="fa fa-cube" title="Admin" subnav="true">
+<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
 	<ul class="nav">
 		<li><a href="admin/settings">Settings</a></li>
 		<li><a href="admin/users">Users</a></li>

src/app/features/admin/partials/settings.html

@@ -1,4 +1,4 @@
-<topnav icon="fa fa-cube" title="Admin" subnav="true">
+<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
 	<ul class="nav">
 		<li class="active"><a href="admin/settings">Settings</a></li>
 		<li><a href="admin/users">Users</a></li>

src/app/features/admin/partials/users.html

@@ -1,4 +1,4 @@
-<topnav icon="fa fa-cube" title="Admin" subnav="true">
+<topnav icon="fa fa-fw fa-cogs" title="System Admin" subnav="true">
 	<ul class="nav">
 		<li><a href="admin/settings">Settings</a></li>
 		<li class="active"><a href="admin/users">Users</a></li>

src/app/partials/sidemenu.html

@@ -1,7 +1,8 @@
 
 <div ng-controller="SideMenuCtrl" ng-init="init()">
-	<ul class="sidemenu">
-		<li style="margin-bottom: 2px;">
+
+	<ul class="sidemenu sidemenu-main">
+		<li style="margin-bottom: 10px;">
 			<a class="pointer sidemenu-top-btn" ng-click="contextSrv.toggleSideMenu()">
 				<img class="logo-icon" src="img/fav32.png"></img>
 				<i class="pull-right fa fa-angle-left"></i>
@@ -14,26 +15,35 @@
 				<span class="sidemenu-item-text">{{item.text}}</span>
 	   	</a>
 		</li>
+	</ul>
 
-		<li ng-if="contextSrv.user.isSignedIn" style="margin-top:50px">
+	<ul class="sidemenu sidemenu-small" ng-if="contextSrv.user.isSignedIn">
+		<li style="margin-top:50px">
 			<a href="profile" class="sidemenu-item sidemenu-user">
 				<img ng-src="{{contextSrv.user.gravatarUrl}}">
 				<span class="sidemenu-item-text">{{contextSrv.user.name}}</a>
 			</a>
 		</li>
 
-		<li ng-if="contextSrv.user.isSignedIn">
+		<li ng-if="contextSrv.user.isGrafanaAdmin">
+			<a href="admin/settings" class="sidemenu-item">
+				<span class="icon-circle sidemenu-icon"><i class="fa fw-fw fa-cogs"></i></span>
+				<span class="sidemenu-item-text">System Admin</span>
+			</a>
+		</li>
+
+		<li>
 			<a href="logout" class="sidemenu-item" target="_self">
-				<span class="sidemenu-item-text no-icon">Sign out</span>
-	   	</a>
+				<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.user.isSignedIn" style="margin-top:50px">
 			<a href="/login" class="sidemenu-item" target="_self">
-				<span class="sidemenu-icon"><i class="fa fa-sign-in"></i></span>
+				<span class="sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
 				<span class="sidemenu-item-text">Sign in</span>
-	   	</a>
+			</a>
 		</li>
-
 	</ul>
 </div>

src/css/less/sidemenu.less

@@ -41,11 +41,32 @@
   list-style: none;
   margin: 0;
   padding: 0;
+
   li {
-    height: 50px;
+    margin-bottom: 7px;
+  }
+
+  &.sidemenu-small {
+    font-size: 14px;
+
+    .icon-circle {
+      width: 28px;
+      height: 28px;
+      i {
+        top: 1px;
+        left: 6px;
+        font-size: 110%;
+      }
+    }
+
+    .sidemenu-item {
+      color: @textColor;
+      line-height: 28px;
+    }
   }
 }
 
+
 .sidemenu-user {
   .sidemenu-item-text {
     width: 110px;
@@ -57,8 +78,8 @@
   }
   img {
     border-radius: 50%;
-    width: 40px;
-    height: 40px;
+    width: 28px;
+    height: 28px;
     box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
   }
 }
@@ -93,8 +114,8 @@
     color: @textColor;
     opacity: .7;
     position: relative;
-    left: 11px;
-    top: 1px;
+    left: 7px;
+    top: 2px;
     font-size: 125%;
   }
 }
@@ -104,8 +125,8 @@
 
 .sidemenu-item {
   color: #f80;
-  line-height: 41px;
-	padding: 14px 10px 14px 20px;
+  line-height: 40px;
+	padding: 0px 10px 0px 20px;
 	display: block;
 
   .sidemenu-item-text {