Status widgets icons

https://fedorahosted.org/freeipa/ticket/3904

4 files changed, 82 insertions, 137 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 7ceaf84e8..fa9886ba2 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -776,43 +776,6 @@ textarea.certificate {
     height: 250px;
 }
 
-table.certificate-status {
-    line-height: 2;
-}
-
-table.kerberos-key-status {
-    line-height: 2;
-}
-
-.status-icon {
-    vertical-align: bottom;
-}
-
-.status-valid {
-    background-image: url(images/check-icon.png);
-    border: 0.2em solid #008000;
-}
-
-.status-valid-active {
-    background-color: #008000;
-}
-
-.status-revoked {
-    border: 0.2em solid #ff0000;
-}
-
-.status-revoked-active {
-    background-color: #ff0000;
-}
-
-.status-missing {
-    border: 0.2em solid #daa520;
-}
-
-.status-missing-active {
-    background-color: #daa520;
-}
-
 .error-message-hinted {
     color: red;
     padding-top: 0.5em;
@@ -1092,6 +1055,10 @@ table.scrollable tbody {
     width: 180px;
 }
 
+.certificate-status {
+    display: inline-block;
+}
+
 /* Info and simple pages (not main app) */
 
 body.info-page  {
diff --git a/install/ui/src/freeipa/certificate.js b/install/ui/src/freeipa/certificate.js
index 5da1de813..bd9f7459a 100755
--- a/install/ui/src/freeipa/certificate.js
+++ b/install/ui/src/freeipa/certificate.js
@@ -823,60 +823,44 @@ IPA.cert.status_widget = function(spec) {
 
         that.widget_create(container);
 
-        that.status_valid = $('<div/>', {
-            name: 'certificate-valid',
-            style: 'display: none;'
-        }).appendTo(container);
-
-        $('<img/>', {
-            src: 'images/check-icon.png',
-            style: 'float: left;',
-            'class': 'status-icon'
-        }).appendTo(that.status_valid);
-
-        var content_div = $('<div/>', {
-            style: 'float: left;'
-        }).appendTo(that.status_valid);
+        that.status_valid = that.create_status('certificate-valid',
+                                               text.get('@i18n:objects.cert.valid'),
+                                               'fa fa-check');
+        that.status_valid.appendTo(container);
 
-        content_div.append('<b>'+text.get('@i18n:objects.cert.valid')+'</b>');
+        that.status_revoked = that.create_status('certificate-revoked',
+                                               text.get('@i18n:objects.cert.revoked'),
+                                               'fa fa-warning');
+        that.status_revoked.appendTo(container);
 
-        that.status_revoked = $('<div/>', {
-            name: 'certificate-revoked',
-            style: 'display: none;'
-        }).appendTo(container);
-
-        $('<img/>', {
-            src: 'images/caution-icon.png',
-            style: 'float: left;',
-            'class': 'status-icon'
+        that.revocation_reason = $('<span/>', {
+            'name': 'revocation_reason'
         }).appendTo(that.status_revoked);
 
-        content_div = $('<div/>', {
-            style: 'float: left;'
-        }).appendTo(that.status_revoked);
+        that.status_missing = that.create_status('certificate-missing',
+                                               text.get('@i18n:objects.cert.missing'),
+                                               'fa fa-warning');
+        that.status_missing.appendTo(container);
+    };
 
-        content_div.append('<b>'+text.get('@i18n:objects.cert.revoked')+'</b>');
-        content_div.append(' ');
-        that.revocation_reason = $('<span/>', {
-            'name': 'revocation_reason'
-        }).appendTo(content_div);
+    that.create_status = function(name, text, icon) {
 
-        that.status_missing = $('<div/>', {
-            name: 'certificate-missing',
+        var container = $('<div>', {
+            name: name,
             style: 'display: none;'
+        });
+
+        var status = $('<label/>', {
+            'class': 'certificate-status'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/caution-icon.png',
-            style: 'float: left;',
-            'class': 'status-icon'
-        }).appendTo(that.status_missing);
+        $('<i/>', {
+            'class': icon
+        }).appendTo(status);
 
-        content_div = $('<div/>', {
-            style: 'float: left;'
-        }).appendTo(that.status_missing);
+        status.append(" " +text);
 
-        content_div.append('<b>'+text.get('@i18n:objects.cert.missing')+'</b>');
+        return container;
     };
 
     that.update = function(certificate) {
@@ -911,7 +895,9 @@ IPA.cert.status_widget = function(spec) {
             that.status_revoked.css('display', status === IPA.cert.CERTIFICATE_STATUS_REVOKED ? '' : 'none');
 
             var reason = IPA.cert.CRL_REASON[revocation_reason];
-            that.revocation_reason.html(revocation_reason === undefined || reason === null ? '' : text.get('@i18n:objects.cert.'+reason));
+            var reason_text = revocation_reason === undefined || reason === null ? '' : text.get('@i18n:objects.cert.'+reason);
+            reason_text = ' ('+reason_text+')';
+            that.revocation_reason.html(reason_text);
         }
     };
 
diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js
index 1786c9eb6..a96fc9823 100644
--- a/install/ui/src/freeipa/host.js
+++ b/install/ui/src/freeipa/host.js
@@ -589,33 +589,31 @@ IPA.host_keytab_widget = function(spec) {
 
         that.widget_create(container);
 
-        that.missing_span = $('<span/>', {
+        that.missing_el = $('<label/>', {
             name: 'missing',
             style: 'display: none;'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/caution-icon.png',
-            'class': 'status-icon'
-        }).appendTo(that.missing_span);
+        $('<i/>', {
+            'class': 'fa fa-warning'
+        }).appendTo(that.missing_el);
 
-        that.missing_span.append(' ');
+        that.missing_el.append(' ');
 
-        that.missing_span.append(text.get('@i18n:objects.host.keytab_missing'));
+        that.missing_el.append(text.get('@i18n:objects.host.keytab_missing'));
 
-        that.present_span = $('<span/>', {
+        that.present_el = $('<label/>', {
             name: 'present',
             style: 'display: none;'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/check-icon.png',
-            'class': 'status-icon'
-        }).appendTo(that.present_span);
+        $('<i/>', {
+            'class': 'fa fa-check'
+        }).appendTo(that.present_el);
 
-        that.present_span.append(' ');
+        that.present_el.append(' ');
 
-        that.present_span.append(text.get('@i18n:objects.host.keytab_present'));
+        that.present_el.append(text.get('@i18n:objects.host.keytab_present'));
     };
 
     that.update = function(values) {
@@ -625,13 +623,13 @@ IPA.host_keytab_widget = function(spec) {
     };
 
     that.clear = function() {
-        that.present_span.css('display', 'none');
-        that.missing_span.css('display', 'none');
+        that.present_el.css('display', 'none');
+        that.missing_el.css('display', 'none');
     };
 
     function set_status(status) {
-        that.present_span.css('display', status == 'present' ? 'inline' : 'none');
-        that.missing_span.css('display', status == 'missing' ? 'inline' : 'none');
+        that.present_el.css('display', status == 'present' ? '' : 'none');
+        that.missing_el.css('display', status == 'missing' ? '' : 'none');
     }
 
     return that;
@@ -753,32 +751,30 @@ IPA.host_password_widget = function(spec) {
 
         that.widget_create(container);
 
-        that.missing_span = $('<span/>', {
+        that.missing_el = $('<label/>', {
             name: 'missing'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/caution-icon.png',
-            'class': 'status-icon'
-        }).appendTo(that.missing_span);
+        $('<i/>', {
+            'class': 'fa fa-warning'
+        }).appendTo(that.missing_el);
 
-        that.missing_span.append(' ');
+        that.missing_el.append(' ');
 
-        that.missing_span.append(text.get('@i18n:objects.host.password_missing'));
+        that.missing_el.append(text.get('@i18n:objects.host.password_missing'));
 
-        that.present_span = $('<span/>', {
+        that.present_el = $('<label/>', {
             name: 'present',
             style: 'display: none;'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/check-icon.png',
-            'class': 'status-icon'
-        }).appendTo(that.present_span);
+        $('<i/>', {
+            'class': 'fa fa-check'
+        }).appendTo(that.present_el);
 
-        that.present_span.append(' ');
+        that.present_el.append(' ');
 
-        that.present_span.append(text.get('@i18n:objects.host.password_present'));
+        that.present_el.append(text.get('@i18n:objects.host.password_present'));
     };
 
     that.update = function(values) {
@@ -788,8 +784,8 @@ IPA.host_password_widget = function(spec) {
     };
 
     that.clear = function() {
-        that.missing_span.css('display', 'none');
-        that.present_span.css('display', 'none');
+        that.missing_el.css('display', 'none');
+        that.present_el.css('display', 'none');
     };
 
     function set_status(status) {
@@ -797,11 +793,11 @@ IPA.host_password_widget = function(spec) {
         that.status = status;
 
         if (status == 'missing') {
-            that.missing_span.css('display', 'inline');
-            that.present_span.css('display', 'none');
+            that.missing_el.css('display', '');
+            that.present_el.css('display', 'none');
         } else {
-            that.missing_span.css('display', 'none');
-            that.present_span.css('display', 'inline');
+            that.missing_el.css('display', 'none');
+            that.present_el.css('display', '');
         }
     }
 
diff --git a/install/ui/src/freeipa/service.js b/install/ui/src/freeipa/service.js
index 788cb95ba..241f22753 100644
--- a/install/ui/src/freeipa/service.js
+++ b/install/ui/src/freeipa/service.js
@@ -322,37 +322,33 @@ IPA.service_provisioning_status_widget = function (spec) {
 
         that.status_valid = $('<div/>', {
             name: 'kerberos-key-valid',
+            'class': 'provisioning-status',
             style: 'display: none;'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/check-icon.png',
-            style: 'float: left;',
-            'class': 'status-icon'
+        var content = $('<label/>', {
         }).appendTo(that.status_valid);
 
-        var content_div = $('<div/>', {
-            style: 'float: left;'
-        }).appendTo(that.status_valid);
-
-        content_div.append('<b>'+text.get('@i18n:objects.service.valid')+'</b>');
+        $('<i/>', {
+            'class': 'fa fa-check'
+        }).appendTo(content);
+        content.append(' ');
+        content.append(text.get('@i18n:objects.service.valid'));
 
         that.status_missing = $('<div/>', {
             name: 'kerberos-key-missing',
+            'class': 'provisioning-status',
             style: 'display: none;'
         }).appendTo(container);
 
-        $('<img/>', {
-            src: 'images/caution-icon.png',
-            style: 'float: left;',
-            'class': 'status-icon'
-        }).appendTo(that.status_missing);
-
-        content_div = $('<div/>', {
-            style: 'float: left;'
+        content = $('<label/>', {
         }).appendTo(that.status_missing);
 
-        content_div.append('<b>'+text.get('@i18n:objects.service.missing')+'</b>');
+        $('<i/>', {
+            'class': 'fa fa-warning'
+        }).appendTo(content);
+        content.append(' ');
+        content.append(text.get('@i18n:objects.service.missing'));
     };
 
     that.update = function(values) {