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

src/app/features/profile/partials/profile.html

@@ -52,7 +52,7 @@
 							UI Theme
 						</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>
 					</ul>
 					<div class="clearfix"></div>

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();

src/app/partials/sidemenu.html

@@ -38,10 +38,7 @@
 		<li class="dropdown">
 			<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="sidemenu-item-text">
-					{{contextSrv.user.orgName}}
-					<i class="fa fa-caret-down small"></i>
-				</span>
+				<span class="sidemenu-item-text">{{contextSrv.user.orgName}}</span><i class="fa fa-caret-down small"></i>
 	   	</a>
 			<ul class="dropdown-menu" role="menu" style="left: 65px">
 				<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%); }
 	.nav > .active > a:hover,
 	.nav > .active > a:focus {
 		.box-shadow(none);
+    border-bottom: 1px solid @blue;
 		background-color: @navbarLinkBackgroundHover;
 	}
 
@@ -317,6 +318,9 @@ div.subnav {
 	}
 }
 
+.btn-inverse {
+}
+
 .btn-large {
 	padding: 22px 30px;
 }

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;
@@ -75,7 +76,7 @@
     &:hover {
       background: @grafanaTargetFuncHightlight;
       .fa {
-        color: @linkColorHover
+        color: @linkColor;
       }
     }
   }

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;

src/css/less/sidemenu.less

@@ -38,6 +38,7 @@
 
 .sidemenu {
   font-size: 16px;
+  font-weight: @baseFontWeight;
   list-style: none;
   margin: 0;
   padding: 0;
@@ -46,10 +47,20 @@
     margin-bottom: 9px;
   }
 
+  .fa-caret-down {
+    position: relative;
+    top: 2px;
+    font-size: 90%;
+  }
+
   &.sidemenu-small {
     font-size: 14px;
 
     .icon-circle {
+      border-radius: 50%;
+      background: @iconContainerBackground;
+      box-shadow: @iconContainerShadow;
+      border: @iconContainerBorder;
       width: 28px;
       height: 28px;
       i {
@@ -60,7 +71,7 @@
     }
 
     .sidemenu-item {
-      color: @textColor;
+      // color: @textColor;
       line-height: 28px;
       padding-left: 25px;
     }
@@ -68,25 +79,23 @@
 }
 
 
-.sidemenu-user {
-  .sidemenu-item-text {
-    width: 110px;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  }
+.sidemenu-item-text {
+  width: 110px;
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .sidemenu-top-btn {
   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;
   }
@@ -94,38 +103,35 @@
     padding-right: 5px;
     padding-top: 5px;
     font-size: 170%;
-    color: @gray;
+    color: @linkColor;
   }
 }
 
 .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;
   i {
-    color: @textColor;
+    color: @linkColor;
     opacity: .7;
     position: relative;
     left: 7px;
-    top: 2px;
-    font-size: 125%;
+    top: 3px;
+    font-size: 150%;
   }
 }
 
-.sidemenu-icon {
-}
-
 .sidemenu-item {
-  color: #f80;
+  color: @linkColor;
   line-height: 40px;
-	padding: 0px 10px 0px 20px;
-	display: block;
+  padding: 0px 10px 0px 20px;
+  display: block;
+  white-space: nowrap;
 
   .sidemenu-item-text {
-    padding-left: 15px;
+    padding-left: 11px;
+    transition: color 100ms ease-out;
+
     &.no-icon {
       padding-left: 59px;
     }

src/css/less/tables_lists.less

@@ -23,11 +23,6 @@
       width: 100%;
     }
   }
-
-  strong {
-    font-weight: normal;
-    color: @white;
-  }
 }
 
 .max-width {

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;
@@ -59,6 +61,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
@@ -128,6 +131,11 @@
 @btnInverseBackground:              @grayDark;
 @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
 // -------------------------
@@ -202,10 +210,10 @@
 @navbarCollapseWidth:             979px;
 @navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;
 
-@navbarHeight:                    50px;
+@navbarHeight:                    52px;
 @navbarBackgroundHighlight:       @grayDarker;
 @navbarBackground:                @grayDarker;
-@navbarBorder:                    darken(@navbarBackground, 20%);
+@navbarBorder:                    none;
 
 @navbarText:                      @grayLight;
 @navbarLinkColor:                 @grayLight;

src/css/less/variables.light.less

@@ -20,7 +20,8 @@
 
 // Accent colors
 // -------------------------
-@blue:                  #007FFF;
+@blueOrig:              #007FFF;
+@blue:             	   	#2AB2E4;
 @blueDark:              #75CAEB;
 @green:                 #28B62C;
 @red:                   #FF4136;
@@ -28,11 +29,13 @@
 @orange:                #FF7518;
 @pink:                  #E671B8;
 @purple:                #9954BB;
-@variable:              #32D1DF;
+@variable:              #2AB2E4;
 
 // grafana Variables
 // -------------------------
-@grafanaPanelBackground: @white;
+@grafanaPanelBackground: 	@white;
+@grafanaPanelBorder: 		  solid 1px #ddd;
+@grafanaTriggerBorder:		solid 1px @grayLighter;
 
 // Submenu
 @submenuBackground:     rgb(218, 217, 217);
@@ -42,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%);
@@ -54,14 +57,14 @@
 // Scaffolding
 // -------------------------
 @bodyBackground:        #EAEAEA;
-@textColor:             #666;
+@textColor:             @gray;
 
 
 // Links
 // -------------------------
-@linkColor:             darken(@textColor, 20%);
+@linkColor:             @gray;
 @linkColorDisabled:     lighten(@linkColor,30%);
-@linkColorHover:        @blue;
+@linkColorHover:        @grayDarker;
 
 
 // Typography
@@ -71,6 +74,7 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
+@baseFontWeight:		400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
@@ -97,13 +101,13 @@
 @borderRadiusSmall:     2px;
 
 // Lists
-@grafanaListBackground:  transparent;
-@grafanaListAccent:         @grayLighter;
-@grafanaListBorderTop:      #eee;
-@grafanaListBorderBottom:   #efefef;
-@grafanaListHighlight:      @blue;
+@grafanaListBackground:  	     darken(@grayLighter,5%);
+@grafanaListAccent:            darken(@grayLighter,8%);
+@grafanaListBorderTop:         #eee;
+@grafanaListBorderBottom:      #eee;
+@grafanaListHighlight:         darken(@grayLighter,10%);
 @grafanaListHighlightContrast: #ddd;
-@grafanaListMainLinkColor: @textColor;
+@grafanaListMainLinkColor:     @textColor;
 
 
 // Tables
@@ -139,8 +143,13 @@
 @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%);
+@iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
+@iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
 
 
 // Forms
@@ -216,14 +225,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 +295,7 @@
 // Tooltips and popovers
 // -------------------------
 @tooltipColor:            #fff;
-@tooltipBackground:       #000;
+@tooltipBackground:       #333;
 @tooltipArrowWidth:       5px;
 @tooltipArrowColor:       @tooltipBackground;
 @tooltipLinkColor:        darken(@white,11%);