From 708ddf5387c71367811db5b0703fd0a93afc50aa Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 26 Feb 2015 12:37:35 -0500 Subject: [PATCH 1/4] CSS tweaks to link styles for sidebar, nav bar, search pane. Also the nav bar height seemed off from the sidebar, so made that consistent. Variables were created when colors were hard-coded for both dark and light. This meant that both variables.light.less and variables.dark.less were updated. --- src/css/less/navbar.less | 7 ++++--- src/css/less/panel.less | 2 +- src/css/less/sidemenu.less | 25 ++++++++++++++----------- src/css/less/variables.dark.less | 13 ++++++++++--- src/css/less/variables.light.less | 28 ++++++++++++++++++---------- 5 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less index 0eb59d2391f..604f7d8c225 100644 --- a/src/css/less/navbar.less +++ b/src/css/less/navbar.less @@ -3,7 +3,7 @@ } .navbar .nav>li>a { - padding: 17px 15px 11px; + padding: 17px 15px 13px; .fa { font-size: 115%; } } @@ -20,8 +20,9 @@ } .top-nav-menu-btn { + border: 1px solid @bodyBackground; border-radius: 50%; - background: black; + background: @iconContainerBackground; display: block; position: relative; float: left; @@ -64,7 +65,7 @@ font-size: 1.4em; font-weight: bold; color: #a2a2a2; - border: 1px solid #555; + border: @grafanaTriggerBorder; a { display: inline-block; background: @grafanaTargetFuncBackground; diff --git a/src/css/less/panel.less b/src/css/less/panel.less index e0b01ed43dc..e8c683ab371 100644 --- a/src/css/less/panel.less +++ b/src/css/less/panel.less @@ -13,7 +13,7 @@ .panel-container { background: @grafanaPanelBackground; position: relative; - border: 1px solid @grayDark; + border: @grafanaPanelBorder; &:hover { .panel-actions { display: block; diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less index 7e0c9ab7d1d..c26997efb1f 100644 --- a/src/css/less/sidemenu.less +++ b/src/css/less/sidemenu.less @@ -50,6 +50,10 @@ font-size: 14px; .icon-circle { + border-radius: 50%; + background: @iconContainerBackground; + box-shadow: @iconContainerShadow; + border: @iconContainerBorder; width: 28px; height: 28px; i { @@ -60,7 +64,7 @@ } .sidemenu-item { - color: @textColor; + // color: @textColor; line-height: 28px; } } @@ -88,10 +92,11 @@ display: block; padding: 8px 0 4px 22px; background-color: @navbarBackground; - border-right: 3px solid black; + border-right: 3px solid @bodyBackground; img { border-radius: 50%; - background: black; + background: @iconContainerBackground; + border: 1px solid @bodyBackground; width: 30px; padding: 4px; } @@ -99,14 +104,11 @@ padding-right: 5px; padding-top: 5px; font-size: 170%; - color: @gray; + color: @textColor; } } .icon-circle { - border-radius: 50%; - background: #000; - box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05); width: 40px; height: 40px; display: inline-block; @@ -115,8 +117,8 @@ opacity: .7; position: relative; left: 7px; - top: 2px; - font-size: 125%; + top: 3px; + font-size: 150%; } } @@ -124,17 +126,18 @@ } .sidemenu-item { - color: #f80; + color: @grayLight; line-height: 40px; padding: 0px 10px 0px 20px; display: block; .sidemenu-item-text { padding-left: 15px; + transition: color 100ms ease-out; + &.no-icon { padding-left: 59px; } } } - diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 65adf89729a..729020bd2d7 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -27,7 +27,9 @@ // grafana Variables // ------------------------- -@grafanaPanelBackground: @grayDarker; +@grafanaPanelBackground: @grayDarker; +@grafanaPanelBorder: solid 1px @grayDark; +@grafanaTriggerBorder: solid 1px #555; // Graphite Target Editor @grafanaTargetBorder: @black; @@ -128,6 +130,11 @@ @btnInverseBackground: @grayDark; @btnInverseBackgroundHighlight: lighten(@grayDark, 5%); +@iconContainerBackground: @black; +@iconContainerBackgroundHighlight: lighten(@black, 5%); +@iconContainerBorder: 0 0 14px 2px rgba(255,255,255, 0.05); +@iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); + // Forms // ------------------------- @@ -202,10 +209,10 @@ @navbarCollapseWidth: 979px; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; -@navbarHeight: 50px; +@navbarHeight: 52px; @navbarBackgroundHighlight: @grayDarker; @navbarBackground: @grayDarker; -@navbarBorder: darken(@navbarBackground, 20%); +@navbarBorder: none; @navbarText: @grayLight; @navbarLinkColor: @grayLight; diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index a745fafd978..4b862300fda 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -32,7 +32,9 @@ // grafana Variables // ------------------------- -@grafanaPanelBackground: @white; +@grafanaPanelBackground: @white; +@grafanaPanelBorder: solid 1px @grayLight; +@grafanaTriggerBorder: solid 1px @grayLight; // Submenu @submenuBackground: rgb(218, 217, 217); @@ -61,7 +63,7 @@ // ------------------------- @linkColor: darken(@textColor, 20%); @linkColorDisabled: lighten(@linkColor,30%); -@linkColorHover: @blue; +@linkColorHover: @gray; // Typography @@ -97,11 +99,11 @@ @borderRadiusSmall: 2px; // Lists -@grafanaListBackground: transparent; +@grafanaListBackground: lighten(@grayLight,35%); @grafanaListAccent: @grayLighter; @grafanaListBorderTop: #eee; @grafanaListBorderBottom: #efefef; -@grafanaListHighlight: @blue; +@grafanaListHighlight: lighten(@grayLight,20%); @grafanaListHighlightContrast: #ddd; @grafanaListMainLinkColor: @textColor; @@ -142,6 +144,12 @@ @btnInverseBackground: lighten(@black, 5%); @btnInverseBackgroundHighlight: darken(@black, 5%); +@iconContainerBackground: @white; +@iconContainerBackgroundHighlight: lighten(@white, 5%); +@iconContainerBorder: solid 1px rgba(0,0,0, 0.05); +@iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); + + // Forms // ------------------------- @@ -164,8 +172,8 @@ @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; -@dropdownLinkBackgroundActive: @blue; -@dropdownLinkBackgroundHover: @blue; +@dropdownLinkBackgroundActive: lighten(@grayLight,20%); +@dropdownLinkBackgroundHover: lighten(@grayLight,20%); @@ -216,14 +224,14 @@ @navbarCollapseWidth: 979px; @navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; -@navbarHeight: 50px; +@navbarHeight: 52px; @navbarBackgroundHighlight: #f8f8f8; @navbarBackground: #f8f8f8; -@navbarBorder: darken(@navbarBackground, 6.5%); +@navbarBorder: none; @navbarText: #666; @navbarLinkColor: #666; -@navbarLinkColorHover: @blue; +@navbarLinkColorHover: #333; @navbarLinkColorActive: #555; @navbarLinkBackgroundHover: transparent; @navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); @@ -286,7 +294,7 @@ // Tooltips and popovers // ------------------------- @tooltipColor: #fff; -@tooltipBackground: #000; +@tooltipBackground: #333; @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; @tooltipLinkColor: darken(@white,11%); From 4e607876eaf9b5bbb6027f10292492c118c97427 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 26 Feb 2015 15:22:15 -0500 Subject: [PATCH 2/4] further cleanup of styles to make sidebar more readable for light theme. This tweaked link colors, dropdown colors and table tweaks for things like Add API to make them feel a little more organized through shades of gray. --- src/css/less/navbar.less | 2 +- src/css/less/sidemenu.less | 7 ++++--- src/css/less/variables.dark.less | 1 + src/css/less/variables.light.less | 32 ++++++++++++++++--------------- 4 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/css/less/navbar.less b/src/css/less/navbar.less index 604f7d8c225..f69b7b91e5a 100644 --- a/src/css/less/navbar.less +++ b/src/css/less/navbar.less @@ -76,7 +76,7 @@ &:hover { background: @grafanaTargetFuncHightlight; .fa { - color: @linkColorHover + color: @linkColorHover; } } } diff --git a/src/css/less/sidemenu.less b/src/css/less/sidemenu.less index c26997efb1f..e7fc5b9f431 100644 --- a/src/css/less/sidemenu.less +++ b/src/css/less/sidemenu.less @@ -38,6 +38,7 @@ .sidemenu { font-size: 16px; + font-weight: @baseFontWeight; list-style: none; margin: 0; padding: 0; @@ -104,7 +105,7 @@ padding-right: 5px; padding-top: 5px; font-size: 170%; - color: @textColor; + color: @linkColor; } } @@ -113,7 +114,7 @@ height: 40px; display: inline-block; i { - color: @textColor; + color: @linkColor; opacity: .7; position: relative; left: 7px; @@ -126,7 +127,7 @@ } .sidemenu-item { - color: @grayLight; + color: @linkColor; line-height: 40px; padding: 0px 10px 0px 20px; display: block; diff --git a/src/css/less/variables.dark.less b/src/css/less/variables.dark.less index 729020bd2d7..3114bedfb3a 100644 --- a/src/css/less/variables.dark.less +++ b/src/css/less/variables.dark.less @@ -61,6 +61,7 @@ @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 14px; +@baseFontWeight: 400; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 4b862300fda..077eecc9d17 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -20,7 +20,8 @@ // Accent colors // ------------------------- -@blue: #007FFF; +@blueOrig: #007FFF; +@blue: #2AB2E4; @blueDark: #75CAEB; @green: #28B62C; @red: #FF4136; @@ -44,11 +45,11 @@ @fullEditBorder: @grayLighter; // Graphite Target Editor -@grafanaTargetBorder: @submenuBackground; -@grafanaTargetBackground: @white; +@grafanaTargetBorder: #ddd; +@grafanaTargetBackground: #efefef; @grafanaTargetColor: @textColor; @grafanaTargetColorHide: lighten(@textColor, 25%); -@grafanaTargetSegmentBorder: @submenuBackground; +@grafanaTargetSegmentBorder: #ddd; @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); @@ -56,14 +57,14 @@ // Scaffolding // ------------------------- @bodyBackground: #EAEAEA; -@textColor: #666; +@textColor: @gray; // Links // ------------------------- -@linkColor: darken(@textColor, 20%); +@linkColor: @gray; @linkColorDisabled: lighten(@linkColor,30%); -@linkColorHover: @gray; +@linkColorHover: @grayDarker; // Typography @@ -73,6 +74,7 @@ @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 14px; +@baseFontWeight: 400; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @@ -99,13 +101,13 @@ @borderRadiusSmall: 2px; // Lists -@grafanaListBackground: lighten(@grayLight,35%); -@grafanaListAccent: @grayLighter; -@grafanaListBorderTop: #eee; -@grafanaListBorderBottom: #efefef; -@grafanaListHighlight: lighten(@grayLight,20%); +@grafanaListBackground: lighten(@grayLight,20%); +@grafanaListAccent: lighten(@grayLight,10%); +@grafanaListBorderTop: #eee; +@grafanaListBorderBottom: #eee; +@grafanaListHighlight: lighten(@grayLight,10%); @grafanaListHighlightContrast: #ddd; -@grafanaListMainLinkColor: @textColor; +@grafanaListMainLinkColor: @textColor; // Tables @@ -172,8 +174,8 @@ @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; -@dropdownLinkBackgroundActive: lighten(@grayLight,20%); -@dropdownLinkBackgroundHover: lighten(@grayLight,20%); +@dropdownLinkBackgroundActive: @blue; +@dropdownLinkBackgroundHover: @blue; From 5c39a3d004354d6f43a9ab78dc7f983526173807 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 26 Feb 2015 17:57:32 -0500 Subject: [PATCH 3/4] Reversed button cleanup for light theme --- src/css/less/bootswatch.light.less | 3 +++ src/css/less/variables.light.less | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/css/less/bootswatch.light.less b/src/css/less/bootswatch.light.less index 2e59e80769d..9d9b075113e 100644 --- a/src/css/less/bootswatch.light.less +++ b/src/css/less/bootswatch.light.less @@ -317,6 +317,9 @@ div.subnav { } } +.btn-inverse { +} + .btn-large { padding: 22px 30px; } diff --git a/src/css/less/variables.light.less b/src/css/less/variables.light.less index 077eecc9d17..6a8ba33b24e 100644 --- a/src/css/less/variables.light.less +++ b/src/css/less/variables.light.less @@ -29,7 +29,7 @@ @orange: #FF7518; @pink: #E671B8; @purple: #9954BB; -@variable: #32D1DF; +@variable: #2AB2E4; // grafana Variables // ------------------------- @@ -143,8 +143,8 @@ @btnDangerBackground: lighten(@red, 5%); @btnDangerBackgroundHighlight: darken(@red, 5%); -@btnInverseBackground: lighten(@black, 5%); -@btnInverseBackgroundHighlight: darken(@black, 5%); +@btnInverseBackground: @gray; +@btnInverseBackgroundHighlight: darken(@gray, 10%); @iconContainerBackground: @white; @iconContainerBackgroundHighlight: lighten(@white, 5%); From e84d0dd6b34270587ad8b8dc8ffabd91917e02b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 28 Feb 2015 16:41:02 +0100 Subject: [PATCH 4/4] Light theme tweaks after merge with bulletfactorys light theme fixes --- .../features/profile/partials/profile.html | 2 +- src/app/features/profile/profileCtrl.js | 11 +++++-- src/app/partials/sidemenu.html | 5 +-- src/css/less/bootswatch.light.less | 1 + src/css/less/navbar.less | 2 +- src/css/less/sidemenu.less | 33 ++++++++++--------- src/css/less/tables_lists.less | 5 --- src/css/less/variables.dark.less | 6 ++-- src/css/less/variables.light.less | 19 +++++------ 9 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/app/features/profile/partials/profile.html b/src/app/features/profile/partials/profile.html index 0330ee2fb17..d8758ae9c09 100644 --- a/src/app/features/profile/partials/profile.html +++ b/src/app/features/profile/partials/profile.html @@ -52,7 +52,7 @@ UI Theme
  • - +
    • diff --git a/src/app/features/profile/profileCtrl.js b/src/app/features/profile/profileCtrl.js index 820866da6be..fd7af74834d 100644 --- a/src/app/features/profile/profileCtrl.js +++ b/src/app/features/profile/profileCtrl.js @@ -7,7 +7,7 @@ function (angular, config) { var module = angular.module('grafana.controllers'); - module.controller('ProfileCtrl', function($scope, backendSrv) { + module.controller('ProfileCtrl', function($scope, backendSrv, contextSrv, $location) { $scope.init = function() { $scope.getUser(); @@ -18,6 +18,7 @@ function (angular, config) { backendSrv.get('/api/user').then(function(user) { $scope.user = user; $scope.user.theme = user.theme || 'dark'; + $scope.old_theme = $scope.user.theme; }); }; @@ -35,7 +36,13 @@ function (angular, config) { $scope.update = function() { 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(); diff --git a/src/app/partials/sidemenu.html b/src/app/partials/sidemenu.html index 782ef427f07..5ecd29f7738 100644 --- a/src/app/partials/sidemenu.html +++ b/src/app/partials/sidemenu.html @@ -38,10 +38,7 @@
  • - - {{contextSrv.user.orgName}} - - + {{contextSrv.user.orgName}}