Skip to content

N
nexpie-grafana-theme
Commit 289ba74e by Torkel Ödegaard
Options

ux: new dashnav design

parent 8bd3d106
Showing with 172 additions and 189 deletions
public/app/features/dashboard/dashnav/dashnav.html
<div class="navbar">
<div class="navbar-inner">
<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
<i class="gicon gicon-dashboard"></i>
{{ctrl.dashboard.title}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<ul class="nav dashnav-action-icons">
<li ng-show="::ctrl.dashboard.meta.canStar">
<a class="pointer" ng-click="ctrl.starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="::ctrl.dashboard.meta.canShare" class="dropdown">
<a class="pointer" ng-click="ctrl.hideTooltip($event)" bs-tooltip="'Share dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-share-square-o"></i></a>
<ul class="dropdown-menu">
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(0)">
<i class="fa fa-link"></i> Link to Dashboard
<div class="dropdown-desc">Share an internal link to the current dashboard. Some configuration options available.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(1)">
<i class="icon-gf icon-gf-snapshot"></i>Snapshot
<div class="dropdown-desc">Interactive, publically accessible dashboard. Sensitive data is stripped out.</div>
</a>
</li>
<li>
<a class="pointer" ng-click="ctrl.shareDashboard(2)">
<i class="fa fa-cloud-upload"></i>Export
<div class="dropdown-desc">Export the dashboard to a JSON file for others and to share on Grafana.com</div>
</a>
</li>
</ul>
</li>
<li ng-show="::ctrl.dashboard.meta.canSave">
<a ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="::ctrl.dashboard.snapshot.originalUrl">
<a ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom"><i class="fa fa-link"></i></a>
</li>
<li class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
</li>
<li class="navbar-mini-btn-wrapper" ng-show="::ctrl.dashboard.meta.canSave">
<button class="btn btn-secondary btn-mini" ng-click="ctrl.addPanel()">
<i class="fa fa-plus-circle"></i> Add Panel
</button>
</li>
</ul>
<div class="nav nav--grow">
<a class="navbar-page-btn" ng-click="ctrl.showSearch()">
<i class="gicon gicon-dashboard"></i>
{{ctrl.dashboard.title}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="nav dash-playlist-actions" ng-if="ctrl.playlistSrv.isPlaying">
<li>
<a ng-click="ctrl.playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="ctrl.playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<div class="navbar-buttons">
<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
<i class="gicon gicon-add-panel"></i>
</button>
<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canStar" ng-click="ctrl.starDashboard()" bs-tooltip="'Mark as favorite'" data-placement="bottom">
<i class="fa" ng-class="{'fa-star-o': !ctrl.dashboard.meta.isStarred, 'fa-star': ctrl.dashboard.meta.isStarred}"></i>
</button>
<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canShare" ng-click="ctrl.shareDashboard(0)" bs-tooltip="'Share dashboard'" data-placement="bottom">
<i class="fa fa-share-square-o"></i></a>
</button>
<button class="btn navbar-button" ng-show="::ctrl.dashboard.meta.canSave" ng-click="ctrl.saveDashboard()" bs-tooltip="'Save dashboard <br> CTRL+S'" data-placement="bottom">
<i class="fa fa-save"></i>
</button>
<button class="btn navbar-button" ng-if="::ctrl.dashboard.snapshot.originalUrl" ng-href="{{ctrl.dashboard.snapshot.originalUrl}}" bs-tooltip="'Open original dashboard'" data-placement="bottom">
<i class="fa fa-link"></i>
</button>
<div class="dropdown">
<button class="btn navbar-button" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</button>
<ul class="dropdown-menu dropdown-menu--navbar">
<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
{{::navItem.title}}
</a>
</li>
</ul>
</div>
<ul class="nav pull-right">
<li ng-show="ctrl.dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="ctrl.exitFullscreen()">
Back to dashboard
</a>
</li>
<li ng-if="!ctrl.dashboard.timepicker.hidden">
<gf-time-picker dashboard="ctrl.dashboard"></gf-time-picker>
</li>
</ul>
</div>
<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
</div>
<dashboard-search></dashboard-search>
public/app/features/dashboard/timepicker/timepicker.html
<ul class="nav gf-timepicker-nav">
<div class="navbar-buttons">
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom" ng-click='ctrl.move(-1)'>
<i class="fa fa-chevron-left"></i>
</button>
<li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom">
<a ng-click='ctrl.move(-1)'>
<i class="fa fa-chevron-left"></i>
</a>
</li>
<li class="dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom">
<a ng-click='ctrl.zoom(2)'>Zoom Out</a>
</li>
</li>
<li class="dashnav-move-timeframe gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom">
<a ng-click='ctrl.move(1)'>
<i class="fa fa-chevron-right"></i>
</a>
</li>
<button class="btn navbar-button dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
<i class="fa fa-search-minus"></i>
</button>
<li>
<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="gf-timepicker-nav-btn">
<i class="fa fa-clock-o"></i>
<span ng-bind="ctrl.rangeString"></span>
<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">
UTC
</span>
<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom" ng-click='ctrl.move(1)'>
<i class="fa fa-chevron-right"></i>
</button>
</div>
<span ng-show="ctrl.dashboard.refresh" class="text-warning">
&nbsp; Refresh every {{ctrl.dashboard.refresh}}
</span>
</a>
</li>
<div class="navbar-buttons">
<button bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="btn navbar-button gf-timepicker-nav-btn">
<i class="fa fa-clock-o"></i>
<span ng-bind="ctrl.rangeString"></span>
<span ng-show="ctrl.isUtc" class="gf-timepicker-utc">UTC</span>
<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
</button>
<li class="dashnav-refresh-action">
<a ng-click="ctrl.timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
<button class="btn navbar-button dashnav-refresh-action" ng-click="ctrl.timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i>
</button>
</div>
public/sass/_variables.dark.scss
......@@ -122,8 +122,9 @@ $list-item-link-color: $text-color;
$list-item-shadow: $card-shadow;
// Scrollbars
$scrollbarBackground: #3a3a3a;
$scrollbarBackground: #404357;
$scrollbarBackground2: #3a3a3a;
$scrollbarBorder: black;
// Tables
......
public/sass/base/_icons.scss
......@@ -54,3 +54,7 @@
.gicon-org {
background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
}
.gicon-zoom-out {
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
}
public/sass/components/_navbar.scss
.navbar {
display: block;
overflow: visible;
position: relative;
padding-left: $side-menu-width;
box-shadow: $navbarShadow;
z-index: $zindex-navbar-fixed;
background: $navbarBackground;
}
.navbar-inner {
min-height: $navbarHeight;
height: $navbarHeight;
padding-right: $spacer;
display: flex;
@include clearfix();
}
.sidemenu-open {
......@@ -22,48 +16,49 @@
}
}
.navbar .nav {
position: relative;
left: 0;
float: left;
&--grow {
flex-grow: 1;
}
}
.navbar .nav > li {
float: left;
}
// Links
.navbar .nav > li > a {
float: none;
padding: 17px 13px 13px;
color: $navbarLinkColor;
text-decoration: none;
.fa { font-size: 115%; }
}
// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: $navbarLinkColorHover;
text-decoration: none;
}
// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: $navbarLinkColorActive;
text-decoration: none;
background-color: $navbarLinkBackgroundActive;
}
// .navbar .nav {
// position: relative;
// left: 0;
// float: left;
//
// &--grow {
// flex-grow: 1;
// }
// }
//
//
// .navbar .nav > li {
// float: left;
// }
//
// // Links
// .navbar .nav > li > a {
// float: none;
// padding: 17px 13px 13px;
// color: $navbarLinkColor;
// text-decoration: none;
//
// .fa { font-size: 115%; }
// }
//
// // Hover/focus
// .navbar .nav > li > a:focus,
// .navbar .nav > li > a:hover {
// color: $navbarLinkColorHover;
// text-decoration: none;
// }
//
// // Active nav items
// .navbar .nav > .active > a,
// .navbar .nav > .active > a:hover,
// .navbar .nav > .active > a:focus {
// color: $navbarLinkColorActive;
// text-decoration: none;
// background-color: $navbarLinkBackgroundActive;
// }
.navbar-page-btn {
flex-grow: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
......@@ -106,3 +101,47 @@
.navbar-mini-btn-wrapper {
padding: 15px;
}
.navbar-buttons {
height: $navbarHeight;
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: $spacer;
}
.navbar-button {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
display: inline-block;
font-weight: $btn-font-weight;
padding: 5px 10px;
line-height: 16px;
color: $text-muted;
border: 1px solid #151515;
margin-right: 1px;
.gicon {
font-size: 16px;
}
.fa {
font-size: 16px;
}
&--add-panel {
.gicon {
font-size: 22px;
}
padding: 2px 8px;
}
&--tight {
.fa {
font-size: 14px;
position: relative;
top: 2px;
}
padding: 6px 4px;
}
}
public/sass/components/_scrollbar.scss
......@@ -71,7 +71,7 @@
}
.ps__thumb-y {
@include gradient-vertical($blue, lighten($blue, 20%));
@include gradient-vertical($scrollbarBackground, $scrollbarBackground2);
border-radius: 6px;
width: 6px;
/* there must be 'right' for ps__thumb-y */
......
public/sass/components/_timepicker.scss
.nav.gf-timepicker-nav {
margin-right: 0;
}
.timepicker-timestring {
font-weight: normal;
}
.gf-timepicker-nav-btn {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gf-timepicker-nav {
flex-wrap: nowrap;
display: flex;
}
.gf-timepicker-dropdown {
......@@ -118,14 +113,3 @@
@extend .fa-chevron-left;
}
.gf-timepicker-time-control {
font-size: $font-size-sm;
a {
padding: 18px 7px 13px !important;
}
}
.dashnav-move-timeframe {
position: relative;
top: 1px;
}
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