Added icons for status column.

The status formatter was modified to show enabled/disabled icon
before the status text.

The format classes were renamed to formatter to avoid confusion
with the format() method. A new parameter 'type' was added to the
formatter to determine the output type (e.g. text/html).

Ticket #1996

11 files changed, 61 insertions, 28 deletions

diff --git a/install/ui/dns.js b/install/ui/dns.js
index 65c331f5b..edd9274c6 100644
--- a/install/ui/dns.js
+++ b/install/ui/dns.js
@@ -51,7 +51,7 @@ IPA.dns.zone_entity = function(spec) {
                 {
                     name: 'idnszoneactive',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 }
             ]
         }).
diff --git a/install/ui/facet.js b/install/ui/facet.js
index 150c3e8fa..6247ebde6 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -628,7 +628,7 @@ IPA.table_facet = function(spec) {
 
         var value = record[attribute];
         var column = that.table.get_column(attribute);
-        if (column.format) value = column.format.parse(value);
+        if (column.formatter) value = column.formatter.parse(value);
 
         that.table.set_row_enabled(tr, value);
     };
diff --git a/install/ui/hbac.js b/install/ui/hbac.js
index bff2af30c..6bd63d4ec 100644
--- a/install/ui/hbac.js
+++ b/install/ui/hbac.js
@@ -44,7 +44,7 @@ IPA.hbac.rule_entity = function(spec) {
                 {
                     name: 'ipaenabledflag',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 },
                 'description'
             ]
diff --git a/install/ui/hbactest.js b/install/ui/hbactest.js
index e9b02a14c..0e77083ca 100644
--- a/install/ui/hbactest.js
+++ b/install/ui/hbactest.js
@@ -51,7 +51,7 @@ IPA.hbac.test_entity = function(spec) {
                 {
                     name: 'nsaccountlock',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format({
+                    formatter: IPA.boolean_status_formatter({
                         invert_value: true
                     })
                 }
@@ -70,7 +70,7 @@ IPA.hbac.test_entity = function(spec) {
                 {
                     name: 'has_keytab',
                     label: IPA.messages.objects.host.enrolled,
-                    format: IPA.boolean_format()
+                    formatter: IPA.boolean_formatter()
                 }
             ]
         }).
@@ -99,7 +99,7 @@ IPA.hbac.test_entity = function(spec) {
                 {
                     name: 'has_keytab',
                     label: IPA.messages.objects.host.enrolled,
-                    format: IPA.boolean_format()
+                    formatter: IPA.boolean_formatter()
                 }
             ]
         }).
@@ -116,7 +116,7 @@ IPA.hbac.test_entity = function(spec) {
                 {
                     name: 'ipaenabledflag',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 },
                 'description'
             ]
@@ -134,12 +134,12 @@ IPA.hbac.test_entity = function(spec) {
                 {
                     name: 'matched',
                     label: IPA.messages.objects.hbactest.matched,
-                    format: IPA.boolean_format()
+                    formatter: IPA.boolean_formatter()
                 },
                 {
                     name: 'ipaenabledflag',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 },
                 'description'
             ]
diff --git a/install/ui/host.js b/install/ui/host.js
index b6b1ebf39..12748f673 100644
--- a/install/ui/host.js
+++ b/install/ui/host.js
@@ -40,7 +40,7 @@ IPA.host.entity = function(spec) {
                 {
                     name: 'has_keytab',
                     label: IPA.messages.objects.host.enrolled,
-                    format: IPA.boolean_format()
+                    formatter: IPA.boolean_formatter()
                 }
             ]
         }).
@@ -467,11 +467,11 @@ IPA.field_factories['host_dnsrecord_entity_link'] = IPA.host_dnsrecord_entity_li
 IPA.widget_factories['host_dnsrecord_entity_link'] = IPA.link_widget;
 
 /* Take an LDAP format date in UTC and format it */
-IPA.utc_date_column_format = function(spec) {
+IPA.utc_date_column_formatter = function(spec) {
 
     spec = spec || {};
 
-    var that = IPA.format(spec);
+    var that = IPA.formatter(spec);
 
     that.format = function(value) {
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 3ebfc3413..1d754ea83 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -169,6 +169,18 @@ body {
     margin: -4px 0 0 1px;
 }
 
+.enabled-icon {
+    background-image: url(images/ui-icons_222222_256x240.png);
+    background-position: -64px -144px;
+    margin: -4px 0 0 1px;
+}
+
+.disabled-icon {
+    background-image: url(images/ui-icons_bbbbbb_256x240.png);
+    background-position: -64px -128px;
+    margin: -4px 0 0 1px;
+}
+
 .register-icon {
     background: url(images/entitle-register.png);
     margin: -4px 0 0 1px;
diff --git a/install/ui/rule.js b/install/ui/rule.js
index 720df3c0f..f2d7c6dd1 100644
--- a/install/ui/rule.js
+++ b/install/ui/rule.js
@@ -122,7 +122,7 @@ IPA.rule_association_table_widget = function(spec) {
                     name: that.external,
                     label: IPA.messages.objects.sudorule.external,
                     entity: that.other_entity,
-                    format: IPA.boolean_format(),
+                    formatter: IPA.boolean_formatter(),
                     width: '200px'
                 });
             }
diff --git a/install/ui/selinux.js b/install/ui/selinux.js
index 050659a67..8f800d7de 100644
--- a/install/ui/selinux.js
+++ b/install/ui/selinux.js
@@ -43,7 +43,7 @@ IPA.selinux.selinuxusermap_entity = function(spec) {
                 {
                     name: 'ipaenabledflag',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 },
                 'description'
             ]
diff --git a/install/ui/sudo.js b/install/ui/sudo.js
index 78af5fce1..e343d6a4c 100644
--- a/install/ui/sudo.js
+++ b/install/ui/sudo.js
@@ -42,7 +42,7 @@ IPA.sudo.rule_entity = function(spec) {
                 {
                     name: 'ipaenabledflag',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format()
+                    formatter: IPA.boolean_status_formatter()
                 },
                 'description'
             ]
diff --git a/install/ui/user.js b/install/ui/user.js
index 2466b8801..a0cecc7b9 100644
--- a/install/ui/user.js
+++ b/install/ui/user.js
@@ -44,7 +44,7 @@ IPA.user.entity = function(spec) {
                 {
                     name: 'nsaccountlock',
                     label: IPA.messages.status.label,
-                    format: IPA.boolean_status_format({
+                    formatter: IPA.boolean_status_formatter({
                         invert_value: true
                     })
                 },
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 21259ff85..5ab28cb66 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -950,12 +950,14 @@ IPA.textarea_widget = function (spec) {
     return that;
 };
 
-IPA.format = function(spec) {
+IPA.formatter = function(spec) {
 
     spec = spec || {};
 
     var that = {};
 
+    that.type = spec.type; // default is text
+
     // parse attribute value into a normalized value
     that.parse = function(value) {
         return value;
@@ -969,11 +971,11 @@ IPA.format = function(spec) {
     return that;
 };
 
-IPA.boolean_format = function(spec) {
+IPA.boolean_formatter = function(spec) {
 
     spec = spec || {};
 
-    var that = IPA.format(spec);
+    var that = IPA.formatter(spec);
 
     that.true_value = spec.true_value || IPA.messages['true'];
     that.false_value = spec.false_value || IPA.messages['false'];
@@ -1025,18 +1027,29 @@ IPA.boolean_format = function(spec) {
         return value;
     };
 
+    that.boolean_formatter_parse = that.parse;
+    that.boolean_formatter_format = that.format;
+
     return that;
 };
 
-IPA.boolean_status_format = function(spec) {
+IPA.boolean_status_formatter = function(spec) {
 
     spec = spec || {};
 
-    var that = IPA.boolean_format(spec);
+    var that = IPA.boolean_formatter(spec);
 
     that.true_value = spec.true_value || IPA.messages.status.enabled;
     that.false_value = spec.false_value || IPA.messages.status.disabled;
     that.show_false = true;
+    that.type = 'html';
+
+    that.format = function(value) {
+        var status = value ? 'enabled' : 'disabled';
+        var formatted_value = that.boolean_formatter_format(value);
+        formatted_value = '<span class=\"icon '+status+'-icon\"/> '+formatted_value;
+        return formatted_value;
+    };
 
     return that;
 };
@@ -1057,7 +1070,7 @@ IPA.column = function (spec) {
     that.width = spec.width;
     that.primary_key = spec.primary_key;
     that.link = spec.link;
-    that.format = spec.format;
+    that.formatter = spec.formatter;
 
     if (!that.entity) {
         throw {
@@ -1071,23 +1084,31 @@ IPA.column = function (spec) {
         container.empty();
 
         var value = record[that.name];
-        if (that.format) {
-            value = that.format.parse(value);
-            value = that.format.format(value);
+        var type;
+        if (that.formatter) {
+            value = that.formatter.parse(value);
+            value = that.formatter.format(value);
+            type = that.formatter.type;
         }
         value = value ? value.toString() : '';
 
+        var c;
         if (that.link && !suppress_link) {
-            $('<a/>', {
+            c = $('<a/>', {
                 href: '#'+value,
-                text: value,
                 click: function() {
                     return that.link_handler(value);
                 }
             }).appendTo(container);
 
         } else {
-            container.text(value);
+            c = container;
+        }
+
+        if (type === 'html') {
+            c.html(value);
+        } else {
+            c.text(value);
         }
     };