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/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 @@
<!-- Power Indicator Bar -->
<div class="row column">
<div id="power-indicator-bar" class="power__indicator-bar"
- 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'}">
+ 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'}">
<p class="inline">
{{ dataService.hostname }} - {{ dataService.server_id }}
</p>
<h3 class="power__state inline no-margin h3">
+ <status-icon status="{{ dataService.server_state == 'Running' ? 'on' :
+ dataService.server_state == 'Off' ? 'off' :
+ dataService.server_state == 'Unreachable' ? 'off' :
+ dataService.server_state == 'Standby' ? 'warn' :
+ dataService.server_state == 'Quiesced' ? 'error' : null }}">
+ </status-icon>
<span>{{ dataService.server_state | quiescedToError }}</span>
</h3>
</div>
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 @@
</button>
<div class="modal-header" id="modal-operation">
<h3>
- <div class="icon__warning inline" aria-label="Warning"></div>
+ <icon file="icon-warning" aria-hidden="true"></icon>
{{
activeModal === 2 || activeModal === 3
? "Server shutdown will cause outage"
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 6a29dfd..0b0a339 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -11,12 +11,6 @@
.power__state {
font-weight: 700;
margin-top: -0.3em;
- span:before {
- content: "";
- position: absolute;
- @extend .icon__off;
- margin-left: -25px;
- }
}
// Power bar indicator
@@ -40,43 +34,18 @@
}
&.power__state-on {
background-position: -100%;
- .power__state {
- span:before {
- content: "";
- @extend .icon__good;
- }
- }
}
&.power__state-off {
background-position: 0;
color: $primary-dark;
- .power__state {
- span:before {
- content: "";
- @extend .icon__off;
- }
- }
}
&.power__state-indet {
color: $text-02;
@include indeterminate-bar;
- .power__state {
- span:before {
- color: $status-warn;
- content: "";
- @extend .icon__warning;
- }
- }
}
&.power__state-error {
background-position: 0;
color: $primary-dark;
- .power__state {
- span:before {
- content: "";
- @extend .icon__critical;
- }
- }
}
}
@@ -157,8 +126,4 @@
width: 10px;
height: 10px;
}
-
- .icon__warning {
- width: 24px;
- }
} //end power-operations