Skip to content

N
nexpie-grafana-theme
Commit 1ddc2e68 by Torkel Ödegaard
Options

Further progress on new design

parent fcba5a6e
Showing with 90 additions and 28 deletions
src/app/directives/all.js
...@@ -16,4 +16,5 @@ define([ ...@@ -16,4 +16,5 @@ define([
'./graphiteSegment', './graphiteSegment',
'./grafanaVersionCheck', './grafanaVersionCheck',
'./dropdown.typeahead', './dropdown.typeahead',
'./topnav',
], function () {}); ], function () {});
src/app/directives/dashEditLink.js
...@@ -6,9 +6,9 @@ function (angular, $) { ...@@ -6,9 +6,9 @@ function (angular, $) {
'use strict'; 'use strict';
var editViewMap = { var editViewMap = {
'settings': 'app/partials/dasheditor.html', 'settings': { src: 'app/partials/dasheditor.html', title: "Settings" },
'annotations': 'app/features/annotations/partials/editor.html', 'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" },
'templating': 'app/partials/templating_editor.html', 'templating': { src: 'app/partials/templating_editor.html', title: "Templating" }
}; };
angular angular
...@@ -55,7 +55,10 @@ function (angular, $) { ...@@ -55,7 +55,10 @@ function (angular, $) {
} }
function showEditorPane(evt, payload, editview) { function showEditorPane(evt, payload, editview) {
if (editview) { payload.src = editViewMap[editview]; } if (editview) {
scope.grafana.editview = editViewMap[editview];
payload.src = scope.grafana.editview.src;
}
if (lastEditor === payload.src) { if (lastEditor === payload.src) {
hideEditorPane(); hideEditorPane();
...@@ -98,10 +101,12 @@ function (angular, $) { ...@@ -98,10 +101,12 @@ function (angular, $) {
if (newValue) { if (newValue) {
showEditorPane(null, {}, newValue); showEditorPane(null, {}, newValue);
} else if (oldValue) { } else if (oldValue) {
scope.grafana.editview = null;
hideEditorPane(); hideEditorPane();
} }
}); });
scope.grafana.editview = null;
scope.$on("$destroy", hideEditorPane); scope.$on("$destroy", hideEditorPane);
scope.onAppEvent('hide-dash-editor', hideEditorPane); scope.onAppEvent('hide-dash-editor', hideEditorPane);
scope.onAppEvent('show-dash-editor', showEditorPane); scope.onAppEvent('show-dash-editor', showEditorPane);
......
src/app/directives/topnav.js 0 → 100644
define([
'angular',
'kbn'
],
function (angular) {
'use strict';
angular
.module('grafana.directives')
.directive('topnav', function() {
return {
restrict: 'E',
scope: {
title: "@",
section: "@",
titleAction: "&",
toggle: "&",
showMenuBtn: "=",
},
template:
'<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>',
link: function(scope, elem, attrs) {
scope.icon = attrs.icon;
}
};
});
});
src/app/partials/dashboard_topnav.html
...@@ -2,26 +2,20 @@ ...@@ -2,26 +2,20 @@
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<div class="top-nav"> <topnav ng-if="!grafana.editview"
<span class="top-nav-menu-btn" ng-if="!grafana.sidemenu"> title="{{dashboard.title}}"
<a class="pointer" ng-click="toggleSideMenu()"> icon="fa fa-th-large"
<img class="logo-icon" src="img/fav32.png"></img> title-action="openSearch()"
<span>menu</span> toggle="toggleSideMenu()"
</a> show-menu-btn="!grafana.sidemenu">
</span> </topnav>
<span class="top-nav-breadcrumb"> <topnav ng-if="grafana.editview"
<i class="top-nav-icon" ng-class="topnav.icon"></i> title="{{grafana.editview.title}}"
<i class="fa fa-angle-right"></i> icon="fa fa-th-large"
</span> section="{{dashboard.title}}"
show-menu-btn="!grafana.sidemenu">
<a ng-click="topnav.titleAction()" class="top-nav-title"> </topnav>
{{topnav.title}}
<span class="small" ng-show="topnav.titleAction">
<i class="fa fa-angle-down"></i>
</span>
</a>
</div>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen"> <li ng-show="dashboardViewState.fullscreen">
......
src/css/less/grafana.less
...@@ -67,6 +67,7 @@ ...@@ -67,6 +67,7 @@
font-weight: bold; font-weight: bold;
font-size: 90%; font-size: 90%;
span { span {
padding-left: 4px;
position: relative; position: relative;
top: 2px; top: 2px;
} }
...@@ -75,14 +76,22 @@ ...@@ -75,14 +76,22 @@
.top-nav-breadcrumb { .top-nav-breadcrumb {
display: block; display: block;
float: left; float: left;
padding: 18px 9px 12px 12px; padding: 18px 9px 8px 12px;
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
color: darken(@gray, 10%); color: darken(@gray, 10%);
i { i {
padding-left: 4px; padding-left: 9px;
} }
.fa-angle-right { }
.top-nav-section {
display: block;
float: left;
padding: 19px 9px 8px 0;
font-weight: bold;
i {
padding-left: 8px;
} }
} }
...@@ -93,8 +102,9 @@ ...@@ -93,8 +102,9 @@
font-size: 1.3em; font-size: 1.3em;
font-weight: bold; font-weight: bold;
i { i {
padding-left: 4px;
position: relative; position: relative;
top: 3px; top: 2px;
} }
} }
......
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