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