x
/
bansho
Code Issues Proposed changes

Add theme size options 

Change-Id: I30afc1473bf0f4ab1065816f00f1d73afa9cfbf9
This commit is contained in:
Vincent Fournier 2015-07-30 16:07:03 -04:00
parent 54d63de7a0
commit 0931458d80
13 changed files with 545 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
app/assets/sass/modules-objects/_data-table.scss
View File

@ -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);
}

11
app/assets/sass/modules-objects/_panes.scss
View File

@ -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;}

212
app/assets/sass/temporary.scss
View File

@ -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;
}
}

2
app/components/authentication/authentication.js
View File

@ -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) {

55
app/components/config/config.js
View File

@ -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 () {

4
app/components/directive/host/host_main/host_main.html
View File

@ -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>

7
app/components/directive/tactical/current_health/current_health.html
View File

@ -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>

17
app/components/directive/tactical/current_health/current_health.js
View File

@ -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);
});
}
};
});
}]);

77
app/components/sidebar/_sidebar.scss
View File

@ -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 & {

149
app/components/topbar/_topbar.scss
View File

@ -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;
}

6
app/components/topbar/topbar.html
View File

@ -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>

4
app/components/topbar/topbar.js
View File

@ -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;

2
app/index.html
View File

@ -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">