diff --git a/app/assets/sass/modules-objects/_data-table.scss b/app/assets/sass/modules-objects/_data-table.scss index 4d614eb..e0a55b5 100644 --- a/app/assets/sass/modules-objects/_data-table.scss +++ b/app/assets/sass/modules-objects/_data-table.scss @@ -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); } diff --git a/app/assets/sass/modules-objects/_panes.scss b/app/assets/sass/modules-objects/_panes.scss index ab9a824..8fbbb35 100644 --- a/app/assets/sass/modules-objects/_panes.scss +++ b/app/assets/sass/modules-objects/_panes.scss @@ -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;} diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss index 1a5ab38..a9eb0b0 100644 --- a/app/assets/sass/temporary.scss +++ b/app/assets/sass/temporary.scss @@ -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; + } +} diff --git a/app/components/authentication/authentication.js b/app/components/authentication/authentication.js index d592be8..2673b70 100644 --- a/app/components/authentication/authentication.js +++ b/app/components/authentication/authentication.js @@ -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) { diff --git a/app/components/config/config.js b/app/components/config/config.js index dc4174b..91fff63 100644 --- a/app/components/config/config.js +++ b/app/components/config/config.js @@ -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 () { diff --git a/app/components/directive/host/host_main/host_main.html b/app/components/directive/host/host_main/host_main.html index cd3a7ca..445e4eb 100644 --- a/app/components/directive/host/host_main/host_main.html +++ b/app/components/directive/host/host_main/host_main.html @@ -1,9 +1,9 @@
-

+

{{param.host.host_host_name}} (param.host.host_config_alias) {{param.host.host_address}} -

+
diff --git a/app/components/directive/tactical/current_health/current_health.html b/app/components/directive/tactical/current_health/current_health.html index deb3f0d..3c17aef 100644 --- a/app/components/directive/tactical/current_health/current_health.html +++ b/app/components/directive/tactical/current_health/current_health.html @@ -1,5 +1,4 @@ - @@ -10,10 +9,10 @@ diff --git a/app/components/directive/tactical/current_health/current_health.js b/app/components/directive/tactical/current_health/current_health.js index 9e029bd..5ed7242 100644 --- a/app/components/directive/tactical/current_health/current_health.js +++ b/app/components/directive/tactical/current_health/current_health.js @@ -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); + }); + } + }; - }); + }]); diff --git a/app/components/sidebar/_sidebar.scss b/app/components/sidebar/_sidebar.scss index a6461e0..630c937 100644 --- a/app/components/sidebar/_sidebar.scss +++ b/app/components/sidebar/_sidebar.scss @@ -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 & { diff --git a/app/components/topbar/_topbar.scss b/app/components/topbar/_topbar.scss index 5ed898f..a442f5d 100644 --- a/app/components/topbar/_topbar.scss +++ b/app/components/topbar/_topbar.scss @@ -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; } diff --git a/app/components/topbar/topbar.html b/app/components/topbar/topbar.html index 687a31d..5cae0e9 100644 --- a/app/components/topbar/topbar.html +++ b/app/components/topbar/topbar.html @@ -51,6 +51,12 @@
  • Object History
  • Configure
  • Change theme
  • +
  • +
    A
    +
    A
    +
    A
    +
    +
  • Logout
  • diff --git a/app/components/topbar/topbar.js b/app/components/topbar/topbar.js index 665b952..a986b7a 100644 --- a/app/components/topbar/topbar.js +++ b/app/components/topbar/topbar.js @@ -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; diff --git a/app/index.html b/app/index.html index 946c112..1b95ec6 100644 --- a/app/index.html +++ b/app/index.html @@ -122,7 +122,7 @@ - +
    - + - +