diff --git a/src/app/controllers/all.js b/src/app/controllers/all.js index ef6f473e34e..bf5c8164397 100644 --- a/src/app/controllers/all.js +++ b/src/app/controllers/all.js @@ -7,5 +7,6 @@ define([ './inspectCtrl', './jsonEditorCtrl', './loginCtrl', + './sidemenuCtrl', './errorCtrl', ], function () {}); diff --git a/src/app/controllers/sidemenuCtrl.js b/src/app/controllers/sidemenuCtrl.js new file mode 100644 index 00000000000..63edb5c5af9 --- /dev/null +++ b/src/app/controllers/sidemenuCtrl.js @@ -0,0 +1,71 @@ +define([ + 'angular', + 'lodash', +], +function (angular, _) { + 'use strict'; + + var module = angular.module('grafana.controllers'); + + module.controller('SideMenuCtrl', function($scope, $location) { + + $scope.menu = [ + { + text: "Dashbord", + href: "/", + icon: "fa fa-th-large", + links: [ + { text: 'Settings', href:"asd", icon: "fa fa-cogs" }, + { text: 'Templating', href:"asd", icon: "fa fa-cogs" }, + { text: 'Annotations', href:"asd", icon: "fa fa-bolt" }, + { text: 'More', href:"asd", icon: "fa fa-bolt" }, + ] + }, + { + text: "Account", href: "/account", + icon: "fa fa-shield", + links: [ + { text: 'Data sources', href:"/account/datasources", icon: "fa fa-sitemap" }, + { text: 'Users', href:"/account/datasources", icon: "fa fa-users" }, + { text: 'API Keys', href:"/account/datasources", icon: "fa fa-key" }, + ] + }, + { + text: "Profile", href: "/profile", + icon: "fa fa-user", + links: [ + { text: 'Password', href:"asd", icon: "fa fa-lock" }, + ] + } + ]; + + $scope.onAppEvent('$routeChangeSuccess', function() { + $scope.updateState(); + }); + + $scope.updateState = function() { + var currentPath = $location.path(); + _.each($scope.menu, function(item) { + item.active = false; + + if (item.href === currentPath) { + item.active = true; + } + + _.each(item.links, function(link) { + link.active = false; + + if (link.href === currentPath) { + item.active = true; + link.active = true; + } + }); + }); + }; + + $scope.init = function() { + $scope.updateState(); + }; + }); + +}); diff --git a/src/app/features/account/partials/account.html b/src/app/features/account/partials/account.html new file mode 100644 index 00000000000..e41c05584de --- /dev/null +++ b/src/app/features/account/partials/account.html @@ -0,0 +1,3 @@ +
+ + diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html index fb3b5206899..f45622cfa6f 100644 --- a/src/app/partials/sidemenu.html +++ b/src/app/partials/sidemenu.html @@ -1,4 +1,55 @@ +
+
+
+ + Grafana + +
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + Admin + +
f @@ -8,35 +59,7 @@
  • Logout
    • - - - Dashboards - - - - Data - - - Users - - - API Keys - - - - Import - - - - - Profile - - - - Admin - - - + Sign out diff --git a/src/app/routes/backend/all.js b/src/app/routes/backend/all.js index f3dea9a4b0e..e52abb47f41 100644 --- a/src/app/routes/backend/all.js +++ b/src/app/routes/backend/all.js @@ -30,6 +30,9 @@ define([ controller : 'DashFromImportCtrl', reloadOnSearch: false, }) + .when('/account', { + templateUrl: 'app/features/account/partials/account.html', + }) .when('/account/datasources', { templateUrl: 'app/features/account/partials/datasources.html', controller : 'DataSourcesCtrl', diff --git a/src/css/less/p_pro.less b/src/css/less/p_pro.less index 0565bdbde04..cd0e960a5d9 100644 --- a/src/css/less/p_pro.less +++ b/src/css/less/p_pro.less @@ -2,6 +2,43 @@ display: none; } +.sidemenu { + list-style: none; + background: @bodyBackground; + margin: 0; + padding: 0; +} + +.sidemenu-links { + margin: 0; + padding: 0; + list-style: none; + background: @grafanaTargetFuncBackground; + li { + display: block; + } +} + +.sidemenu-link { + padding: 6px 0 6px 30px; + font-size: 15px; + display: block; + i { + padding-right: 15px; + } +} + +.sidemenu-item { + font-size: 17px; + padding: 14px 10px 14px 20px; + display: block; + background: @grafanaPanelBackground; + i { + padding-right: 15px; + } + border-bottom: 1px solid black; +} + .pro-sidemenu-open { .pro-sidemenu { display: block;