mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'css-tweaks' into develop, #1465
This commit is contained in:
commit
a3fe1efa2b
@ -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>
|
||||
|
@ -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();
|
||||
|
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -13,7 +13,7 @@
|
||||
.panel-container {
|
||||
background: @grafanaPanelBackground;
|
||||
position: relative;
|
||||
border: 1px solid @grayDark;
|
||||
border: @grafanaPanelBorder;
|
||||
&:hover {
|
||||
.panel-actions {
|
||||
display: block;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -23,11 +23,6 @@
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: normal;
|
||||
color: @white;
|
||||
}
|
||||
}
|
||||
|
||||
.max-width {
|
||||
|
@ -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;
|
||||
|
@ -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%);
|
||||
|
Loading…
Reference in New Issue
Block a user