Skip to content

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

Sub nav for account page, some css changes

parent 9a45a25e
Showing with 55 additions and 159 deletions
src/app/directives/topnav.js
...@@ -13,9 +13,11 @@ function (angular) { ...@@ -13,9 +13,11 @@ function (angular) {
transclude: true, transclude: true,
scope: { scope: {
title: "@", title: "@",
section: "@",
titleAction: "&", titleAction: "&",
toggle: "&", toggle: "&",
showMenuBtn: "=", showMenuBtn: "=",
subnav: "=",
}, },
template: template:
'<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' + '<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
...@@ -29,9 +31,15 @@ function (angular) { ...@@ -29,9 +31,15 @@ function (angular) {
'<i ng-class="icon"></i>' + '<i ng-class="icon"></i>' +
'</span>' + '</span>' +
'<span ng-show="section">' +
'<span class="top-nav-title">{{section}}</span>' +
'<i class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
'</span>' +
'<a ng-click="titleAction()" class="top-nav-title">' + '<a ng-click="titleAction()" class="top-nav-title">' +
'{{title}}' + '{{title}}' +
'</a>' + '</a>' +
'<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>' +
'</div><div ng-transclude></div></div></div></div>', '</div><div ng-transclude></div></div></div></div>',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
scope.icon = attrs.icon; scope.icon = attrs.icon;
......
src/app/features/account/partials/account.html
<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu"> <topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
<ul class="nav">
<li class="active"><a href="account">Overview</a></li>
<li><a href="account/users">Users</a></li>
<li><a href="account/import">Import</a></li>
</ul>
</topnav> </topnav>
<div class="admin-page"> <div class="admin-page">
...@@ -33,60 +38,6 @@ ...@@ -33,60 +38,6 @@
</div> </div>
<h2> <h2>
Account users
</h2>
<div class="gf-box" ng-controller="AccountUsersCtrl">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<form name="form">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
<strong>Username or Email</strong>
</li>
<li>
<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
</li>
<li class="tight-form-item">
role
</li>
<li>
<select type="text" ng-model="user.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']">
</select>
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
<div class="editor-row row">
<table class="grafana-options-table span5">
<tr ng-repeat="user in users">
<td>{{user.email}}</td>
<td>
{{user.role}}
</td>
<td style="width: 1%">
<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<h2>
API Keys API Keys
</h2> </h2>
...@@ -136,54 +87,6 @@ ...@@ -136,54 +87,6 @@
</div> </div>
</div> </div>
<h2>Import dashboards</h2>
<div class="gf-box" ng-controller="ImportCtrl">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 150px">
<strong>Dashboard source</strong>
</li>
<li>
<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
</select>
</li>
<li class="tight-form-item">
<strong>Destination</strong>
</li>
<li>
<select type="text" ng-model="destName" class="input-medium tight-form-input" ng-options="f for f in datasources">
</select>
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="startImport()">Import</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" ng-if="importing">
<section class="section">
<h5>{{infoText}}</h5>
<div class="editor-row row">
<table class="grafana-options-table span5">
<tr ng-repeat="dash in imported">
<td>{{dash.name}}</td>
<td>
{{dash.info}}
</td>
</tr>
</table>
</div>
</section>
</div>
</div>
</div>
</div> </div>
src/app/features/account/partials/import.html
<topnav toggle="toggleSideMenu()" <topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu" subnav="true">
title="Import" <ul class="nav">
icon="fa fa-download" <li><a href="account">Overview</a></li>
show-menu-btn="!grafana.sidemenu"> <li><a href="account/users">Users</a></li>
<li class="active"><a href="account/import">Import</a></li>
</ul>
</topnav> </topnav>
<div class="gf-box" style="min-height: 500px"> <div class="gf-box" style="min-height: 500px">
......
src/app/features/account/partials/users.html
<topnav toggle="toggleSideMenu()" title="Users" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav> <topnav toggle="toggleSideMenu()" title="Account" icon="fa fa-shield" show-menu-btn="!grafana.sidemenu" subnav="true">
<ul class="nav">
<li><a href="account">Overview</a></li>
<li class="active"><a href="account/users">Users</a></li>
<li><a href="account/import">Import</a></li>
</ul>
</topnav>
<div class="gf-box" style="min-height: 500px"> <div class="gf-box" style="min-height: 500px">
......
src/app/features/admin/adminSettingsCtrl.js deleted 100644 → 0
define([
'angular',
],
function (angular) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('AdminSettingsCtrl', function($scope) {
$scope.init = function() {
};
$scope.init();
});
});
src/app/features/admin/partials/admin.html
<topnav toggle="toggleSideMenu()" <topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
title="Admin" <ul class="nav">
icon="fa fa-cube" <li class="active"><a href="admin">Settings</a></li>
show-menu-btn="!grafana.sidemenu"> <li><a href="admin/users">Users</a></li>
</ul>
</topnav> </topnav>
<div class="gf-box" style="min-height: 500px"> <div class="gf-box" style="min-height: 500px">
</div> </div>
src/app/features/admin/partials/settings.html deleted 100644 → 0
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin > Settings'"></div>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="dashboard-editor-body">
<div class="editor-row row">
<div class="section span6">
</div>
</div>
</div>
</div>
src/app/features/admin/partials/users.html
<topnav toggle="toggleSideMenu()" <topnav toggle="toggleSideMenu()" icon="fa fa-cube" title="Admin" show-menu-btn="!grafana.sidemenu" subnav="true">
title="Admin" <ul class="nav">
icon="fa fa-cube" <li><a href="admin">Settings</a></li>
show-menu-btn="!grafana.sidemenu"> <li class="active"><a href="admin/users">Users</a></li>
</ul>
</topnav> </topnav>
<div class="admin-page"> <div class="admin-page">
<h2> Users </h2> <h2>Users</h2>
<div class="gf-box" style="min-height: 500px"> <div class="gf-box" style="min-height: 500px">
<div class="gf-box-body"> <div class="gf-box-body">
......
src/app/features/all.js
...@@ -15,6 +15,6 @@ define([ ...@@ -15,6 +15,6 @@ define([
'./account/importCtrl', './account/importCtrl',
'./account/accountCtrl', './account/accountCtrl',
'./admin/adminUsersCtrl', './admin/adminUsersCtrl',
'./admin/adminSettingsCtrl', './admin/adminCtrl',
'./grafanaDatasource/datasource', './grafanaDatasource/datasource',
], function () {}); ], function () {});
src/app/features/profile/partials/profile.html
<topnav toggle="toggleSideMenu()" <topnav toggle="toggleSideMenu()"
title="Profile" title="{{grafana.user.name}}"
section="Profile"
icon="fa fa-user" icon="fa fa-user"
show-menu-btn="!grafana.sidemenu"> show-menu-btn="!grafana.sidemenu">
</topnav> </topnav>
......
src/app/routes/backend/all.js
...@@ -54,9 +54,9 @@ define([ ...@@ -54,9 +54,9 @@ define([
templateUrl: 'app/features/profile/partials/profile.html', templateUrl: 'app/features/profile/partials/profile.html',
controller : 'ProfileCtrl', controller : 'ProfileCtrl',
}) })
.when('/admin/settings', { .when('/admin', {
templateUrl: 'app/features/admin/partials/settings.html', templateUrl: 'app/features/admin/partials/admin.html',
controller : 'AdminSettingsCtrl', controller : 'AdminCtrl',
}) })
.when('/admin/users', { .when('/admin/users', {
templateUrl: 'app/features/admin/partials/users.html', templateUrl: 'app/features/admin/partials/users.html',
......
src/css/less/navbar.less
...@@ -9,12 +9,13 @@ ...@@ -9,12 +9,13 @@
.top-nav { .top-nav {
float: left; float: left;
font-size: 16px;
} }
.fa.top-nav-breadcrumb-icon { .fa.top-nav-breadcrumb-icon {
margin: 15px 21px 8px 0px; margin: 17px 0 6px 5px;
float: left; float: left;
font-size: 160%; font-size: 120%;
color: @textColor; color: @textColor;
} }
...@@ -27,7 +28,7 @@ ...@@ -27,7 +28,7 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
padding: 4px; padding: 4px;
margin: 7px 6px 3px 9px; margin: 6px 6px 3px 9px;
.fa { .fa {
color: @textColor; color: @textColor;
width: 30px; width: 30px;
...@@ -87,9 +88,9 @@ ...@@ -87,9 +88,9 @@
} }
.top-nav-icon { .top-nav-icon {
margin: 5px 0px 0 11px;
line-height: 34px; line-height: 34px;
float: left; float: left;
margin: 5px 11px;
} }
.top-nav-section { .top-nav-section {
...@@ -105,9 +106,9 @@ ...@@ -105,9 +106,9 @@
.top-nav-title { .top-nav-title {
display: block; display: block;
float: left; float: left;
padding: 16px 10px 10px 0px; padding: 17px 10px 10px 13px;
font-size: 1.3em;
font-weight: bold; font-weight: bold;
color: @textColor;
i { i {
padding-left: 4px; padding-left: 4px;
position: relative; position: relative;
......
src/css/less/sidemenu.less
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
} }
.sidemenu { .sidemenu {
font-size: 16px;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -85,7 +86,7 @@ ...@@ -85,7 +86,7 @@
position: relative; position: relative;
left: 11px; left: 11px;
top: 5px; top: 5px;
font-size: 135%; font-size: 125%;
} }
} }
...@@ -96,7 +97,6 @@ ...@@ -96,7 +97,6 @@
color: #f80; color: #f80;
line-height: 34px; line-height: 34px;
padding: 14px 10px 14px 20px; padding: 14px 10px 14px 20px;
font-weight: bold;
display: block; display: block;
.sidemenu-item-text { .sidemenu-item-text {
......
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