From 9f483b442aa0c626f898643ef2ac4edcd4a94f57 Mon Sep 17 00:00:00 2001 From: Thibault Cohen Date: Mon, 1 Jun 2015 18:44:37 -0400 Subject: [PATCH] Add css on service status page and add light theme Change-Id: Iaa6af5b5aafb97a058ab03ae3e02c653252e68c5 --- app/assets/sass/global/_color-schemes.scss | 38 ++++++++++ app/assets/sass/modules-interface/_main.scss | 6 +- .../sass/modules-objects/_data-table.scss | 10 +-- app/assets/sass/modules-objects/_filters.scss | 8 +- app/assets/sass/modules-objects/_panes.scss | 4 +- .../sass/modules-objects/_togglable-tabs.scss | 11 ++- app/assets/sass/settings/_variables.scss | 10 ++- app/assets/sass/temporary.scss | 76 ++++++++++++++++--- app/components/host/host_cpu/host_cpu.html | 16 +++- app/components/host/host_live/host_live.html | 16 +++- app/components/host/host_load/host_load.html | 16 +++- app/components/service/service.html | 9 ++- app/components/service/service.js | 1 + .../service/service_info/service_info.html | 22 +++++- .../service/service_live/service_live.html | 15 ++++ .../service/service_live/service_live.js | 19 +++++ .../service/service_main/service_main.html | 11 +-- .../service_metrics/service_metrics.html | 2 +- app/components/sidebar/_sidebar.scss | 33 +++++--- app/components/topbar/_topbar.scss | 13 +++- app/index.html | 1 + 21 files changed, 271 insertions(+), 66 deletions(-) create mode 100644 app/components/service/service_live/service_live.html create mode 100644 app/components/service/service_live/service_live.js diff --git a/app/assets/sass/global/_color-schemes.scss b/app/assets/sass/global/_color-schemes.scss index d0a5a4c..904ec40 100644 --- a/app/assets/sass/global/_color-schemes.scss +++ b/app/assets/sass/global/_color-schemes.scss @@ -6,6 +6,44 @@ //----------------------------------*/ .color-scheme--light { // Light scheme is not ready for now. + %colorTxtCurrent { + color:$_color_light_delta; + } + + %colorHightContrast { + color:$_color_alpha; + } + + // For panel and the sidebar + %colorBkgPanel { + background:$_color_light_beta; + } + + %colorLink { + color:$_color_light_delta; + transition-duration: 0.5s; + transition-property: color; + + &:hover { + color:$_color_alpha; + } + } + + %colorBorderThin { + border-color:$_color_light_epsilon; + } + + %colorBkgTopbar { + background:$_color_light_alpha; + } + + %colorBkgTopbarPanel { + background:$_color_light_beta; + } + + %colorBkgTopbarButton { + background:$_color_light_alpha; + } } // Dark Scheme diff --git a/app/assets/sass/modules-interface/_main.scss b/app/assets/sass/modules-interface/_main.scss index c474beb..54f2866 100644 --- a/app/assets/sass/modules-interface/_main.scss +++ b/app/assets/sass/modules-interface/_main.scss @@ -17,7 +17,7 @@ } .color-scheme--light & { - background:$_color_light_beta; + background:$_color_omega; } table {width:100%;} @@ -50,7 +50,7 @@ } .color-scheme--light & { - color:$_color_light_alpha; + color:$_color_light_delta; } } } @@ -66,7 +66,7 @@ } .color-scheme--light & { - border-top-color:$_color_light_beta; + border-top-color:$_color_light_delta; } } diff --git a/app/assets/sass/modules-objects/_data-table.scss b/app/assets/sass/modules-objects/_data-table.scss index 80920af..bc84635 100644 --- a/app/assets/sass/modules-objects/_data-table.scss +++ b/app/assets/sass/modules-objects/_data-table.scss @@ -51,7 +51,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } } @@ -83,7 +83,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } /* &:before { */ @@ -128,8 +128,8 @@ } .color-scheme--light & { - background:$_color_light_beta; - border-color:$_color_light_gamma; + background:$_color_light_alpha; + border-color:$_color_light_epsilon; &.state--asc, &.state--desc {background:$_color_light_alpha;} @@ -332,4 +332,4 @@ time.data-table__data { .color-scheme--light & { color:$_color_light_delta; } -} \ No newline at end of file +} diff --git a/app/assets/sass/modules-objects/_filters.scss b/app/assets/sass/modules-objects/_filters.scss index dec783d..21a2814 100644 --- a/app/assets/sass/modules-objects/_filters.scss +++ b/app/assets/sass/modules-objects/_filters.scss @@ -13,7 +13,7 @@ .color-scheme--light & { background:$_color_light_gamma; - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } } @@ -49,7 +49,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_epsilon; } .filters__item--more &, @@ -80,7 +80,7 @@ } .color-scheme--light & { - background:$_color_light_beta; + background:$_color_light_epsilon; color:$_color_alpha; } } @@ -125,4 +125,4 @@ color:$_color_alpha; } } -} \ No newline at end of file +} diff --git a/app/assets/sass/modules-objects/_panes.scss b/app/assets/sass/modules-objects/_panes.scss index ab9a824..031efb3 100644 --- a/app/assets/sass/modules-objects/_panes.scss +++ b/app/assets/sass/modules-objects/_panes.scss @@ -21,7 +21,7 @@ } .color-scheme--light & { - background:$_color_light_gamma; + background:$_color_light_alpha; } } @@ -56,7 +56,7 @@ } .color-scheme--light & { - border-color:$_color_light_beta; + border-color:$_color_light_delta; } .panes--2 & {width:50%;} diff --git a/app/assets/sass/modules-objects/_togglable-tabs.scss b/app/assets/sass/modules-objects/_togglable-tabs.scss index af07254..9838ed4 100644 --- a/app/assets/sass/modules-objects/_togglable-tabs.scss +++ b/app/assets/sass/modules-objects/_togglable-tabs.scss @@ -25,7 +25,14 @@ &[aria-expanded="true"] { border-width:0 0 3px; - color:$_color_omega; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } + } :first-child > & {margin:0;} @@ -53,4 +60,4 @@ display:block; visibility:visible; } -} \ No newline at end of file +} diff --git a/app/assets/sass/settings/_variables.scss b/app/assets/sass/settings/_variables.scss index f14a971..79118c4 100644 --- a/app/assets/sass/settings/_variables.scss +++ b/app/assets/sass/settings/_variables.scss @@ -9,10 +9,12 @@ $_img_path: "../images/" !default; // Colors //----------------------------------*/ // Light scheme -$_color_light_alpha: '' !default; -$_color_light_beta: '' !default; -$_color_light_gamma: '' !default; -$_color_light_delta: red !default; +$_color_light_alpha: #EEEEEE !default; +$_color_light_beta: #F9F9F9 !default; +$_color_light_gamma: #FFFFFF !default; +$_color_light_delta: #333333 !default; +$_color_light_epsilon: #c0c1c2 !default; + // Dark scheme $_color_dark_alpha: #252C35 !default; diff --git a/app/assets/sass/temporary.scss b/app/assets/sass/temporary.scss index cfbc3b9..c1f83a4 100644 --- a/app/assets/sass/temporary.scss +++ b/app/assets/sass/temporary.scss @@ -38,8 +38,14 @@ } .subcomponent__live { - background-color: #252C35; - //background-color: #353D48; + + .color-scheme--dark & { + background-color:$_color_dark_alpha; + } + + .color-scheme--light & { + background-color:$_color_light_alpha; + } padding: 0px 15px; float: left; @@ -51,39 +57,89 @@ } .subcomponent__live table { - background-color: #49515C; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } + } .subcomponent__live h2 { margin: 15px 0px 20px 0px; - color: #FFFFFF; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } } .subcomponent__live p { - color: #FFFFFF; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } } .subcomponent__live label { - color: #A2AAB4; + .color-scheme--dark & { + background-color:$_color_dark_delta; + } + + .color-scheme--light & { + background-color:$_color_light_delta; + } } .subcomponent__title { width: 94%; clear: both; - background-color: #49515C; + .color-scheme--dark & { + background-color:$_color_dark_gamma; + } + + .color-scheme--light & { + background-color:$_color_light_gamma; + } + } .subcomponent__title h1 { font-size: 2em; - color: #FFFFFF; + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } + } .subcomponent__title h1 span { font-size: 20px; - color: #A2AAB4; + .color-scheme--dark & { + color:$_color_dark_delta; + } + + .color-scheme--light & { + color:$_color_light_delta; + } + +} + +.subcomponent__title h1 span a { + text-decoration: none; } .subcomponent__small { - min-height: 160px; + min-height: 190px; } diff --git a/app/components/host/host_cpu/host_cpu.html b/app/components/host/host_cpu/host_cpu.html index 0b22afa..8239623 100644 --- a/app/components/host/host_cpu/host_cpu.html +++ b/app/components/host/host_cpu/host_cpu.html @@ -1,5 +1,15 @@
-

