Skip to content

N
nexpie-grafana-theme
Commit a3fe1efa by Torkel Ödegaard
Options

Merge branch 'css-tweaks' into develop, #1465

parents 04ca85fe e84d0dd6
Showing with 95 additions and 68 deletions
src/app/features/profile/partials/profile.html
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
UI Theme UI Theme
</li> </li>
<li> <li>
<select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']" ng-change="themeChanged()"></select> <select class="input-small tight-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
src/app/features/profile/profileCtrl.js
...@@ -7,7 +7,7 @@ function (angular, config) { ...@@ -7,7 +7,7 @@ function (angular, config) {
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
module.controller('ProfileCtrl', function($scope, backendSrv) { module.controller('ProfileCtrl', function($scope, backendSrv, contextSrv, $location) {
$scope.init = function() { $scope.init = function() {
$scope.getUser(); $scope.getUser();
...@@ -18,6 +18,7 @@ function (angular, config) { ...@@ -18,6 +18,7 @@ function (angular, config) {
backendSrv.get('/api/user').then(function(user) { backendSrv.get('/api/user').then(function(user) {
$scope.user = user; $scope.user = user;
$scope.user.theme = user.theme || 'dark'; $scope.user.theme = user.theme || 'dark';
$scope.old_theme = $scope.user.theme;
}); });
}; };
...@@ -35,7 +36,13 @@ function (angular, config) { ...@@ -35,7 +36,13 @@ function (angular, config) {
$scope.update = function() { $scope.update = function() {
if (!$scope.userForm.$valid) { return; } if (!$scope.userForm.$valid) { return; }
backendSrv.put('/api/user/', $scope.user);
backendSrv.put('/api/user/', $scope.user).then(function() {
contextSrv.user.name = $scope.user.name || $scope.user.login;
if ($scope.old_theme !== $scope.user.theme) {
window.location.href = config.appSubUrl + $location.path();
}
});
}; };
$scope.init(); $scope.init();
......
src/app/partials/sidemenu.html
...@@ -38,10 +38,7 @@ ...@@ -38,10 +38,7 @@
<li class="dropdown"> <li class="dropdown">
<a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()"> <a class="sidemenu-item pointer" data-toggle="dropdown" ng-click="loadOrgs()">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span> <span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-users"></i></span>
<span class="sidemenu-item-text"> <span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
{{contextSrv.user.orgName}}
<i class="fa fa-caret-down small"></i>
</span>
</a> </a>
<ul class="dropdown-menu" role="menu" style="left: 65px"> <ul class="dropdown-menu" role="menu" style="left: 65px">
<li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass"> <li ng-repeat="menuItem in orgMenu" ng-class="menuItem.cssClass">
......
src/css/less/bootswatch.light.less
...@@ -70,6 +70,7 @@ a.text-success:hover { color: darken(@green, 10%); } ...@@ -70,6 +70,7 @@ a.text-success:hover { color: darken(@green, 10%); }
.nav > .active > a:hover, .nav > .active > a:hover,
.nav > .active > a:focus { .nav > .active > a:focus {
.box-shadow(none); .box-shadow(none);
border-bottom: 1px solid @blue;
background-color: @navbarLinkBackgroundHover; background-color: @navbarLinkBackgroundHover;
} }
...@@ -317,6 +318,9 @@ div.subnav { ...@@ -317,6 +318,9 @@ div.subnav {
} }
} }
.btn-inverse {
}
.btn-large { .btn-large {
padding: 22px 30px; padding: 22px 30px;
} }
......
src/css/less/navbar.less
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
} }
.navbar .nav>li>a { .navbar .nav>li>a {
padding: 17px 15px 11px; padding: 17px 15px 13px;
.fa { font-size: 115%; } .fa { font-size: 115%; }
} }
...@@ -20,8 +20,9 @@ ...@@ -20,8 +20,9 @@
} }
.top-nav-menu-btn { .top-nav-menu-btn {
border: 1px solid @bodyBackground;
border-radius: 50%; border-radius: 50%;
background: black; background: @iconContainerBackground;
display: block; display: block;
position: relative; position: relative;
float: left; float: left;
...@@ -64,7 +65,7 @@ ...@@ -64,7 +65,7 @@
font-size: 1.4em; font-size: 1.4em;
font-weight: bold; font-weight: bold;
color: #a2a2a2; color: #a2a2a2;
border: 1px solid #555; border: @grafanaTriggerBorder;
a { a {
display: inline-block; display: inline-block;
background: @grafanaTargetFuncBackground; background: @grafanaTargetFuncBackground;
...@@ -75,7 +76,7 @@ ...@@ -75,7 +76,7 @@
&:hover { &:hover {
background: @grafanaTargetFuncHightlight; background: @grafanaTargetFuncHightlight;
.fa { .fa {
color: @linkColorHover color: @linkColor;
} }
} }
} }
......
src/css/less/panel.less
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
.panel-container { .panel-container {
background: @grafanaPanelBackground; background: @grafanaPanelBackground;
position: relative; position: relative;
border: 1px solid @grayDark; border: @grafanaPanelBorder;
&:hover { &:hover {
.panel-actions { .panel-actions {
display: block; display: block;
......
src/css/less/sidemenu.less
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
.sidemenu { .sidemenu {
font-size: 16px; font-size: 16px;
font-weight: @baseFontWeight;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -46,10 +47,20 @@ ...@@ -46,10 +47,20 @@
margin-bottom: 9px; margin-bottom: 9px;
} }
.fa-caret-down {
position: relative;
top: 2px;
font-size: 90%;
}
&.sidemenu-small { &.sidemenu-small {
font-size: 14px; font-size: 14px;
.icon-circle { .icon-circle {
border-radius: 50%;
background: @iconContainerBackground;
box-shadow: @iconContainerShadow;
border: @iconContainerBorder;
width: 28px; width: 28px;
height: 28px; height: 28px;
i { i {
...@@ -60,7 +71,7 @@ ...@@ -60,7 +71,7 @@
} }
.sidemenu-item { .sidemenu-item {
color: @textColor; // color: @textColor;
line-height: 28px; line-height: 28px;
padding-left: 25px; padding-left: 25px;
} }
...@@ -68,25 +79,23 @@ ...@@ -68,25 +79,23 @@
} }
.sidemenu-user { .sidemenu-item-text {
.sidemenu-item-text { width: 110px;
width: 110px; display: inline-block;
display: inline-block; vertical-align: middle;
vertical-align: middle; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; }
white-space: nowrap;
}
}
.sidemenu-top-btn { .sidemenu-top-btn {
display: block; display: block;
padding: 8px 0 4px 22px; padding: 8px 0 4px 22px;
background-color: @navbarBackground; background-color: @navbarBackground;
border-right: 3px solid black; border-right: 3px solid @bodyBackground;
img { img {
border-radius: 50%; border-radius: 50%;
background: black; background: @iconContainerBackground;
border: 1px solid @bodyBackground;
width: 30px; width: 30px;
padding: 4px; padding: 4px;
} }
...@@ -94,38 +103,35 @@ ...@@ -94,38 +103,35 @@
padding-right: 5px; padding-right: 5px;
padding-top: 5px; padding-top: 5px;
font-size: 170%; font-size: 170%;
color: @gray; color: @linkColor;
} }
} }
.icon-circle { .icon-circle {
border-radius: 50%;
background: #000;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
width: 40px; width: 40px;
height: 40px; height: 40px;
display: inline-block; display: inline-block;
i { i {
color: @textColor; color: @linkColor;
opacity: .7; opacity: .7;
position: relative; position: relative;
left: 7px; left: 7px;
top: 2px; top: 3px;
font-size: 125%; font-size: 150%;
} }
} }
.sidemenu-icon {
}
.sidemenu-item { .sidemenu-item {
color: #f80; color: @linkColor;
line-height: 40px; line-height: 40px;
padding: 0px 10px 0px 20px; padding: 0px 10px 0px 20px;
display: block; display: block;
white-space: nowrap;
.sidemenu-item-text { .sidemenu-item-text {
padding-left: 15px; padding-left: 11px;
transition: color 100ms ease-out;
&.no-icon { &.no-icon {
padding-left: 59px; padding-left: 59px;
} }
......
src/css/less/tables_lists.less
...@@ -23,11 +23,6 @@ ...@@ -23,11 +23,6 @@
width: 100%; width: 100%;
} }
} }
strong {
font-weight: normal;
color: @white;
}
} }
.max-width { .max-width {
......
src/css/less/variables.dark.less
...@@ -27,7 +27,9 @@ ...@@ -27,7 +27,9 @@
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
@grafanaPanelBackground: @grayDarker; @grafanaPanelBackground: @grayDarker;
@grafanaPanelBorder: solid 1px @grayDark;
@grafanaTriggerBorder: solid 1px #555;
// Graphite Target Editor // Graphite Target Editor
@grafanaTargetBorder: @black; @grafanaTargetBorder: @black;
...@@ -59,6 +61,7 @@ ...@@ -59,6 +61,7 @@
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
...@@ -128,6 +131,11 @@ ...@@ -128,6 +131,11 @@
@btnInverseBackground: @grayDark; @btnInverseBackground: @grayDark;
@btnInverseBackgroundHighlight: lighten(@grayDark, 5%); @btnInverseBackgroundHighlight: lighten(@grayDark, 5%);
@iconContainerBackground: @black;
@iconContainerBackgroundHighlight: lighten(@black, 5%);
@iconContainerBorder: 1px solid transparent;
@iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
// Forms // Forms
// ------------------------- // -------------------------
...@@ -202,10 +210,10 @@ ...@@ -202,10 +210,10 @@
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 50px; @navbarHeight: 52px;
@navbarBackgroundHighlight: @grayDarker; @navbarBackgroundHighlight: @grayDarker;
@navbarBackground: @grayDarker; @navbarBackground: @grayDarker;
@navbarBorder: darken(@navbarBackground, 20%); @navbarBorder: none;
@navbarText: @grayLight; @navbarText: @grayLight;
@navbarLinkColor: @grayLight; @navbarLinkColor: @grayLight;
......
src/css/less/variables.light.less
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
// Accent colors // Accent colors
// ------------------------- // -------------------------
@blue: #007FFF; @blueOrig: #007FFF;
@blue: #2AB2E4;
@blueDark: #75CAEB; @blueDark: #75CAEB;
@green: #28B62C; @green: #28B62C;
@red: #FF4136; @red: #FF4136;
...@@ -28,11 +29,13 @@ ...@@ -28,11 +29,13 @@
@orange: #FF7518; @orange: #FF7518;
@pink: #E671B8; @pink: #E671B8;
@purple: #9954BB; @purple: #9954BB;
@variable: #32D1DF; @variable: #2AB2E4;
// grafana Variables // grafana Variables
// ------------------------- // -------------------------
@grafanaPanelBackground: @white; @grafanaPanelBackground: @white;
@grafanaPanelBorder: solid 1px #ddd;
@grafanaTriggerBorder: solid 1px @grayLighter;
// Submenu // Submenu
@submenuBackground: rgb(218, 217, 217); @submenuBackground: rgb(218, 217, 217);
...@@ -42,11 +45,11 @@ ...@@ -42,11 +45,11 @@
@fullEditBorder: @grayLighter; @fullEditBorder: @grayLighter;
// Graphite Target Editor // Graphite Target Editor
@grafanaTargetBorder: @submenuBackground; @grafanaTargetBorder: #ddd;
@grafanaTargetBackground: @white; @grafanaTargetBackground: #efefef;
@grafanaTargetColor: @textColor; @grafanaTargetColor: @textColor;
@grafanaTargetColorHide: lighten(@textColor, 25%); @grafanaTargetColorHide: lighten(@textColor, 25%);
@grafanaTargetSegmentBorder: @submenuBackground; @grafanaTargetSegmentBorder: #ddd;
@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%);
@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%);
...@@ -54,14 +57,14 @@ ...@@ -54,14 +57,14 @@
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
@bodyBackground: #EAEAEA; @bodyBackground: #EAEAEA;
@textColor: #666; @textColor: @gray;
// Links // Links
// ------------------------- // -------------------------
@linkColor: darken(@textColor, 20%); @linkColor: @gray;
@linkColorDisabled: lighten(@linkColor,30%); @linkColorDisabled: lighten(@linkColor,30%);
@linkColorHover: @blue; @linkColorHover: @grayDarker;
// Typography // Typography
...@@ -71,6 +74,7 @@ ...@@ -71,6 +74,7 @@
@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace;
@baseFontSize: 14px; @baseFontSize: 14px;
@baseFontWeight: 400;
@baseFontFamily: @sansFontFamily; @baseFontFamily: @sansFontFamily;
@baseLineHeight: 20px; @baseLineHeight: 20px;
@altFontFamily: @serifFontFamily; @altFontFamily: @serifFontFamily;
...@@ -97,13 +101,13 @@ ...@@ -97,13 +101,13 @@
@borderRadiusSmall: 2px; @borderRadiusSmall: 2px;
// Lists // Lists
@grafanaListBackground: transparent; @grafanaListBackground: darken(@grayLighter,5%);
@grafanaListAccent: @grayLighter; @grafanaListAccent: darken(@grayLighter,8%);
@grafanaListBorderTop: #eee; @grafanaListBorderTop: #eee;
@grafanaListBorderBottom: #efefef; @grafanaListBorderBottom: #eee;
@grafanaListHighlight: @blue; @grafanaListHighlight: darken(@grayLighter,10%);
@grafanaListHighlightContrast: #ddd; @grafanaListHighlightContrast: #ddd;
@grafanaListMainLinkColor: @textColor; @grafanaListMainLinkColor: @textColor;
// Tables // Tables
...@@ -139,8 +143,13 @@ ...@@ -139,8 +143,13 @@
@btnDangerBackground: lighten(@red, 5%); @btnDangerBackground: lighten(@red, 5%);
@btnDangerBackgroundHighlight: darken(@red, 5%); @btnDangerBackgroundHighlight: darken(@red, 5%);
@btnInverseBackground: lighten(@black, 5%); @btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: darken(@black, 5%); @btnInverseBackgroundHighlight: darken(@gray, 10%);
@iconContainerBackground: @white;
@iconContainerBackgroundHighlight: lighten(@white, 5%);
@iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
@iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
// Forms // Forms
...@@ -216,14 +225,14 @@ ...@@ -216,14 +225,14 @@
@navbarCollapseWidth: 979px; @navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 50px; @navbarHeight: 52px;
@navbarBackgroundHighlight: #f8f8f8; @navbarBackgroundHighlight: #f8f8f8;
@navbarBackground: #f8f8f8; @navbarBackground: #f8f8f8;
@navbarBorder: darken(@navbarBackground, 6.5%); @navbarBorder: none;
@navbarText: #666; @navbarText: #666;
@navbarLinkColor: #666; @navbarLinkColor: #666;
@navbarLinkColorHover: @blue; @navbarLinkColorHover: #333;
@navbarLinkColorActive: #555; @navbarLinkColorActive: #555;
@navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%);
...@@ -286,7 +295,7 @@ ...@@ -286,7 +295,7 @@
// Tooltips and popovers // Tooltips and popovers
// ------------------------- // -------------------------
@tooltipColor: #fff; @tooltipColor: #fff;
@tooltipBackground: #000; @tooltipBackground: #333;
@tooltipArrowWidth: 5px; @tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground; @tooltipArrowColor: @tooltipBackground;
@tooltipLinkColor: darken(@white,11%); @tooltipLinkColor: darken(@white,11%);
......
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