Certificate management alert icons implementation and alignment
- Replaces background image icons with icon directive
- Sizes and aligns icons in certificate table
TODO:
- Remove critical icon background image in separate commit
Signed-off-by: Dixsie Wolmers <dixsiew@gmail.com>
Change-Id: I2e10bc3f3432331b6dd9354dbcd0e32480894ece
diff --git a/app/assets/icons/icon-critical.svg b/app/assets/icons/icon-critical.svg
new file mode 100644
index 0000000..85a6736
--- /dev/null
+++ b/app/assets/icons/icon-critical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 2.3c4.3 0 7.7 3.5 7.7 7.7s-3.5 7.7-7.7 7.7-7.7-3.4-7.7-7.7S5.8 2.3 10 2.3m0-1.9C4.7.4.3 4.7.3 10.1s4.3 9.7 9.7 9.7 9.7-4.3 9.7-9.7S15.3.4 10 .4z" fill="#da1416"/><circle cx="10" cy="10" r="7.7" opacity=".4" fill="#da1416"/><path d="M4.5 4.5l11 11.1m0-11.1l-11 11.1" fill="none" stroke="#da1416" stroke-width="2" stroke-miterlimit="10"/></svg>
\ No newline at end of file
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
index 2b7d9b7..1a7d091 100644
--- a/app/common/directives/certificate.html
+++ b/app/common/directives/certificate.html
@@ -24,8 +24,16 @@
Valid until:
</div>
<div class="certificate__status-cell">
- <span class="inline" ng-class="{'icon__warning certificate__table__icon' : cert.isExpiring , 'icon__critical certificate__table__icon' : cert.isExpired}"
- ng-if="cert.isExpired || cert.isExpiring"></span>
+ <icon file="icon-critical.svg"
+ aria-label="certificate has expired"
+ class="certificate__status-icon"
+ ng-if="cert.isExpired">
+ </icon>
+ <icon file="icon-warning.svg"
+ aria-label="certificate will expire soon"
+ class="certificate__status-icon"
+ ng-if="cert.isExpiring">
+ </icon>
</div>
<div class="certificate__date-cell">
{{cert.ValidNotAfter | date:medium}}
diff --git a/app/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index 0eaa7c0..a7c57f2 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -80,6 +80,12 @@
}
display: none;
}
+ .certificate__status-icon {
+ width: 1.2em;
+ svg {
+ margin-bottom: .2em;
+ }
+ }
.certificate__buttons-cell {
@include mediaQuery(small) {
width: 10%;