Cpu

-

{{host.cpuService.state}}

-

{{host.cpuService.plugin_output}}

+

Cpu

+ + + + + + + + + + + +
State {{host.cpuService.state}}
Output{{host.cpuService.plugin_output}}
diff --git a/app/components/host/host_live/host_live.html b/app/components/host/host_live/host_live.html index f7cbf98..b2b9a2f 100644 --- a/app/components/host/host_live/host_live.html +++ b/app/components/host/host_live/host_live.html @@ -1,7 +1,15 @@

Status

-

- {{host.live.state}} -

-

{{host.live.plugin_output}}

+ + + + + + + + + + + +
State {{host.live.state}}
Output{{host.live.plugin_output}}
diff --git a/app/components/host/host_load/host_load.html b/app/components/host/host_load/host_load.html index f62e049..ded7d8c 100644 --- a/app/components/host/host_load/host_load.html +++ b/app/components/host/host_load/host_load.html @@ -1,5 +1,15 @@
-

Load

-

{{host.loadService.state}}

-

{{host.loadService.plugin_output}}

+

Load

+ + + + + + + + + + + +
State {{host.loadService.state}}
Output{{host.loadService.plugin_output}}
diff --git a/app/components/service/service.html b/app/components/service/service.html index 79db5ab..0c55695 100644 --- a/app/components/service/service.html +++ b/app/components/service/service.html @@ -1,10 +1,11 @@
-

{{service.service_description}}

-

Info

+ + + -

Metrics

- + +
diff --git a/app/components/service/service.js b/app/components/service/service.js index 1fb5eb4..5b9f9b0 100644 --- a/app/components/service/service.js +++ b/app/components/service/service.js @@ -2,6 +2,7 @@ angular.module('bansho.service', ['bansho.surveil', 'bansho.service.main', + 'bansho.service.live', 'bansho.service.info', 'bansho.service.metrics', 'bansho.table.state_icon']) diff --git a/app/components/service/service_info/service_info.html b/app/components/service/service_info/service_info.html index 5157169..8c165b1 100644 --- a/app/components/service/service_info/service_info.html +++ b/app/components/service/service_info/service_info.html @@ -1,5 +1,19 @@ -
-

Last check: {{service.last_check|timeElapsed}}

-

Last state change: {{service.last_state_change|timeElapsed}}

-

Acknowledged: {{isAcknowledged}}

+
+

Info

+ + + + + + + + + + + + + + + +
Last check{{service.last_check|timeElapsed}}
Last state change{{service.last_state_change|timeElapsed}}
Acknowledged{{isAcknowledged}}
diff --git a/app/components/service/service_live/service_live.html b/app/components/service/service_live/service_live.html new file mode 100644 index 0000000..69dd396 --- /dev/null +++ b/app/components/service/service_live/service_live.html @@ -0,0 +1,15 @@ +
+

Status

