diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-09-24 08:32:42 -0700 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-10-02 07:02:24 -0700 |
commit | 4b366b5aeb97b35ab3612bfe1dc7d93a1f8a6e79 (patch) | |
tree | 5e184f589c9ddad570f582d8b5818ac933c89e14 /app/common | |
parent | ea4968c0e8e6a71a7a23263bd05e04147339e6c5 (diff) | |
download | phosphor-webui-4b366b5aeb97b35ab3612bfe1dc7d93a1f8a6e79.tar.gz phosphor-webui-4b366b5aeb97b35ab3612bfe1dc7d93a1f8a6e79.zip |
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 <icon>
or <status-icon> directive
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ic0f06d78b0861d6f60d40b2dcc0b80fd6dad2a88
Diffstat (limited to 'app/common')
-rw-r--r-- | app/common/components/status-icon.js | 42 | ||||
-rw-r--r-- | app/common/directives/app-header.html | 39 | ||||
-rw-r--r-- | app/common/styles/base/icons.scss | 43 | ||||
-rw-r--r-- | app/common/styles/elements/alerts.scss | 20 | ||||
-rw-r--r-- | app/common/styles/elements/index.scss | 1 | ||||
-rw-r--r-- | app/common/styles/elements/status.scss | 68 | ||||
-rw-r--r-- | app/common/styles/layout/header.scss | 4 |
7 files changed, 90 insertions, 127 deletions
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 <status-icon> component expects a 'status' attribute + * with a status value (on, off, warn, error) + * + */ + + /** + * statusIcon Component template + */ + const template = `<icon ng-if="$ctrl.status === 'on'" + file="icon-on.svg" + aria-hidden="true" + class="status-icon"> + </icon> + <icon ng-if="$ctrl.status === 'off'" + file="icon-off.svg" + aria-hidden="true" + class="status-icon"> + </icon> + <icon ng-if="$ctrl.status === 'warn'" + file="icon-warning.svg" + aria-hidden="true" + class="status-icon"> + </icon> + <icon ng-if="$ctrl.status === 'error'" + file="icon-critical.svg" + aria-hidden="true" + class="status-icon"> + </icon>` + + /** + * 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 @@ > <icon aria-hidden="true" file="icon-chevron-right.svg"></icon> </button> - <a href="#/server-health/event-log" class="header__action" - >Server health - <icon aria-hidden="true" file="icon-chevron-right.svg"></icon - ><span - ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}" - >{{ dataService.server_health }}</span - ></a - > - <a href="#/server-control/power-operations" class="header__action" - >Server power - <icon aria-hidden="true" file="icon-chevron-right.svg"></icon - ><span - ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}" - >{{ dataService.server_state | quiescedToError }}</span - ></a - > + <a href="#/server-health/event-log" class="header__action"> + Server health + <icon aria-hidden="true" file="icon-chevron-right.svg"></icon> + <span> + <status-icon status="{{ dataService.server_health == 'Critical' ? 'error' : + dataService.server_health == 'Warning' ? 'warn' : + dataService.server_health == 'Good' ? 'on' : null }}"> + </status-icon> + {{ dataService.server_health }} + </span> + </a> + <a href="#/server-control/power-operations" class="header__action"> + Server power + <icon aria-hidden="true" file="icon-chevron-right.svg"></icon> + <span> + <status-icon status="{{ dataService.server_state == 'Quiesced' ? 'error' : + dataService.server_state == 'Running' ? 'on' : + dataService.server_state == 'Off' ? 'off' : + dataService.server_state == 'Unreachable' ? 'off' : null }}"> + </status-icon> + {{ dataService.server_state | quiescedToError }} + </span> + </a> <p class="header__refresh"> Data last refreshed<span>{{ 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; } |