Skip to content

N
nexpie-grafana-theme
Commit 465c72d9 by Torkel Ödegaard
Options

More work on topnav and gf-box redesign

parent 59ade616
Showing with 138 additions and 118 deletions
src/app/controllers/grafanaCtrl.js
......@@ -10,7 +10,7 @@ function (angular, config, _, $, store) {
var module = angular.module('grafana.controllers');
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv) {
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) {
$scope.init = function() {
$scope.grafana = {};
......@@ -45,6 +45,10 @@ function (angular, config, _, $, store) {
$scope.toggleSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu);
$timeout(function() {
$scope.$broadcast("render");
}, 50);
};
$rootScope.onAppEvent = function(name, callback) {
......
src/app/directives/topnav.js
......@@ -10,6 +10,53 @@ function (angular) {
.directive('topnav', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: "@",
section: "@",
titleAction: "&",
toggle: "&",
showMenuBtn: "=",
},
template:
'<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
'<div class="top-nav">' +
'<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>' +
'</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">' +
'{{section}}' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'<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><div ng-transclude></div></div></div></div>',
link: function(scope, elem, attrs) {
scope.icon = attrs.icon;
}
};
});
angular
.module('grafana.directives')
.directive('topnavDash', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: "@",
section: "@",
......@@ -49,4 +96,5 @@ function (angular) {
};
});
});
src/app/features/account/partials/account.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()" title="Details" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-shield"></i>
Account information
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="row editor-row">
<div class="section">
<form name="accountForm">
......
src/app/features/account/partials/apikeys.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()"
title="API Keys"
icon="fa fa-shield"
section="Account"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-key"></i>
API Tokens
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<form name="addTokenrForm" class="form-inline tight-form">
......
src/app/features/account/partials/datasources.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-sitemap"></i>
Data sources
</div>
<topnav toggle="toggleSideMenu()"
title="Data sources"
icon="fa fa-shield"
section="Account"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
<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>
</div>
<form name="editForm">
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row row" ng-if="editor.index == 0">
<div class="span8">
<div ng-if="datasources.length === 0">
......@@ -27,11 +22,11 @@
</div>
<table class="grafana-options-table" ng-if="datasources.length > 0">
<tr>
<td><strong>Name<strong></td>
<td><strong>Url<strong></td>
<td><strong><strong></td>
<td><strong><strong></td>
<td><strong><strong></td>
<td><strong>Name</strong></td>
<td><strong>Url</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ds in datasources">
<td style="width:1%">
......@@ -122,6 +117,4 @@
</form>
</div>
</div>
</div>
</div>
src/app/features/account/partials/users.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()" title="Users" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-users"></i>
Users
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
......
src/app/features/admin/partials/admin.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-instiution"></i>
System administration
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Settings','Users', 'Log', 'Audit']" data-title="{{tab}}">
</div>
</div>
</div>
</div>
</div>
</div>
<topnav toggle="toggleSideMenu()"
title="Users"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
</div>
src/app/features/admin/partials/users.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin > Users'"></div>
<topnav toggle="toggleSideMenu()"
title="Users"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="dashboard-editor-body">
<div class="gf-box" style="min-height: 500px">
<div class="gf-box-body">
<div class="editor-row row">
<div class="section span6">
<table class="grafana-options-table">
......
src/app/features/profile/partials/profile.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Profile'"></div>
<topnav toggle="toggleSideMenu()"
title="Details"
icon="fa fa-user"
section="Profile"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view">
<div class="editor-row">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-user"></i>
Personal information
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="row">
<form name="userForm">
<div>
......@@ -56,16 +63,18 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-cubes"></i>
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-shield"></i>
Your accounts
</div>
</div>
<br>
<div class="gf-box-body">
<table class="grafana-options-table">
<tr ng-repeat="ac in accounts">
<td>Name: {{ac.name}}</td>
......@@ -83,17 +92,18 @@
</tr>
</table>
</div>
</div>
</div>
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-plus-square"></i>
Add account
</div>
</div>
<br>
<div class="gf-box-body">
<form name="form">
<div class="tight-form">
<ul class="tight-form-list">
......@@ -112,9 +122,7 @@
</form>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/partials/dashboard_topnav.html
......@@ -2,20 +2,21 @@
<div class="navbar-inner">
<div class="container-fluid">
<topnav ng-if="!grafana.editview"
<topnav-dash ng-if="!grafana.editview"
title="{{dashboard.title}}"
icon="fa fa-th-large"
title-action="openSearch()"
toggle="toggleSideMenu()"
show-menu-btn="!grafana.sidemenu">
</topnav>
</topnav-dash>
<topnav ng-if="grafana.editview"
<topnav-dash ng-if="grafana.editview"
toggle="toggleSideMenu()"
title="{{grafana.editview.title}}"
icon="fa fa-th-large"
section="{{dashboard.title}}"
show-menu-btn="!grafana.sidemenu">
</topnav>
</topnav-dash>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
......@@ -35,8 +36,6 @@
</a>
</li>
<!-- <li class="grafana&#45;menu&#45;home"><a bs&#45;tooltip="'Goto saved default'" data&#45;placement="bottom" href='#/'><i class='fa fa&#45;home'></i></a></li> -->
<li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>
Stop playlist
......
src/app/partials/navbar.html
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="hamburger">
<a class="pointer" ng-click="toggleSideMenu()">
<i class="fa fa-bars"></i>
</a>
</span>
<span class="brand">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="page-title">{{pageTitle}}</span>
</span>
<topnav toggle="toggleSideMenu()"
title="{{pageTitle}}"
icon="{{pageIcon}}"
section="{{pageSection}}"
show-menu-btn="!grafana.sidemenu">
</topnav>
</div>
</div>
</div>
......
src/css/less/gfbox.less
.gf-box {
margin: 30px;
margin: 15px;
background-color: @grafanaPanelBackground;
position: relative;
border: 1px solid @grafanaTargetFuncBackground;
border-top: none;
}
.gf-box-header-close-btn {
......@@ -30,10 +29,9 @@
}
.gf-box-header {
border-bottom: 1px solid @grafanaTargetFuncBackground;
overflow: hidden;
background-color: @grafanaTargetBackground;
border-top: 1px solid @grafanaTargetFuncBackground;
border-bottom: 1px solid @grafanaTargetFuncBackground;
.tabs {
float: left;
}
......@@ -43,8 +41,8 @@
}
.gf-box-title {
border-bottom: 1px solid @fullEditBorder;
padding-right: 20px;
padding-left: 10px;
float: left;
color: @linkColor;
font-size: 18px;
......
src/css/less/grafana.less
......@@ -295,7 +295,6 @@
max-width: 400px;
}
.grafana-version-info {
position: absolute;
bottom: 2px;
......
src/css/less/sidemenu.less
......@@ -13,7 +13,7 @@
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
border-right: 1px solid black;
min-height: 100%;
z-index: 101;
}
......
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