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) {
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>' +
'<i class="fa fa-chevron-down"></i>' +
'</a>' +
'</span>' +
'<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img> ' +
'<i class="fa fa-angle-right"></i>' +
'</a>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
......@@ -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 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-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
......
src/app/features/dashboard/dashboardNavCtrl.js
......@@ -22,7 +22,6 @@ function (angular, _, moment, config, store) {
$scope.onAppEvent('zoom-out', function() {
$scope.zoom(2);
});
};
$scope.set_default = function() {
......@@ -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);
};
$scope.openEditView = function(editview) {
var search = _.extend($location.search(), {editview: editview});
$location.search(search);
};
$scope.saveForSharing = function() {
var clone = angular.copy($scope.dashboard);
clone.temp = true;
......
src/app/panels/timepicker/module.html
......@@ -21,6 +21,7 @@
<li class="dropdown">
<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-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
<i class="fa fa-caret-down"></i>
......
src/app/partials/dashboard_topnav.html
......@@ -2,34 +2,41 @@
<div class="navbar-inner">
<div class="container-fluid">
<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-dash>
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-angle-right"></i>
</a>
<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-dash>
<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<i class="fa fa-angle-down"></i>
</a>
<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>
<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>
<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>
<a href="asd"><i class="fa fa-save"></i></a>
<a ng-click="saveDashboard()"><i class="fa fa-save"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-cog"></i></a>
<li class="dropdown">
<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>
</ul>
......
src/app/partials/dasheditor.html
<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-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
......
src/app/partials/sidemenu.html
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li>
<li style="margin-bottom: 15px;">
<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="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
......
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl">
<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">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">
......
src/app/partials/templating_editor.html
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<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-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div>
......
src/css/less/navbar.less
......@@ -4,6 +4,7 @@
.navbar .nav>li>a {
padding: 19px 15px 8px;
.fa { font-size: 130%; }
}
.top-nav {
......@@ -13,18 +14,45 @@
.top-nav-menu-btn {
display: block;
float: left;
padding: 11px 6px 12px 14px;
position: relative;
border-right: 1px solid @black;
font-weight: bold;
font-size: 90%;
padding: 11px 9px 11px 14px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i {
font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
font-size: 160%;
color: darken(@gray, 15%);
padding: 0px 0px 0px 0px;
position: relative;
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 {
......
src/css/less/sidemenu.less
......@@ -13,7 +13,6 @@
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 1px solid black;
min-height: 100%;
z-index: 101;
}
......@@ -59,15 +58,15 @@
}
.sidemenu-top-btn {
padding: 14px 0px 12px 20px;
background: @grafanaPanelBackground;
display: block;
padding: 14px 0px 10px 20px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i {
padding-right: 5px;
font-size: 170%;
color: @gray;
}
border-bottom: 10px solid @bodyBackground;
}
.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