Skip to content

N
nexpie-grafana-theme
Commit 6bc524df by Torkel Ödegaard
Options

progress on new design

parent 496e5bda
Showing with 92 additions and 100 deletions
src/app/directives/topnav.js
...@@ -21,12 +21,10 @@ function (angular) { ...@@ -21,12 +21,10 @@ function (angular) {
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">' +
'<div class="top-nav">' + '<div class="top-nav">' +
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' + '<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
'<a class="pointer" ng-click="toggle()">' + '<img class="logo-icon" src="img/fav32.png"></img> ' +
'<img class="logo-icon" src="img/fav32.png"></img>' + '<i class="fa fa-angle-right"></i>' +
'<i class="fa fa-chevron-down"></i>' + '</a>' +
'</a>' +
'</span>' +
'<span class="top-nav-breadcrumb">' + '<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' + '<i class="top-nav-icon" ng-class="icon"></i>' +
...@@ -50,46 +48,4 @@ function (angular) { ...@@ -50,46 +48,4 @@ function (angular) {
}; };
}); });
angular
.module('grafana.directives')
.directive('topnavDash', function() {
return {
restrict: 'E',
transclude: true,
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>' +
'<i class="fa fa-angle-right"></i>' +
'</a>' +
'</span>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></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}}' +
'</a>' +
'</div>',
link: function(scope, elem, attrs) {
scope.icon = attrs.icon;
}
};
});
}); });
src/app/features/annotations/partials/editor.html
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()"> <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-bolt"></i>
Annotations
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}"> <div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div> </div>
......
src/app/features/dashboard/dashboardNavCtrl.js
...@@ -22,7 +22,6 @@ function (angular, _, moment, config, store) { ...@@ -22,7 +22,6 @@ function (angular, _, moment, config, store) {
$scope.onAppEvent('zoom-out', function() { $scope.onAppEvent('zoom-out', function() {
$scope.zoom(2); $scope.zoom(2);
}); });
}; };
$scope.set_default = function() { $scope.set_default = function() {
...@@ -35,6 +34,11 @@ function (angular, _, moment, config, store) { ...@@ -35,6 +34,11 @@ function (angular, _, moment, config, store) {
alertSrv.set('Local Default Clear','Your default dashboard has been reset to the default','success', 5000); alertSrv.set('Local Default Clear','Your default dashboard has been reset to the default','success', 5000);
}; };
$scope.openEditView = function(editview) {
var search = _.extend($location.search(), {editview: editview});
$location.search(search);
};
$scope.saveForSharing = function() { $scope.saveForSharing = function() {
var clone = angular.copy($scope.dashboard); var clone = angular.copy($scope.dashboard);
clone.temp = true; clone.temp = true;
......
src/app/panels/timepicker/module.html
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
<li class="dropdown"> <li class="dropdown">
<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="dismiss();"> <a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="dismiss();">
<i class="fa fa-clock-o"></i>
<span ng-bind="time.rangeString"></span> <span ng-bind="time.rangeString"></span>
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span> <span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
......
src/app/partials/dashboard_topnav.html
...@@ -2,34 +2,41 @@ ...@@ -2,34 +2,41 @@
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<topnav-dash ng-if="!grafana.editview" <div class="top-nav">
title="{{dashboard.title}}" <a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
icon="fa fa-th-large" <img class="logo-icon" src="img/fav32.png"></img>
title-action="openSearch()" <i class="fa fa-angle-right"></i>
toggle="toggleSideMenu()" </a>
show-menu-btn="!grafana.sidemenu">
</topnav-dash>
<topnav-dash ng-if="grafana.editview" <a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
toggle="toggleSideMenu()" <i class="fa fa-th-large"></i>
title="{{grafana.editview.title}}" <i class="fa fa-angle-down"></i>
icon="fa fa-th-large" </a>
section="{{dashboard.title}}"
show-menu-btn="!grafana.sidemenu">
</topnav-dash>
<ul class="nav pull-left" style="font-size: 130%"> <a ng-click="asd()" class="top-nav-title pointer">
{{dashboard.title}}
</a>
</div>
<ul class="nav pull-left">
<li> <li>
<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a> <a class="pointer" ng-click="starDashboard()"><i class="fa fa-star-o" style="color: orange;"></i></a>
</li> </li>
<li> <li>
<a href="asd"><i class="fa fa-share-square-o"></i></a> <a class="pointer" ng-click="asd()"><i class="fa fa-share-square-o"></i></a>
</li> </li>
<li> <li>
<a href="asd"><i class="fa fa-save"></i></a> <a ng-click="saveDashboard()"><i class="fa fa-save"></i></a>
</li> </li>
<li> <li class="dropdown">
<a href="asd"><i class="fa fa-cog"></i></a> <a class="pointer" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu">
<li><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
<li><a class="pointer" ng-click="openEditView('settings');">Export</a></li>
<li><a class="pointer" ng-click="openEditView('settings');">View JSON</a></li>
</ul>
</li> </li>
</ul> </ul>
......
src/app/partials/dasheditor.html
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-cogs"></i>
Settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}"> <div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
......
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()"> <div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu"> <ul class="sidemenu">
<li> <li style="margin-bottom: 15px;">
<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()"> <a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img> <img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i> <i class="pull-right fa fa-angle-left"></i>
</a> </a>
</li> </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="item in menu" ng-class="{'active': item.active}"> <li ng-repeat="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}"> <a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span> <span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
......
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl"> <div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form" style="border-top: none"> <div class="tight-form" style="border-top: none">
<ul class="tight-form-list">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
</ul>
</div>
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.templating.enable"> <ul class="tight-form-list" ng-if="dashboard.templating.enable">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name"> <li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable "> <span class="template-variable ">
......
src/app/partials/templating_editor.html
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}"> <div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div> </div>
......
src/css/less/navbar.less
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
.navbar .nav>li>a { .navbar .nav>li>a {
padding: 19px 15px 8px; padding: 19px 15px 8px;
.fa { font-size: 130%; }
} }
.top-nav { .top-nav {
...@@ -13,18 +14,45 @@ ...@@ -13,18 +14,45 @@
.top-nav-menu-btn { .top-nav-menu-btn {
display: block; display: block;
float: left; float: left;
padding: 11px 6px 12px 14px; padding: 11px 9px 11px 14px;
position: relative; background: @grafanaTargetBackground;
border-right: 1px solid @black; border: 1px solid rgb(55, 54, 54);
font-weight: bold;
font-size: 90%;
i { i {
font-size: 170%; font-size: 160%;
color: @gray; color: darken(@gray, 15%);
padding: 0px 0px 0px 6px; padding: 0px 0px 0px 0px;
position: relative; position: relative;
top: 4px; top: 4px;
} }
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
}
}
.top-nav-dashboards-btn {
display: block;
float: left;
padding: 15px 7px 9px 14px;
font-size: 1.4em;
font-weight: bold;
color: #a2a2a2;
margin: 0 18px 0 0;
border: 1px solid rgb(55, 54, 54);
border-left: none;
background: @grafanaTargetBackground;
.fa-th-large {
font-size: 123%;
}
.fa-angle-down {
position: relative;
top: 4px;
}
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
.fa {
color: @textColor;
}
}
} }
.top-nav-breadcrumb { .top-nav-breadcrumb {
......
src/css/less/sidemenu.less
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
left: 0; left: 0;
width: 200px; width: 200px;
background: @bodyBackground; background: @bodyBackground;
border-right: 1px solid black;
min-height: 100%; min-height: 100%;
z-index: 101; z-index: 101;
} }
...@@ -59,15 +58,15 @@ ...@@ -59,15 +58,15 @@
} }
.sidemenu-top-btn { .sidemenu-top-btn {
padding: 14px 0px 12px 20px;
background: @grafanaPanelBackground;
display: block; display: block;
padding: 14px 0px 10px 20px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i { i {
padding-right: 5px; padding-right: 5px;
font-size: 170%; font-size: 170%;
color: @gray; color: @gray;
} }
border-bottom: 10px solid @bodyBackground;
} }
.sidemenu-icon { .sidemenu-icon {
......
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