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-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index c0f05d2..5dc6f03 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -45,7 +45,7 @@
<div class="row column">
<h5 class="small-12 content-label">Subcomponents</h5>
<p ng-repeat="sub_component in inventory.sub_components" class="large-6 small-3 courier-bold" ng-if="sub_component.Present">
- <span class="icon icon__warning" ng-if="!sub_component.Functional"></span>
+ <icon file="icon-warning" aria-hidden="true" ng-if="!sub_component.Functional"></icon>
{{sub_component.title}}
</p>
</div>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 6f2b2d2..c65a9dd 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -57,7 +57,10 @@
<tbody class="sensors__tbody">
<tr class="sensors__tbody-row" ng-repeat="sensor in data|filter:filterBySeverity|filter:filterBySearchTerms|orderBy:'+custom_order' as filteredSensorData">
<th class="sensors__tbody-header">
- <span class="icon" ng-class="{'icon__critical': sensor.status == 'critical', 'icon__warning': sensor.status == 'warning', 'icon__normal': sensor.status == 'normal'}" aria-label="Sensor status: {{sensor.status}}" ></span>
+ <status-icon status="{{ sensor.status == 'critical' ? 'error' :
+ sensor.status == 'warning' ? 'warn' : null }}"
+ aria-label="Sensor status: {{sensor.status}}">
+ </status-icon>
<span>{{sensor.title}}</span>
</th>
<td class="sensors__tbody-cell">
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index c9efd49..6912f04 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -72,9 +72,6 @@
background: $background-02;
padding: 0.5rem 1rem;
font-weight: 700;
- .icon.icon__normal {
- display: none;
- }
@include mediaQuery(medium) {
flex: 1;