Add theme size options
Change-Id: I30afc1473bf0f4ab1065816f00f1d73afa9cfbf9
This commit is contained in:
Vincent Fournier
parent
54d63de7a0
commit
0931458d80
@ -70,7 +70,15 @@
|
||||
border-width:0;
|
||||
display:block;
|
||||
padding:$_space_narrow 0 0;
|
||||
vertical-align:top;
|
||||
.size-scheme--small & {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include medium-and-up-screen {
|
||||
border-width:0 0 1px;
|
||||
@ -240,14 +248,26 @@
|
||||
top:0;
|
||||
font-family:"adagios-fontawesome";
|
||||
left:0;
|
||||
position:absolute;
|
||||
position:relative;
|
||||
z-index:988888;
|
||||
.size-scheme--small & {
|
||||
line-height: 30px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
line-height: 35px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.state--error & {
|
||||
@extend .ico-error;
|
||||
padding-left:(16 + $_space_narrow);
|
||||
padding-left:(-10 + $_space_narrow);
|
||||
|
||||
&:before {
|
||||
color:$_color_error;
|
||||
@ -257,7 +277,7 @@
|
||||
|
||||
.state--warning & {
|
||||
@extend .ico-warning;
|
||||
padding-left:(16 + $_space_narrow);
|
||||
padding-left:(-10 + $_space_narrow);
|
||||
|
||||
&:before {
|
||||
color:$_color_warning;
|
||||
@ -267,7 +287,7 @@
|
||||
|
||||
.state--ok & {
|
||||
@extend .ico-ok;
|
||||
padding-left:(18 + $_space_narrow);
|
||||
padding-left:(-10 + $_space_narrow);
|
||||
|
||||
&:before {
|
||||
color:$_color_ok;
|
||||
@ -303,6 +323,16 @@ time.data-table__data {
|
||||
|
||||
.data-table__host {
|
||||
width:auto;
|
||||
.size-scheme--small & {
|
||||
line-height: 30px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
line-height: 35px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
@include medium-and-up-screen {
|
||||
width:percentage(368 / 1200);
|
||||
@ -312,6 +342,16 @@ time.data-table__data {
|
||||
.data-table__service {
|
||||
width:auto;
|
||||
|
||||
.size-scheme--small & {
|
||||
line-height: 16px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
line-height: 20px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@include medium-and-up-screen {
|
||||
width:percentage(500 / 1200);
|
||||
}
|
||||
|
||||
@ -43,7 +43,16 @@
|
||||
border-style:solid;
|
||||
border-width:0 0 0 1px;
|
||||
display:table-cell;
|
||||
padding:$_space_narrow;
|
||||
|
||||
.size-scheme--small & {
|
||||
padding:$_space_narrow - 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding:$_space_narrow + 5px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding:$_space_narrow + 15px;
|
||||
}
|
||||
|
||||
&:first-child {border-left:0;}
|
||||
|
||||
|
||||
@ -64,9 +64,7 @@ md-checkbox.md-checked .md-icon:after {
|
||||
|
||||
// host/service status page
|
||||
|
||||
.data-table thead th:first-child + th {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
.subcomponent__live {
|
||||
|
||||
@ -78,15 +76,39 @@ md-checkbox.md-checked .md-icon:after {
|
||||
background-color:$_color_light_beta;
|
||||
}
|
||||
|
||||
padding: 0px 15px;
|
||||
float: left;
|
||||
margin: 20px;
|
||||
|
||||
.size-scheme--small & {
|
||||
padding: 0px 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding: 0px 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: 0px 15px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.subcomponent__live .data-table thead th:first-child {
|
||||
border-width: 0 0 0 0px;
|
||||
}
|
||||
|
||||
.subcomponent__live .data-table tbody td {
|
||||
.size-scheme--small & {
|
||||
line-height: 30px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
line-height: 35px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.subcomponent__live table {
|
||||
.color-scheme--dark & {
|
||||
background-color:$_color_dark_gamma;
|
||||
@ -95,10 +117,21 @@ md-checkbox.md-checked .md-icon:after {
|
||||
.color-scheme--light & {
|
||||
background-color:$_color_light_gamma;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.subcomponent__live h2 {
|
||||
margin: 15px 0px 20px 0px;
|
||||
|
||||
.size-scheme--small & {
|
||||
margin: 5px 0px 10px 0px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin: 10px 0px 15px 0px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin: 15px 0px 20px 0px;
|
||||
}
|
||||
|
||||
|
||||
.color-scheme--dark & {
|
||||
color:$_color_omega;
|
||||
}
|
||||
@ -150,7 +183,15 @@ md-checkbox.md-checked .md-icon:after {
|
||||
.color-scheme--light & {
|
||||
color:$_color_alpha;
|
||||
}
|
||||
|
||||
.size-scheme--small & {
|
||||
margin: 0px 0px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.subcomponent__title h1 span {
|
||||
@ -170,7 +211,15 @@ md-checkbox.md-checked .md-icon:after {
|
||||
}
|
||||
|
||||
.subcomponent__small {
|
||||
min-height: 190px;
|
||||
.size-scheme--small & {
|
||||
min-height: 130px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
min-height: 150px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
min-height: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -183,6 +232,15 @@ md-checkbox.md-checked .md-icon:after {
|
||||
.subcomponent__live .state--ok .data-table__data:before {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
.size-scheme--small & {
|
||||
height: 22px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
height: 22px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
bansho-host-services-list .subcomponent__live {
|
||||
@ -197,6 +255,19 @@ just-gage tspan {
|
||||
font: 500 1em "Roboto", sans-serif !important;
|
||||
}
|
||||
|
||||
just-gage div {
|
||||
.size-scheme--small & {
|
||||
height: 100px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
height: 125px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Notifications
|
||||
|
||||
@ -306,11 +377,10 @@ bansho-table-actionbar menu {
|
||||
z-index: 988889;
|
||||
}
|
||||
|
||||
input#filter__search {
|
||||
.filters__item input#filter__search {
|
||||
border: none;
|
||||
width: 100%;
|
||||
padding: 0.8em;
|
||||
margin: 10px 0px 0px 15px;
|
||||
padding-left: 0.8em;
|
||||
outline: 0;
|
||||
.color-scheme--dark & {
|
||||
background-color:$_color_dark_gamma;
|
||||
@ -340,3 +410,121 @@ thead.moving-thead {
|
||||
display: none;
|
||||
z-index: 988889;
|
||||
}
|
||||
|
||||
|
||||
// Theme size
|
||||
.data-table tbody td,
|
||||
.data-table tbody td:first-child + td,
|
||||
.data-table thead th:first-child + th {
|
||||
.size-scheme--small & {
|
||||
padding: 0px 5px 0px 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding: 5px 5px 5px 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table thead th {
|
||||
.size-scheme--small & {
|
||||
padding: 3px 5px 3px 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding: 5px 5px 5px 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table thead th:first-child,
|
||||
.data-table tbody td:first-child {
|
||||
.size-scheme--small & {
|
||||
padding: 0px 5px 0px 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding-left: 5px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.data-table md-checkbox {
|
||||
.size-scheme--small & {
|
||||
line-height: 0px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
line-height: 5px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters__button {
|
||||
.size-scheme--small & {
|
||||
min-height: 34px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
min-height: 45px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
min-height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters__item input#filter__search {
|
||||
.size-scheme--small & {
|
||||
min-height: 34px - 2px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
min-height: 45px - 2px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
min-height: 56px - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
bansho-actionbar-acknowledge button.filters__button,
|
||||
bansho-actionbar-recheck button.filters__button,
|
||||
bansho-actionbar-downtime button.filters__button {
|
||||
padding: 0px;
|
||||
.size-scheme--small & {
|
||||
min-width: 34px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
min-width: 45px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
min-width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.size-scheme--small & {
|
||||
padding: 5px 0 10px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding: 10px 0 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: 30px 0 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.main__content {
|
||||
.size-scheme--small & {
|
||||
padding: 5px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding: 10px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ angular.module('bansho.authentication', [])
|
||||
|
||||
.controller('LoginController', ['$scope', '$rootScope', '$location', 'authService', 'configManager', 'themeManager', function ($scope, $rootScope, $location, authService, configManager, themeManager) {
|
||||
themeManager.setTheme(themeManager.THEMES.DEFAULT);
|
||||
themeManager.setSize(themeManager.SIZES.DEFAULT, false);
|
||||
$rootScope.isAuthenticated = false;
|
||||
|
||||
var login = function (credentials) {
|
||||
@ -70,6 +71,7 @@ angular.module('bansho.authentication', [])
|
||||
|
||||
configManager.fetchLayoutConfig(configManager.getConfig().useStoredConfig).then(function () {
|
||||
themeManager.setTheme(configManager.getTheme());
|
||||
themeManager.setSize(configManager.getSize());
|
||||
$location.path('/view');
|
||||
|
||||
angular.forEach(onLogin, function (f) {
|
||||
|
||||
@ -11,7 +11,14 @@ angular.module('bansho.config', [])
|
||||
LIGHT: "light",
|
||||
DEFAULT: "dark"
|
||||
};
|
||||
var SIZES = {
|
||||
BIG: "big",
|
||||
NORMAL: "normal",
|
||||
SMALL: "small",
|
||||
DEFAULT: "normal"
|
||||
};
|
||||
this.THEMES = THEMES;
|
||||
this.SIZES = SIZES;
|
||||
|
||||
var setThemeClass = function (theme, saveConfig) {
|
||||
$rootScope.themeClass = 'color-scheme--' + theme;
|
||||
@ -22,6 +29,15 @@ angular.module('bansho.config', [])
|
||||
}
|
||||
};
|
||||
|
||||
var setThemeSize = function (size, saveConfig) {
|
||||
$rootScope.themeClassSize = 'size-scheme--' + size;
|
||||
$rootScope.themeSize = size;
|
||||
|
||||
if (saveConfig) {
|
||||
configManager.setSizeAndSave(size);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the application theme from configManager
|
||||
*
|
||||
@ -42,6 +58,17 @@ angular.module('bansho.config', [])
|
||||
setThemeClass(THEMES.DARK, true);
|
||||
}
|
||||
};
|
||||
|
||||
this.setSize = function (size, saveConfig) {
|
||||
if (saveConfig === undefined) {
|
||||
saveConfig = true;
|
||||
}
|
||||
if (size) {
|
||||
setThemeSize(size, saveConfig);
|
||||
} else {
|
||||
setThemeSize(SIZES.DEFAULT, saveConfig);
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.service('componentsConfig', ['$http', function($http) {
|
||||
@ -126,19 +153,33 @@ angular.module('bansho.config', [])
|
||||
saveLayoutConfig();
|
||||
};
|
||||
|
||||
this.setSizeAndSave = function (size) {
|
||||
layoutConfig.data.banshoConfig.size = size;
|
||||
saveLayoutConfig();
|
||||
};
|
||||
|
||||
this.setThemeAndSave = function (theme) {
|
||||
layoutConfig.data.banshoConfig.theme = theme;
|
||||
saveLayoutConfig();
|
||||
layoutConfig.data.banshoConfig.theme = theme;
|
||||
saveLayoutConfig();
|
||||
};
|
||||
|
||||
this.getSize = function () {
|
||||
var size;
|
||||
|
||||
if (layoutConfig.data) {
|
||||
size = layoutConfig.data.banshoConfig.size;
|
||||
}
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
this.getTheme = function () {
|
||||
var theme;
|
||||
|
||||
if (layoutConfig.data) {
|
||||
theme = layoutConfig.data.banshoConfig.theme;
|
||||
}
|
||||
|
||||
return theme;
|
||||
if (layoutConfig.data) {
|
||||
theme = layoutConfig.data.banshoConfig.theme;
|
||||
}
|
||||
return theme;
|
||||
};
|
||||
|
||||
var saveLayoutConfig = function () {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<div class="subcomponent__live subcomponent__title">
|
||||
<header class="main__content__header clearfix">
|
||||
<h2 class="main__content__title">
|
||||
<h1 class="main__content__title">
|
||||
{{param.host.host_host_name}}
|
||||
<span class="subtitle" ng-show="param.host.host_config_alias">(param.host.host_config_alias)</span>
|
||||
<span class="subtitle">{{param.host.host_address}}</span>
|
||||
</h2>
|
||||
</h1>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<table ng-controller="TacticalCurrentHealth"
|
||||
class="current-health"
|
||||
<table class="current-health"
|
||||
ng-if="hostsRatio != undefined && servicesRatio != undefined">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -10,10 +9,10 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="layout__half">
|
||||
<just-gage id="allservices" class="someClass" min=0 max=100 value=servicesRatio title="ALL SERVICES"></just-gage>
|
||||
<just-gage id="allhosts" min=0 max=100 value=hostsRatio title="ALL HOSTS"></just-gage>
|
||||
</td>
|
||||
<td class="layout__half">
|
||||
<just-gage id="allhosts" class="someClass" min=0 max=100 value=hostsRatio title="ALL HOSTS"></just-gage>
|
||||
<just-gage id="allservices" min=0 max=100 value=servicesRatio title="ALL SERVICES"></just-gage>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -3,13 +3,16 @@
|
||||
angular.module('bansho.tactical.current_health', ['bansho.surveil',
|
||||
'ngJustGage'])
|
||||
|
||||
.controller('TacticalCurrentHealth', ['$scope', function ($scope) {
|
||||
angular.noop();
|
||||
}])
|
||||
|
||||
.directive('banshoCurrentHealth', function () {
|
||||
.directive('banshoCurrentHealth', ['$compile', '$rootScope', function ($compile, $rootScope) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'components/directive/tactical/current_health/current_health.html'
|
||||
templateUrl: 'components/directive/tactical/current_health/current_health.html',
|
||||
link: function (scope, element) {
|
||||
$rootScope.$watch('themeClassSize', function( sizeclass) {
|
||||
scope.themeClassSize = sizeclass;
|
||||
$compile(element.contents())(scope);
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
});
|
||||
}]);
|
||||
|
||||
@ -73,9 +73,19 @@
|
||||
|
||||
.sidebar__item {
|
||||
border-top:1px solid;
|
||||
margin-bottom:$_space;
|
||||
position:relative;
|
||||
|
||||
.size-scheme--small & {
|
||||
margin-bottom:$_space - 20px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin-bottom:$_space - 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin-bottom:$_space;
|
||||
}
|
||||
|
||||
|
||||
.color-scheme--dark & {
|
||||
border-top-color:$_color_dark_gamma;
|
||||
}
|
||||
@ -91,7 +101,23 @@
|
||||
@extend %button-reset;
|
||||
@extend %typo-title;
|
||||
display:block;
|
||||
padding:$_space $_space_narrow 0 $_space;
|
||||
|
||||
.size-scheme--small & {
|
||||
padding-top:$_space - 20px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space - 22px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding-top:$_space - 15px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space - 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding:$_space $_space_narrow 0 $_space;
|
||||
}
|
||||
|
||||
text-align:left;
|
||||
width:100%;
|
||||
|
||||
@ -119,7 +145,25 @@
|
||||
display:inline-block;
|
||||
font-size:em(24, $_base_font_size);
|
||||
line-height:1;
|
||||
padding:$_space $_space_narrow 0;
|
||||
|
||||
.size-scheme--small & {
|
||||
padding-top:$_space - 20px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space_narrow;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding-top:$_space - 15px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space_narrow;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding:$_space $_space_narrow 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0 ;
|
||||
@ -154,7 +198,21 @@
|
||||
}
|
||||
|
||||
.sidebar__sublist {
|
||||
padding:0 $_space_narrow 0 $_space;
|
||||
padding-top:0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.size-scheme--small & {
|
||||
padding-right: $_space_narrow;
|
||||
padding-left: $_space - 15px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding-right: $_space_narrow;
|
||||
padding-left: $_space - 5px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding-right: $_space_narrow;
|
||||
padding-left: $_space;
|
||||
}
|
||||
|
||||
@include large-xlarge-screen {
|
||||
padding:0 $_space;
|
||||
@ -163,7 +221,16 @@
|
||||
|
||||
.sidebar__subitem {
|
||||
@extend %typo-menu;
|
||||
margin-top:$_space;
|
||||
|
||||
.size-scheme--small & {
|
||||
margin-top:$_space - 20px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin-top:$_space - 15px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin-top:$_space;
|
||||
}
|
||||
|
||||
.state--current {
|
||||
.color-scheme--dark & {
|
||||
|
||||
@ -13,11 +13,21 @@
|
||||
|
||||
.topbar__item {
|
||||
@extend %colorBorderThin;
|
||||
height:80px;
|
||||
border:0 solid;
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
|
||||
.size-scheme--small & {
|
||||
height: 50px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
height: 60px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
|
||||
.topbar__list--left & {
|
||||
border-right-width:1px;
|
||||
float:left;
|
||||
@ -54,16 +64,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topbar__panel__content {padding:$_space $_space_narrow 0;}
|
||||
.topbar__panel__content {
|
||||
.size-scheme--small & {
|
||||
padding-top: $_space - 20px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space_narrow;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
padding-top: $_space - 10px;
|
||||
padding-right: $_space_narrow;
|
||||
padding-bottom: 0;
|
||||
padding-left: $_space_narrow;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
padding: $_space $_space_narrow 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topbar__button {
|
||||
@extend %button-reset;
|
||||
@extend %colorBkgTopbarButton;
|
||||
@extend %colorLink;
|
||||
height:80px;
|
||||
.size-scheme--small & {
|
||||
width: 49px;
|
||||
height: 50px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
width: 59px;
|
||||
height: 60px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
width:79px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
position:relative;
|
||||
width:79px;
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
.color-scheme--dark & {
|
||||
@ -78,7 +115,15 @@
|
||||
|
||||
[class^="ico-"],
|
||||
[class*=" ico-"] {
|
||||
bottom:30px;
|
||||
.size-scheme--small & {
|
||||
bottom:15px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
bottom:20px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
bottom:30px;
|
||||
}
|
||||
display:block;
|
||||
font-size:em(20, $_base_font_size);
|
||||
height:1em;
|
||||
@ -171,7 +216,19 @@
|
||||
float:right;
|
||||
font-size:1.1em;
|
||||
height:16px;
|
||||
margin:32px $_space 0 0;
|
||||
|
||||
.size-scheme--small & {
|
||||
margin:16px $_space 0 0;
|
||||
bottom:15px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin:22px $_space 0 0;
|
||||
bottom:20px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin:32px $_space 0 0;
|
||||
}
|
||||
|
||||
vertical-align:baseline;
|
||||
.color-scheme--dark & {
|
||||
color:$_color_omega;
|
||||
@ -223,11 +280,89 @@
|
||||
.topbar__settings__subitem {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
outline:0;
|
||||
}
|
||||
|
||||
.topbar__settings__subitem {
|
||||
@extend %typo-menu;
|
||||
margin-bottom:$_space;
|
||||
.size-scheme--small & {
|
||||
margin-bottom:$_space - 20px;
|
||||
}
|
||||
.size-scheme--normal & {
|
||||
margin-bottom:$_space - 10px;
|
||||
}
|
||||
.size-scheme--big & {
|
||||
margin-bottom:$_space;
|
||||
}
|
||||
|
||||
|
||||
a {display:block;}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.topbar__settings__subitem div.set-size-small.active,
|
||||
.topbar__settings__subitem div.set-size-normal.active,
|
||||
.topbar__settings__subitem div.set-size-big.active {
|
||||
.color-scheme--light & {
|
||||
color:$_color_alpha;
|
||||
}
|
||||
.color-scheme--dark & {
|
||||
color:$_color_omega;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar__settings__subitem .set-size-small,
|
||||
.topbar__settings__subitem .set-size-normal,
|
||||
.topbar__settings__subitem .set-size-big
|
||||
{
|
||||
float: left;
|
||||
width: 30%;
|
||||
line-height: 1px;
|
||||
text-align: center;
|
||||
outline:0;
|
||||
|
||||
.color-scheme--light & {
|
||||
color:$_color_light_delta;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: color;
|
||||
&:hover {
|
||||
color:$_color_alpha;
|
||||
outline:0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-scheme--dark & {
|
||||
color:$_color_light_delta;
|
||||
transition-duration: 0.5s;
|
||||
transition-property: color;
|
||||
&:hover {
|
||||
color:$_color_omega;
|
||||
outline:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
.topbar__settings__subitem .set-size-clear{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.topbar__settings__subitem .set-size-small
|
||||
{
|
||||
font-size: em(15, $_base_font_size);
|
||||
line-height: 20px;
|
||||
}
|
||||
.topbar__settings__subitem .set-size-normal
|
||||
{
|
||||
font-size: em(20, $_base_font_size);
|
||||
line-height: 20px;
|
||||
}
|
||||
.topbar__settings__subitem .set-size-big
|
||||
{
|
||||
font-size: em(25, $_base_font_size);
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@ -51,6 +51,12 @@
|
||||
<li class="topbar__settings__subitem"><a href="#">Object History</a></li>
|
||||
<li class="topbar__settings__subitem"><a href="#/view?view=config">Configure</a></li>
|
||||
<li class="topbar__settings__subitem" ng-click="switchTheme()"><a>Change theme</a></li>
|
||||
<li class="topbar__settings__subitem" >
|
||||
<div class="set-size-big" ng-class="{active: themeClassSize=='size-scheme--big'}" ng-click="setSize('big')">A</div>
|
||||
<div class="set-size-normal" ng-class="{active: themeClassSize=='size-scheme--normal'}" ng-click="setSize('normal')">A</div>
|
||||
<div class="set-size-small" ng-class="{active: themeClassSize=='size-scheme--small'}" ng-click="setSize('small')">A</div>
|
||||
<div class="set-size-clear"></div>
|
||||
</li>
|
||||
<li class="topbar__settings__subitem" ng-click="logout()"><a>Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@ -16,6 +16,10 @@ angular.module('bansho.topbar', ['bansho.surveil'])
|
||||
themeManager.switchTheme();
|
||||
};
|
||||
|
||||
$scope.setSize = function (size) {
|
||||
themeManager.setSize(size);
|
||||
};
|
||||
|
||||
authService.registerOnLogin(function () {
|
||||
$scope.allProblems = sharedData.getData('nbServicesHostsOpenProblems', function (data) {
|
||||
$scope.allProblems = data;
|
||||
|
||||
@ -122,7 +122,7 @@
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
|
||||
<body class="layout" ng-class="themeClass" ng-app="bansho">
|
||||
<body class="layout" ng-class="[themeClass, themeClassSize]" ng-app="bansho">
|
||||
<!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]-->
|
||||
<div class="layout__container">
|
||||
<aside class="layout__aside sidebar-wrapper collapse" id="sidebarWrapper">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user