+ + + + + + + + + + + +
State {{service.state}}
Output{{service.plugin_output}}
+
diff --git a/app/components/service/service_live/service_live.js b/app/components/service/service_live/service_live.js new file mode 100644 index 0000000..7486ca9 --- /dev/null +++ b/app/components/service/service_live/service_live.js @@ -0,0 +1,19 @@ +'use strict'; + +angular.module('bansho.service.live', []) + + .controller('ServiceLiveCtrl', ['$scope', function ($scope) { + angular.noop(); + }]) + + .directive('banshoServiceLive', function () { + return { + restrict: 'E', + scope: { + service: '=service' + }, + templateUrl: 'components/service/service_live/service_live.html', + controller: 'ServiceLiveCtrl' + + }; + }); diff --git a/app/components/service/service_main/service_main.html b/app/components/service/service_main/service_main.html index d1bca7f..a1f06b3 100644 --- a/app/components/service/service_main/service_main.html +++ b/app/components/service/service_main/service_main.html @@ -1,6 +1,7 @@ -
-

Description: {{service.description}}

-

Host Name: {{service.host_name}}

-

Current state: {{service.state}} -

Live plugin output: {{service.plugin_output}}

+
+

{{service.service_description}} + + {{service.host_name}} + +

diff --git a/app/components/service/service_metrics/service_metrics.html b/app/components/service/service_metrics/service_metrics.html index 83e1aba..796819c 100644 --- a/app/components/service/service_metrics/service_metrics.html +++ b/app/components/service/service_metrics/service_metrics.html @@ -1,3 +1,3 @@
-

Metrics

+

Metrics

diff --git a/app/components/sidebar/_sidebar.scss b/app/components/sidebar/_sidebar.scss index 45a2787..d3d3b52 100644 --- a/app/components/sidebar/_sidebar.scss +++ b/app/components/sidebar/_sidebar.scss @@ -60,7 +60,7 @@ } .color-scheme--light & { - color:$_color_light_gamma; + color:$_color_light_epsilon; } } @@ -76,7 +76,7 @@ } .color-scheme--light & { - border-top-color:$_color_light_gamma; + border-top-color:$_color_light_epsilon; } &:first-child {border:0;} @@ -103,7 +103,7 @@ } .color-scheme--light & { - color:$_color_light_gamma; + color:$_color_light_epsilon; } .sidebar__item:first-child & {padding-top:0;} @@ -130,11 +130,18 @@ } .color-scheme--light & { - color:$_color_light_gamma; + color:$_color_light_epsilon; } &:focus, - &:hover {color:$_color_omega;} + &:hover { + .color-scheme--dark & { + color:$_color_omega; + } + .color-scheme--light & { + color:$_color_alpha; + } + } &:before {margin:0;} @@ -154,7 +161,13 @@ margin-top:$_space; .state--current { - color:$_color_omega; + .color-scheme--dark & { + color:$_color_omega; + } + .color-scheme--light & { + color:$_color_alpha; + } + position:relative; &:before { @@ -186,7 +199,7 @@ } .color-scheme--light & { - background:$_color_light_beta; + background:$_color_light_epsilon; } .sidebar__profile__toggle { @@ -211,7 +224,7 @@ } .color-scheme--light & { - background:$_color_alpha; + color:$_color_alpha; } } } @@ -257,9 +270,9 @@ } .color-scheme--light & { - color:$_color_light_alpha; + color:$_color_light_delta; } } } -} \ No newline at end of file +} diff --git a/app/components/topbar/_topbar.scss b/app/components/topbar/_topbar.scss index 3a2f94e..9952cbc 100644 --- a/app/components/topbar/_topbar.scss +++ b/app/components/topbar/_topbar.scss @@ -64,7 +64,16 @@ position:relative; width:79px; - &[aria-expanded="true"] {color:$_color_omega;} + &[aria-expanded="true"] { + .color-scheme--dark & { + color:$_color_omega; + } + + .color-scheme--light & { + color:$_color_alpha; + } + + } [class^="ico-"], [class*=" ico-"] { @@ -198,4 +207,4 @@ margin-bottom:$_space; a {display:block;} -} \ No newline at end of file +} diff --git a/app/index.html b/app/index.html index a781437..c9a3a3e 100644 --- a/app/index.html +++ b/app/index.html @@ -79,6 +79,7 @@ +