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
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 @@
width: 1rem;
}
+ .status-icon {
+ vertical-align: text-top;
+ }
+
&:hover {
background: $background-01;
}