Increased icon size for certificate and Kerberos key status.

The <li> tag used for status icon has been replaced with <div>
tag shaped like a circle. The size can be adjusted using CSS.

4 files changed, 46 insertions, 47 deletions

diff --git a/install/static/certificate.js b/install/static/certificate.js
index 35b9fdf5..5d4313ef 100755
--- a/install/static/certificate.js
+++ b/install/static/certificate.js
@@ -416,8 +416,9 @@ function certificate_status_widget(spec) {
         var tr = $('<tr/>').appendTo(table);
 
         var td = $('<td/>').appendTo(tr);
-        $('<li/>', {
-            'class': 'certificate-status-valid'
+
+        $('<div/>', {
+            'class': 'status-icon status-valid'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -449,8 +450,8 @@ function certificate_status_widget(spec) {
             tr = $('<tr/>').appendTo(table);
 
             td = $('<td/>').appendTo(tr);
-            $('<li/>', {
-                'class': 'certificate-status-revoked'
+            $('<div/>', {
+                'class': 'status-icon status-revoked'
             }).appendTo(td);
 
             td = $('<td/>').appendTo(tr);
@@ -472,8 +473,8 @@ function certificate_status_widget(spec) {
         tr = $('<tr/>').appendTo(table);
 
         td = $('<td/>').appendTo(tr);
-        $('<li/>', {
-            'class': 'certificate-status-missing'
+        $('<div/>', {
+            'class': 'status-icon status-missing'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -491,9 +492,9 @@ function certificate_status_widget(spec) {
 
         that.widget_setup(container);
 
-        that.valid = $('li.certificate-status-valid', that.container);
-        that.revoked = $('li.certificate-status-revoked', that.container);
-        that.missing = $('li.certificate-status-missing', that.container);
+        that.valid = $('.status-valid', that.container);
+        that.revoked = $('.status-revoked', that.container);
+        that.missing = $('.status-missing', that.container);
 
         var button = $('input[name=get]', that.container);
         that.get_button = ipa_button({
@@ -573,14 +574,14 @@ function certificate_status_widget(spec) {
     };
 
     function set_status(status, revocation_reason) {
-        that.valid.toggleClass('certificate-status-active', status == CERTIFICATE_STATUS_VALID);
-        that.missing.toggleClass('certificate-status-active', status == CERTIFICATE_STATUS_MISSING);
+        that.valid.toggleClass('status-valid-active', status == CERTIFICATE_STATUS_VALID);
+        that.missing.toggleClass('status-missing-active', status == CERTIFICATE_STATUS_MISSING);
 
         that.get_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
         that.view_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
 
         if (!that.is_selfsign()) {
-            that.revoked.toggleClass('certificate-status-active', status == CERTIFICATE_STATUS_REVOKED);
+            that.revoked.toggleClass('status-revoked-active', status == CERTIFICATE_STATUS_REVOKED);
             that.revoke_button.css('visibility', status == CERTIFICATE_STATUS_VALID ? 'visible' : 'hidden');
             that.revocation_reason.html(revocation_reason == undefined ? '' : CRL_REASON[revocation_reason]);
             that.restore_button.css('visibility', revocation_reason == 6 ? 'visible' : 'hidden');
diff --git a/install/static/host.js b/install/static/host.js
index 708da868..be96d79a 100644
--- a/install/static/host.js
+++ b/install/static/host.js
@@ -219,8 +219,8 @@ function host_provisioning_status_widget(spec) {
         var tr = $('<tr/>').appendTo(table);
 
         var td = $('<td/>').appendTo(tr);
-        var li = $('<li/>', {
-            'class': 'key-status-valid'
+        $('<div/>', {
+            'class': 'status-icon status-valid'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -237,8 +237,8 @@ function host_provisioning_status_widget(spec) {
         tr = $('<tr/>').appendTo(table);
 
         td = $('<td/>').appendTo(tr);
-        li = $('<li/>', {
-            'class': 'key-status-missing'
+        $('<div/>', {
+            'class': 'status-icon status-missing'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -272,8 +272,8 @@ function host_provisioning_status_widget(spec) {
 
         that.widget_setup(container);
 
-        that.valid = $('li.key-status-valid', that.container);
-        that.missing = $('li.key-status-missing', that.container);
+        that.valid = $('.status-valid', that.container);
+        that.missing = $('.status-missing', that.container);
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = ipa_button({
@@ -375,8 +375,8 @@ function host_provisioning_status_widget(spec) {
     };
 
     function set_status(status) {
-        that.valid.toggleClass('key-status-active', status == 'valid');
-        that.missing.toggleClass('key-status-active', status == 'missing');
+        that.valid.toggleClass('status-valid-active', status == 'valid');
+        that.missing.toggleClass('status-missing-active', status == 'missing');
 
         that.unprovision_button.css('visibility', status == 'valid' ? 'visible' : 'hidden');
         that.otp_input.css('visibility', status == 'missing' ? 'visible' : 'hidden');
diff --git a/install/static/ipa.css b/install/static/ipa.css
index b8934426..38b68dd0 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -590,37 +590,35 @@ a.action-button-disabled {
 .strikethrough { text-decoration: line-through; }
 
 
-.key-status-valid {
-    list-style-type: circle;
-    color: #008000;
+.status-icon {
+    width: 0.5em;
+    height: 0.5em;
+    -webkit-border-radius: 0.5em;
+    -moz-border-radius: 0.5em;
 }
 
-.key-status-missing {
-    list-style-type: circle;
-    color: #daa520;
+.status-valid {
+    border: 0.2em solid #008000;
 }
 
-.key-status-active {
-    list-style-type: disc;
+.status-valid-active {
+    background-color: #008000;
 }
 
-.certificate-status-valid {
-    list-style-type: circle;
-    color: #008000;
+.status-revoked {
+    border: 0.2em solid #ff0000;
 }
 
-.certificate-status-revoked {
-    list-style-type: circle;
-    color: #ff0000;
+.status-revoked-active {
+    background-color: #ff0000;
 }
 
-.certificate-status-missing {
-    list-style-type: circle;
-    color: #daa520;
+.status-missing {
+    border: 0.2em solid #daa520;
 }
 
-.certificate-status-active {
-    list-style-type: disc;
+.status-missing-active {
+    background-color: #daa520;
 }
 
 dl.modal {
diff --git a/install/static/service.js b/install/static/service.js
index 4286469e..12387b3f 100644
--- a/install/static/service.js
+++ b/install/static/service.js
@@ -271,8 +271,8 @@ function service_provisioning_status_widget(spec) {
         var tr = $('<tr/>').appendTo(table);
 
         var td = $('<td/>').appendTo(tr);
-        var li = $('<li/>', {
-            'class': 'key-status-valid'
+        $('<div/>', {
+            'class': 'status-icon status-valid'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -289,8 +289,8 @@ function service_provisioning_status_widget(spec) {
         tr = $('<tr/>').appendTo(table);
 
         td = $('<td/>').appendTo(tr);
-        li = $('<li/>', {
-            'class': 'key-status-missing'
+        $('<div/>', {
+            'class': 'status-icon status-missing'
         }).appendTo(td);
 
         td = $('<td/>').appendTo(tr);
@@ -301,8 +301,8 @@ function service_provisioning_status_widget(spec) {
 
         that.widget_setup(container);
 
-        that.valid = $('li.key-status-valid', that.container);
-        that.missing = $('li.key-status-missing', that.container);
+        that.valid = $('.status-valid', that.container);
+        that.missing = $('.status-missing', that.container);
 
         var button = $('input[name=unprovision]', that.container);
         that.unprovision_button = ipa_button({
@@ -356,8 +356,8 @@ function service_provisioning_status_widget(spec) {
     };
 
     function set_status(status) {
-        that.valid.toggleClass('key-status-active', status == 'valid');
-        that.missing.toggleClass('key-status-active', status == 'missing');
+        that.valid.toggleClass('status-valid-active', status == 'valid');
+        that.missing.toggleClass('status-missing-active', status == 'missing');
 
         that.unprovision_button.css('visibility', status == 'valid' ? 'visible' : 'hidden');
     }