Skip to content

N
nexpie-grafana-theme
Commit 4e6a0492 by Torkel Ödegaard
Options

worked on new sidemenu design

parent 83899eb8
Showing with 167 additions and 29 deletions
src/app/controllers/all.js
......@@ -7,5 +7,6 @@ define([
'./inspectCtrl',
'./jsonEditorCtrl',
'./loginCtrl',
'./sidemenuCtrl',
'./errorCtrl',
], function () {});
src/app/controllers/sidemenuCtrl.js 0 → 100644
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();
};
});
});
src/app/features/account/partials/account.html 0 → 100644
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<span class="brand">
<span class="page-title">Grafana</span>
</span>
</div>
</div>
<ul class="sidemenu">
<li ng-repeat-start="item in menu">
<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
</li>
<li ng-repeat-end ng-if="item.active">
<ul class="sidemenu-links">
<li ng-repeat="link in item.links">
<a href="{{link.href}}" class="sidemenu-link"><i class="fa fa-angle-right"></i>{{link.text}}</a>
</li>
</ul>
</li>
</ul>
</div>
<section class="pro-sidemenu-items">
<!-- <a class="pro&#45;sidemenu&#45;link" ng&#45;href="{{appSubUrl}}/"> -->
<!-- <i class="fa fa&#45;th&#45;large"></i> -->
<!-- Dashboards -->
<!-- </a> -->
<!-- <a class="pro&#45;sidemenu&#45;link" href="account/datasources"> -->
<!-- <i class="fa fa&#45;sitemap"></i> -->
<!-- Data -->
<!-- </a> -->
<!-- <a class="pro&#45;sidemenu&#45;link" href="account/users"> -->
<!-- <i class="fa fa&#45;users"></i>Users -->
<!-- </a> -->
<!-- <a class="pro&#45;sidemenu&#45;link" href="account/apikeys"> -->
<!-- <i class="fa fa&#45;key"></i>API Keys -->
<!-- </a> -->
<!-- <a class="pro&#45;sidemenu&#45;link" href="account/import"> -->
<!-- <i class="fa fa&#45;download"></i> -->
<!-- Import -->
<!-- </a> -->
<!-- -->
<!-- <a class="pro&#45;sidemenu&#45;link" href="profile"> -->
<!-- <i class="fa fa&#45;user"></i> -->
<!-- Profile -->
<!-- </a> -->
<!-- -->
<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
<i class="fa fa-institution"></i>Admin
</a>
<div class="dropdown">
<a class="pro-sidemenu-link pointer gravatar" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
......@@ -8,35 +59,7 @@
<li><a href="/login?logout">Logout</a></li>
</ul>
</div>
<a class="pro-sidemenu-link" ng-href="{{appSubUrl}}/">
<i class="fa fa-th-large"></i>
Dashboards
</a>
<a class="pro-sidemenu-link" href="account/datasources">
<i class="fa fa-sitemap"></i>
Data
</a>
<a class="pro-sidemenu-link" href="account/users">
<i class="fa fa-users"></i>Users
</a>
<a class="pro-sidemenu-link" href="account/apikeys">
<i class="fa fa-key"></i>API Keys
</a>
<a class="pro-sidemenu-link" href="account/import">
<i class="fa fa-download"></i>
Import
</a>
<a class="pro-sidemenu-link" href="profile">
<i class="fa fa-user"></i>
Profile
</a>
<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
<i class="fa fa-institution"></i>Admin
</a>
<a class="pro-sidemenu-link" href="login?logout">
<a class="pro-sidemenu-link" href="login?logout">
<i class="fa fa-sign-out"></i>Sign out
</a>
......
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',
......
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment