From 4b366b5aeb97b35ab3612bfe1dc7d93a1f8a6e79 Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Tue, 24 Sep 2019 08:32:42 -0700 Subject: Clean up icons Clean up duplicate svg icons from assets directory. Created a statusIcon component to dynamically render status icons instead of using background-image in scss files. - Moved/removed on, off, critical, warning svg icons from assets directory - Updated background-image status icons to use or directive Signed-off-by: Yoshie Muranaka Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88 --- .../controllers/certificate-controller.html | 2 +- .../controllers/user-accounts-modal-user.html | 1 + app/assets/icons/icon-off.svg | 1 + app/assets/icons/icon-on.svg | 1 + app/assets/images/icon-critical.svg | 1 - app/assets/images/icon-off.svg | 1 - app/assets/images/icon-on.svg | 1 - app/assets/images/icon-warning.svg | 1 - app/common/components/status-icon.js | 42 +++++++++++++ app/common/directives/app-header.html | 39 ++++++++----- app/common/styles/base/icons.scss | 43 ++++---------- app/common/styles/elements/alerts.scss | 20 ++++--- app/common/styles/elements/index.scss | 1 - app/common/styles/elements/status.scss | 68 ---------------------- app/common/styles/layout/header.scss | 4 ++ .../controllers/firmware-controller.html | 4 +- .../controllers/network-controller.html | 2 +- app/index.js | 1 + .../controllers/power-operations-controller.html | 11 +++- .../controllers/power-operations-modal.html | 2 +- app/server-control/styles/power-operations.scss | 35 ----------- .../controllers/inventory-overview-controller.html | 2 +- .../controllers/sensors-overview-controller.html | 5 +- app/server-health/styles/sensors.scss | 3 - 24 files changed, 114 insertions(+), 177 deletions(-) create mode 100644 app/assets/icons/icon-off.svg create mode 100644 app/assets/icons/icon-on.svg delete mode 100644 app/assets/images/icon-critical.svg delete mode 100644 app/assets/images/icon-off.svg delete mode 100644 app/assets/images/icon-on.svg delete mode 100644 app/assets/images/icon-warning.svg create mode 100644 app/common/components/status-icon.js delete mode 100644 app/common/styles/elements/status.scss (limited to 'app') diff --git a/app/access-control/controllers/certificate-controller.html b/app/access-control/controllers/certificate-controller.html index 4226262..c1f64fa 100644 --- a/app/access-control/controllers/certificate-controller.html +++ b/app/access-control/controllers/certificate-controller.html @@ -12,7 +12,7 @@
diff --git a/app/access-control/controllers/user-accounts-modal-user.html b/app/access-control/controllers/user-accounts-modal-user.html index 4e646b1..d718dcd 100644 --- a/app/access-control/controllers/user-accounts-modal-user.html +++ b/app/access-control/controllers/user-accounts-modal-user.html @@ -16,6 +16,7 @@ aria-live="polite" ng-class="{'notification-banner--warning': !form.lock.$dirty, 'notification-banner--information': form.lock.$dirty}"> +

Account locked

Click "Save" to unlock account

diff --git a/app/assets/icons/icon-off.svg b/app/assets/icons/icon-off.svg new file mode 100644 index 0000000..9757f9d --- /dev/null +++ b/app/assets/icons/icon-off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/icons/icon-on.svg b/app/assets/icons/icon-on.svg new file mode 100644 index 0000000..ac750b0 --- /dev/null +++ b/app/assets/icons/icon-on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/images/icon-critical.svg b/app/assets/images/icon-critical.svg deleted file mode 100644 index de7df36..0000000 --- a/app/assets/images/icon-critical.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/icon-off.svg b/app/assets/images/icon-off.svg deleted file mode 100644 index 9757f9d..0000000 --- a/app/assets/images/icon-off.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/icon-on.svg b/app/assets/images/icon-on.svg deleted file mode 100644 index ac750b0..0000000 --- a/app/assets/images/icon-on.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/icon-warning.svg b/app/assets/images/icon-warning.svg deleted file mode 100644 index f69427d..0000000 --- a/app/assets/images/icon-warning.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/common/components/status-icon.js b/app/common/components/status-icon.js new file mode 100644 index 0000000..d756326 --- /dev/null +++ b/app/common/components/status-icon.js @@ -0,0 +1,42 @@ +window.angular && (function(angular) { + 'use strict'; + + /** + * statusIcon Component + * + * To use: + * The component expects a 'status' attribute + * with a status value (on, off, warn, error) + * + */ + + /** + * statusIcon Component template + */ + const template = ` + + + ` + + /** + * Register statusIcon component + */ + angular.module('app.common.components') + .component('statusIcon', {template, bindings: {status: '@'}}) +})(window.angular); \ No newline at end of file diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html index 651e56d..bf4fb8f 100644 --- a/app/common/directives/app-header.html +++ b/app/common/directives/app-header.html @@ -24,22 +24,29 @@ > - Server health - {{ dataService.server_health }} - Server power - {{ dataService.server_state | quiescedToError }} + + Server health + + + + + {{ dataService.server_health }} + + + + Server power + + + + + {{ dataService.server_state | quiescedToError }} + +

Data last refreshed{{ dataService.last_updated | localeDate diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss index 9a9646b..0d91f1d 100644 --- a/app/common/styles/base/icons.scss +++ b/app/common/styles/base/icons.scss @@ -50,39 +50,6 @@ color: $text-02; } } -//Status icons -@mixin status-icon { - background-repeat: no-repeat; - vertical-align: middle; - width: 16px; - height: 16px; - margin-right: .4em; -} - -.icon__warning { - @include status-icon; - background-image: url(../assets/images/icon-warning.svg); -} - -.modal .icon__warning { - width: 30px; - height: 30px; -} - -.icon__critical { - @include status-icon; - background-image: url(../assets/images/icon-critical.svg); -} - -.icon__good { - @include status-icon; - background-image: url(../assets/images/icon-on.svg); -} - -.icon__off { - @include status-icon; - background-image: url(../assets/images/icon-off.svg); -} .icon__info{ margin-top: -4px; @@ -108,3 +75,13 @@ @extend .icon__up-arrow; transform: rotate(180deg); } + +.icon__info-tooltip { + fill: $primary-accent; +} + +.status-icon { + width: 1rem; + vertical-align: text-bottom; + margin-right: 0.25em; +} diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss index fe1082e..694d2a6 100644 --- a/app/common/styles/elements/alerts.scss +++ b/app/common/styles/elements/alerts.scss @@ -31,6 +31,7 @@ margin-bottom: 24px; border-style: solid; border-width: 1px; + position: relative; } .notification-banner__text { @@ -47,15 +48,16 @@ .notification-banner--warning { background-color: $accent-03--03; border-color: $accent-03--02; + .icon { + position: absolute; + left: 10px; + top: 8px; + bottom: 8px; + width: 18px; + height: 30px; + margin: auto; + } .notification-banner__text { - &::before { - content: ''; - display: inline-block; - width: 18px; - height: 18px; - vertical-align: bottom; - margin-right: 0.5em; - background-image: url(../assets/images/icon-warning.svg); - } + padding-left: 24px; } } diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss index 66a2877..b1df113 100644 --- a/app/common/styles/elements/index.scss +++ b/app/common/styles/elements/index.scss @@ -1,6 +1,5 @@ @import "toggle-switch"; @import "toggle-filter"; -@import "status"; @import "alerts"; @import "inline-confirm"; @import "input-file"; diff --git a/app/common/styles/elements/status.scss b/app/common/styles/elements/status.scss deleted file mode 100644 index b6cdc9d..0000000 --- a/app/common/styles/elements/status.scss +++ /dev/null @@ -1,68 +0,0 @@ -//status light states -@mixin status-light-before { - content: ''; - display: inline-block; - margin-right: -12%; - transform: translateY(-2px); - left: 0; - top: 0; - width: 16px; - height: 16px; - position: absolute; -} - -@mixin status-light-header { - padding-left: 1.6em; - margin-top: .7em; - position: relative; -} -@mixin status-light__good { - @include status-light-before; -} - -@mixin status-light__error { - @include status-light-before; -} - -@mixin status-light__disabled { - @include status-light-before; -} - -@mixin status-light__warn { - @include status-light-before; - -} - -.status-light__disabled, -.status-light__off{ - @include status-light-header; - &::before { - @include status-light__disabled; - @extend .icon__off; - } -} - -.status-light__good { - @include status-light-header; - &::before { - @include status-light__good; - @extend .icon__good; - } -} - -.status-light__error { - @include status-light-header; - &::before { - @include status-light__error; - @extend .icon__critical; - } - -} - -.status-light__warn { - @include status-light-header; - &::before { - @include status-light__warn; - @extend .icon__warning; - } -} \ No newline at end of file diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss index 084fe71..5a7a9d1 100644 --- a/app/common/styles/layout/header.scss +++ b/app/common/styles/layout/header.scss @@ -149,6 +149,10 @@ $logoMaxWidth: 125px; width: 1rem; } + .status-icon { + vertical-align: text-top; + } + &:hover { background: $background-01; } diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html index 98f9c00..da2c397 100644 --- a/app/configuration/controllers/firmware-controller.html +++ b/app/configuration/controllers/firmware-controller.html @@ -57,7 +57,7 @@

Update image priority
- Warning + Warning

Change image priority

@@ -74,7 +74,7 @@
Delete firmware image
- Warning + Warning

Delete image

diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html index 102f1f2..0ec143c 100644 --- a/app/configuration/controllers/network-controller.html +++ b/app/configuration/controllers/network-controller.html @@ -121,7 +121,7 @@
Change network settings
- Warning + Warning

Change network settings

diff --git a/app/index.js b/app/index.js index fa1d017..6e24319 100644 --- a/app/index.js +++ b/app/index.js @@ -71,6 +71,7 @@ import table_component from './common/components/table/table.js'; import table_actions_component from './common/components/table/table-actions.js'; import table_toolbar_component from './common/components/table/table-toolbar.js'; import table_checkbox from './common/components/table/table-checkbox.js'; +import status_icon from './common/components/status-icon.js'; import login_index from './login/index.js'; import login_controller from './login/controllers/login-controller.js'; diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html index ab83437..e44ef1f 100644 --- a/app/server-control/controllers/power-operations-controller.html +++ b/app/server-control/controllers/power-operations-controller.html @@ -13,11 +13,20 @@
+ ng-class="{'power__state-on': dataService.server_state == 'Running', + 'power__state-off': dataService.server_state == 'Off', + 'power__state-indet': dataService.server_state == 'Standby', + 'power__state-error': dataService.server_state == 'Quiesced'}">

{{ dataService.hostname }} - {{ dataService.server_id }}

+ + {{ dataService.server_state | quiescedToError }}

diff --git a/app/server-control/controllers/power-operations-modal.html b/app/server-control/controllers/power-operations-modal.html index 3524b4c..1d5387f 100644 --- a/app/server-control/controllers/power-operations-modal.html +++ b/app/server-control/controllers/power-operations-modal.html @@ -10,7 +10,7 @@