Skip to content

N
nexpie-grafana-theme
Commit f00e5936 by Torkel Ödegaard
Options

New design work

parent 3da90e09
Showing with 134 additions and 113 deletions
src/app/controllers/sidemenuCtrl.js
......@@ -17,17 +17,16 @@ function (angular, _, $, config) {
$scope.menu = [];
$scope.menu.push({
text: "Dashbord",
text: "Dashbords",
icon: "fa fa-th-large",
href: $scope.getUrl("/"),
startsWith: config.appSubUrl + '/dashboard/',
icon: "fa fa-th-large",
links: [
{ text: 'Settings', editview: 'settings'},
{ text: 'Templating', editview: 'templating'},
{ text: 'Annotations', editview: 'annotations'},
{ text: 'Export', href:""},
{ text: 'JSON', href:""},
]
});
$scope.menu.push({
text: "Data Sources",
icon: "fa fa-database",
href: $scope.getUrl("/account/datasources"),
});
if ($scope.grafana.user.accountRole === 'Admin') {
......@@ -48,11 +47,13 @@ function (angular, _, $, config) {
$scope.menu.push({
text: "Profile", href: $scope.getUrl("/profile"),
icon: "fa fa-user",
requireSignedIn: true,
links: [
{ text: 'Info', href: $scope.getUrl("/profile"), icon: "fa fa-sitemap" },
{ text: 'Password', href:"", icon: "fa fa-lock" },
]
});
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"),
icon: "fa fa-sign-out",
});
}
......@@ -80,18 +81,21 @@ function (angular, _, $, config) {
$scope.updateState = function() {
var currentPath = config.appSubUrl + $location.path();
var search = $location.search();
var activeIndex;
_.each($scope.menu, function(item) {
_.each($scope.menu, function(item, index) {
item.active = false;
if (item.href === currentPath) {
item.active = true;
activeIndex = index;
}
if (item.startsWith) {
if (currentPath.indexOf(item.startsWith) === 0) {
item.active = true;
item.href = currentPath;
activeIndex = index;
}
}
......@@ -114,6 +118,8 @@ function (angular, _, $, config) {
}
});
});
//$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
};
$scope.init = function() {
......
src/app/directives/topnav.js
......@@ -24,13 +24,12 @@ function (angular) {
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
'<a class="pointer" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img>' +
'<span>menu</span>' +
'<i class="fa fa-chevron-down"></i>' +
'</a>' +
'</span>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'<span class="top-nav-section" ng-show="section">' +
......@@ -69,13 +68,12 @@ function (angular) {
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
'<a class="pointer" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img>' +
'<span>menu</span>' +
'<i class="fa fa-angle-right"></i>' +
'</a>' +
'</span>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'<span class="top-nav-section" ng-show="section">' +
......@@ -85,9 +83,6 @@ function (angular) {
'<a ng-click="titleAction()" class="top-nav-title">' +
'{{title}}' +
'<span class="small" ng-show="titleAction">' +
'<i class="fa fa-angle-down"></i>' +
'</span>' +
'</a>' +
'</div>',
link: function(scope, elem, attrs) {
......
src/app/features/annotations/partials/editor.html
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-bolt"></i>
Annotations
</div>
<div class="gf-box-header">
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row row" ng-if="editor.index == 0">
<div class="span6">
<div ng-if="annotations.length === 0">
......@@ -71,12 +68,10 @@
<div ng-include src="currentDatasource.editorSrc">
</div>
</div>
</div>
<div class="dashboard-editor-footer">
<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
</div>
</div>
</div>
src/app/features/profile/partials/profile.html
......@@ -6,7 +6,6 @@
</topnav>
<div class="editor-row">
<div class="section">
......
src/app/partials/dashboard_topnav.html
......@@ -18,6 +18,21 @@
show-menu-btn="!grafana.sidemenu">
</topnav-dash>
<ul class="nav pull-left" style="font-size: 130%">
<li>
<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-share-square-o"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-save"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-cog"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
<a ng-click="exitFullscreen()">
......@@ -30,12 +45,12 @@
</grafana-simple-panel>
</li>
<li class="dropdown grafana-menu-save">
<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()">
<i class='fa fa-save'></i>
</a>
</li>
<!-- <li class="dropdown grafana&#45;menu&#45;save"> -->
<!-- <a bs&#45;tooltip="'Save'" data&#45;placement="bottom" class="dropdown&#45;toggle" data&#45;toggle="dropdown" ng&#45;click="saveDashboard()"> -->
<!-- <i class='fa fa&#45;save'></i> -->
<!-- </a> -->
<!-- </li> -->
<!-- -->
<li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>
Stop playlist
......
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li class="sidemenu-logo-container">
<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png">
<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle">
<i class="fa fa-angle-right"></i>
<li>
<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i>
</a>
</li>
<li ng-if="!grafana.user.isSignedIn">
<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
</li>
<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
<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" ng-class="{active: link.active}"><i class="fa fa-angle-right"></i>{{link.text}}</a>
</li>
</ul>
</li>
<li class="dropdown" ng-if="grafana.user.isSignedIn">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
<span class="gravatar-email small">{{grafana.user.login}}</span>
<li ng-repeat="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/logout">Logout</a></li>
</ul>
</li>
<!-- <li ng&#45;repeat&#45;end ng&#45;if="item.active"> -->
<!-- <ul class="sidemenu&#45;links"> -->
<!-- <li ng&#45;repeat="link in item.links"> -->
<!-- <a href="{{link.href}}" class="sidemenu&#45;link" ng&#45;class="{active: link.active}"><i class="fa fa&#45;angle&#45;right"></i>{{link.text}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li class="dropdown" ng&#45;if="grafana.user.isSignedIn"> -->
<!-- <a class="sidemenu&#45;user pointer" data&#45;toggle="dropdown" title="{{grafana.user.email}}"> -->
<!-- <span class="gravatar&#45;missing">f</span> -->
<!-- <img ng&#45;src="{{grafana.user.gravatarUrl}}" width="35"> -->
<!-- <span class="gravatar&#45;email small">{{grafana.user.login}}</span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a href="{{appSubUrl}}/?logout">Logout</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
</div>
src/app/partials/templating_editor.html
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="gf-box-header">
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div ng-if="editor.index == 0">
......@@ -50,7 +50,6 @@
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="row">
<div class="editor-option">
<div class="editor-row">
<div class="editor-option">
......@@ -140,14 +139,8 @@
</div>
</div>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
</div>
</div>
src/css/less/grafana.less
......@@ -55,6 +55,10 @@
padding-left: 0px;
}
.navbar .nav>li>a {
padding: 19px 15px 8px;
}
.top-nav {
float: left;
}
......@@ -62,15 +66,17 @@
.top-nav-menu-btn {
display: block;
float: left;
padding: 15px 13px 13px 14px;;
padding: 11px 6px 12px 14px;
position: relative;
border-right: 2px solid black;
border-right: 1px solid @black;
font-weight: bold;
font-size: 90%;
span {
padding-left: 4px;
i {
font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
position: relative;
top: 2px;
top: 4px;
}
}
......
src/css/less/sidemenu.less
......@@ -34,35 +34,10 @@
.sidemenu {
list-style: none;
background: @grafanaPanelBackground;
margin: 0;
padding: 0;
}
.sidemenu-links {
margin: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
display: block;
}
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
color: @gray;
i {
padding-right: 15px;
}
&.active {
color: white;
font-weight: bold;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
......@@ -83,14 +58,44 @@
border-bottom: 1px solid black;
}
.sidemenu-top-btn {
padding: 14px 0px 12px 20px;
background: @grafanaPanelBackground;
display: block;
i {
padding-right: 5px;
font-size: 170%;
color: @gray;
}
border-bottom: 10px solid @bodyBackground;
}
.sidemenu-icon {
border-radius: 50%;
background: black;
box-shadow: 0 0 10px 6px #2E2E2E;
width: 35px;
height: 35px;
display: inline-block;
i {
color: @textColor;
position: relative;
left: 9px;
top: 2px;
font-size: 120%;
}
}
.sidemenu-item {
font-size: 17px;
color: @orange;
line-height: 34px;
font-weight: bold;
padding: 14px 10px 14px 20px;
display: block;
i {
padding-right: 15px;
.sidemenu-item-text {
padding-left: 15px;
}
border-bottom: 1px solid black;
}
.sidemenu-logo-container {
......
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