Skip to content

N
nexpie-grafana-theme
Commit 42b1c8c8 by Torkel Ödegaard
Options

Merge branch 'master' into style-changes-mattttt

parents 1bd58bc1 ff4dbea1
Showing with 110 additions and 219 deletions
public/app/core/directives/body_class.js
...@@ -12,6 +12,14 @@ function (_, $, coreModule) { ...@@ -12,6 +12,14 @@ function (_, $, coreModule) {
var lastHideControlsVal; var lastHideControlsVal;
$scope.onAppEvent('panel-fullscreen-enter', function() {
elem.toggleClass('panel-in-fullscreen', true);
});
$scope.onAppEvent('panel-fullscreen-exit', function() {
elem.toggleClass('panel-in-fullscreen', false);
});
$scope.$watch('dashboard.hideControls', function() { $scope.$watch('dashboard.hideControls', function() {
if (!$scope.dashboard) { if (!$scope.dashboard) {
return; return;
......
public/app/features/dashboard/dashnav/dashnav.html
<navbar> <navbar>
<div class="top-nav-btn top-nav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot"> <div class="top-nav-btn dashnav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
<a class="pointer" ng-click="openSearch()"> <a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i> <i class="fa fa-th-large"></i>
<span class="dashboard-title">{{dashboard.title}}</span> <span class="dashboard-title">{{dashboard.title}}</span>
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</a> </a>
</div> </div>
<div class="top-nav-btn top-nav-dashboards-btn" ng-if="dashboardMeta.isSnapshot"> <div class="top-nav-btn dashnav-dashboards-btn" ng-if="dashboardMeta.isSnapshot">
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()"> <a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom" ng-click="openSearch()">
<i class="icon-gf icon-gf-snapshot"></i> <i class="icon-gf icon-gf-snapshot"></i>
<span class="dashboard-title"> <span class="dashboard-title">
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</a> </a>
</div> </div>
<ul class="nav pull-left top-nav-dash-actions"> <ul class="nav pull-left dashnav-action-icons">
<li ng-show="dashboardMeta.canStar"> <li ng-show="dashboardMeta.canStar">
<a class="pointer" ng-click="starDashboard()"> <a class="pointer" ng-click="starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i> <i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li ng-show="dashboard.meta.fullscreen" class="back-to-dashboard-link"> <li ng-show="dashboard.meta.fullscreen" class="dashnav-back-to-dashboard">
<a ng-click="exitFullscreen()"> <a ng-click="exitFullscreen()">
Back to dashboard Back to dashboard
</a> </a>
......
public/app/features/dashboard/timepicker/timepicker.html
<ul class="nav gf-timepicker-nav"> <ul class="nav gf-timepicker-nav">
<li class="grafana-menu-zoom-out"> <li class="dashnav-zoom-out">
<a class='small' ng-click='ctrl.zoom(2)'> <a class='small' ng-click='ctrl.zoom(2)'>
Zoom Out Zoom Out
</a> </a>
</li> </li>
<li ng-class="{'gf-timepicker-open': ctrl.isOpen}"> <li>
<a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()"> <a bs-tooltip="ctrl.tooltip" data-placement="bottom" ng-click="ctrl.openDropdown()" class="gf-timepicker-nav-btn">
<i class="fa fa-clock-o"></i> <i class="fa fa-clock-o"></i>
<span ng-bind="ctrl.rangeString"></span> <span ng-bind="ctrl.rangeString"></span>
<span ng-show="ctrl.isUtc" class="gf-timepicker-utc"> <span ng-show="ctrl.isUtc" class="gf-timepicker-utc">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</a> </a>
</li> </li>
<li class="grafana-menu-refresh"> <li class="dashnav-refresh-action">
<a ng-click="ctrl.timeSrv.refreshDashboard()"> <a ng-click="ctrl.timeSrv.refreshDashboard()">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
</a> </a>
......
public/less/grafana-responsive.less
...@@ -22,36 +22,94 @@ ...@@ -22,36 +22,94 @@
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@breakpoint-xs-up: ~"only screen and (min-width: @{screen-xs})";
@breakpoint-xs: ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})";
@breakpoint-sm-up: ~"only screen and (min-width: @{screen-sm})";
@breakpoint-sm: ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
@breakpoint-md-up: ~"only screen and (min-width: @{screen-md})";
@breakpoint-md: ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})";
@breakpoint-lg: ~"only screen and (min-width: @{screen-lg})";
.dashnav-back-to-dashboard {
display: none;
}
// Media queries // Media queries
// --------------------- // ---------------------
@media (max-width: 767px) { @media @breakpoint-xs {
div.panel { div.panel {
width: 100% !important; width: 100% !important;
padding: 0px !important; padding: 0px !important;
} }
.panel-margin {
margin-right: 0;
margin-left: 0;
}
body { body {
padding: 0; padding: 0;
} }
.dashnav-dashboards-btn a {
max-width: 200px;
}
.gf-timepicker-nav-btn {
max-width: 120px;
}
.dashnav-zoom-out,
.dashnav-action-icons {
display: none;
}
} }
.back-to-dashboard-link { @media @breakpoint-sm-up {
display: none; .dashnav-dashboards-btn a {
} max-width: 200px;
@media (min-width: 990px) {
.back-to-dashboard-link {
display: block;
} }
.sidemenu-open { .gf-timepicker-nav-btn {
.back-to-dashboard-link { max-width: 120px;
}
.panel-in-fullscreen {
.dashnav-action-icons {
display: none; display: none;
} }
.dashnav-back-to-dashboard {
display: block;
}
} }
} }
@media (min-width: 1210px) { @media @breakpoint-md-up {
.back-to-dashboard-link { .dashnav-dashboards-btn a {
max-width: 290px;
}
.gf-timepicker-nav-btn {
max-width: 250px;
}
.dashnav-zoom-out {
display: block; display: block;
} }
} }
@media @breakpoint-lg {
.panel-in-fullscreen {
.dashnav-action-icons {
display: block;
}
}
.dashnav-dashboards-btn a {
max-width: none;
}
.gf-timepicker-nav-btn {
max-width: none;
}
}
public/less/grafana.less
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
} }
.playlist-active { .playlist-active {
.grafana-menu-zoom-out,
.add-row-panel-hint, .add-row-panel-hint,
.grafana-menu-refresh, .dashnav-refresh-action,
.top-nav-dash-actions { .dashnav-zoom-out,
display:none; .dashnav-action-icons {
display: none;
} }
.grafana-menu-stop-playlist { .grafana-menu-stop-playlist {
......
public/less/navbar.less
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
.navbar .nav>li>a { .navbar .nav>li>a {
padding: 17px 15px 13px; padding: 17px 13px 13px;
.fa { font-size: 115%; } .fa { font-size: 115%; }
} }
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
.top-nav-menu-btn { .top-nav-menu-btn {
a { a {
padding: 6px 20px 6px 13px; padding: 6px 20px 6px 13px;
} }
img { img {
width: 30px; width: 30px;
...@@ -74,9 +74,13 @@ ...@@ -74,9 +74,13 @@
} }
} }
.top-nav-dashboards-btn { .dashnav-dashboards-btn {
a { a {
padding: 16px 17px 14px 13px; text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
padding: 16px 17px 15px 13px;
} }
.fa-th-large { .fa-th-large {
......
public/less/timepicker.less
...@@ -6,6 +6,12 @@ ...@@ -6,6 +6,12 @@
font-weight: normal; font-weight: normal;
} }
.gf-timepicker-nav-btn {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gf-timepicker-dropdown { .gf-timepicker-dropdown {
margin: -5px -10px 10px 5px; margin: -5px -10px 10px 5px;
padding: 10px 20px; padding: 10px 20px;
...@@ -14,10 +20,6 @@ ...@@ -14,10 +20,6 @@
.box-shadow(@navbarDropdownShadow); .box-shadow(@navbarDropdownShadow);
} }
li.gf-timepicker-open a {
background-color: @grafanaPanelBackground;
}
.gf-timepicker-absolute-section { .gf-timepicker-absolute-section {
width: 300px; width: 300px;
float: left; float: left;
......
public/vendor/bootstrap/less/navbar.less
...@@ -22,10 +22,8 @@ ...@@ -22,10 +22,8 @@
min-height: @navbarHeight; min-height: @navbarHeight;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); background-color: @navbarBackground;
border: 1px solid @navbarBorder; border: 1px solid @navbarBorder;
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 4px rgba(0,0,0,.065));
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
.clearfix(); .clearfix();
...@@ -37,199 +35,20 @@ ...@@ -37,199 +35,20 @@
width: auto; width: auto;
} }
// Override the default collapsed state
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
// Brand: website or project name
// -------------------------
.navbar .brand {
float: left;
display: block;
// Vertically center the text given @navbarHeight
padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
margin-left: -20px; // negative indent to left-align the text down the page
font-size: 20px;
font-weight: 200;
color: @navbarBrandColor;
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
&:hover,
&:focus {
text-decoration: none;
}
}
// Plain text in topbar
// -------------------------
.navbar-text {
margin-bottom: 0;
line-height: @navbarHeight;
color: @navbarText;
}
// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
color: @navbarLinkColor;
&:hover,
&:focus {
color: @navbarLinkColorHover;
}
}
// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
height: @navbarHeight;
margin: 0 9px;
border-left: 1px solid @navbarBackground;
border-right: 1px solid @navbarBackgroundHighlight;
}
// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.navbar .btn-group .btn,
.navbar .input-prepend .btn,
.navbar .input-append .btn,
.navbar .input-prepend .btn-group,
.navbar .input-append .btn-group {
margin-top: 0; // then undo the margin here so we don't accidentally double it
}
// Navbar forms
// -------------------------
.navbar-form {
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
input[type="radio"] {
margin-top: 3px;
}
.input-append,
.input-prepend {
margin-top: 5px;
white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
input {
margin-top: 0; // remove the margin on top since it's on the parent
}
}
}
// Navbar search
// -------------------------
.navbar-search {
position: relative;
float: left;
.navbarVerticalAlign(30px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
margin-bottom: 0;
padding: 4px 14px;
#font > .sans-serif(13px, normal, 1);
.border-radius(15px); // redeclare because of specificity of the type attribute
}
}
// Static navbar
// -------------------------
.navbar-static-top {
position: static;
margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner {
.border-radius(0);
}
}
// Fixed navbar
// -------------------------
// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for default navbar
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
border-width: 0 0 1px;
}
.navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
// Reset container width
// Required here as we reset the width earlier on and the grid mixins don't override early enough
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-top,
.navbar-static-top {
.navbar-inner {
.box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
}
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
.box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
}
}
// NAVIGATION // NAVIGATION
// ---------- // ----------
.navbar .nav { .navbar .nav {
position: relative; position: relative;
left: 0; left: 0;
display: block;
float: left; float: left;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
.nav {
display: block;
}
.navbar .nav.pull-right { .navbar .nav.pull-right {
float: right; // redeclare due to specificity float: right; // redeclare due to specificity
margin-right: 0; // remove margin on float right nav margin-right: 0; // remove margin on float right nav
......
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