Always create radio and checkbox with label

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

5 files changed, 122 insertions, 68 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index 986a86d6f..321eac246 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -37,6 +37,12 @@ input[type="radio"] + label {
   background-position: center left;
 }
 
+input[type="checkbox"].standalone + label,
+input[type="radio"].standalone + label {
+  padding: 0;
+  width: 13px;
+}
+
 input[type="checkbox"] + label {
   background-image: url('../img/checkbutton-background.png');
 }
diff --git a/install/ui/src/freeipa/aci.js b/install/ui/src/freeipa/aci.js
index 1326f1b04..b848073b0 100644
--- a/install/ui/src/freeipa/aci.js
+++ b/install/ui/src/freeipa/aci.js
@@ -510,16 +510,17 @@ IPA.attributes_widget = function(spec) {
 
         var tr = $('<tr></tr>').appendTo($('thead', that.table));
 
+        var th = $('<th/>').appendTo(tr);
+        IPA.standalone_option({
+            type: "checkbox",
+            click: function() {
+                $('.aci-attribute', that.table).
+                    prop('checked', $(this).prop('checked'));
+                that.value_changed.notify([], that);
+            }
+        }, th);
+
         tr.append($('<th/>', {
-            html: $('<input/>', {
-                type: "checkbox",
-                click: function() {
-                    $('.aci-attribute', that.table).
-                        prop('checked', $(this).prop('checked'));
-                    that.value_changed.notify([], that);
-                }
-            })
-        })).append($('<th/>', {
             'class': 'aci-attribute-column',
             html: text.get('@i18n:objects.aci.attribute')
         }));
@@ -545,7 +546,7 @@ IPA.attributes_widget = function(spec) {
             var td =  $('<td/>').appendTo(tr);
             var name = that.get_input_name();
             var id = that._option_next_id + name;
-            td.append($('<input/>',{
+            IPA.standalone_option({
                 id: id,
                 type: 'checkbox',
                 name: name,
@@ -554,7 +555,7 @@ IPA.attributes_widget = function(spec) {
                 change: function() {
                     that.value_changed.notify([], that);
                 }
-            }));
+            }, td);
             td = $('<td/>').appendTo(tr);
             td.append($('<label/>',{
                 text: value,
diff --git a/install/ui/src/freeipa/dns.js b/install/ui/src/freeipa/dns.js
index 62b20e31c..71a3f5b82 100644
--- a/install/ui/src/freeipa/dns.js
+++ b/install/ui/src/freeipa/dns.js
@@ -428,13 +428,15 @@ IPA.dnszone_name_section = function(spec) {
             title: idnsname.label
         }).appendTo(tr);
 
+        idnsname.create_radio(td);
+
         var label = $('<label/>', {
             name: 'idnsname',
             'class': 'field-label',
             'for': idnsname.radio_id
         }).appendTo(td);
 
-        idnsname.create_radio(label);
+
 
         label.append(idnsname.label+':');
 
@@ -463,14 +465,14 @@ IPA.dnszone_name_section = function(spec) {
             title: name_from_ip.label
         }).appendTo(tr);
 
+        name_from_ip.create_radio(td);
+
         label = $('<label/>', {
             name: 'name_from_ip',
             'class': 'field-label',
             'for': name_from_ip.radio_id
         }).appendTo(td);
 
-        name_from_ip.create_radio(label);
-
         label.append(name_from_ip.label+':');
 
         name_from_ip.create_required(td);
diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js
index 663a39a2e..ef9687faf 100644
--- a/install/ui/src/freeipa/host.js
+++ b/install/ui/src/freeipa/host.js
@@ -486,15 +486,13 @@ IPA.host_deleter_dialog = function(spec) {
 
         var metadata = IPA.get_command_option('host_del', 'updatedns');
 
-        that.updatedns = $('<input/>', {
+        var updatedns = IPA.standalone_option({
             type: 'checkbox',
             name: 'updatedns',
             title: metadata.doc
-        }).appendTo(that.container);
-
-        that.container.append(' ');
+        }, that.container, metadata.doc);
 
-        that.container.append(metadata.doc);
+        that.updatedns = updatedns[0];
     };
 
     that.create_command = function() {
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index c6b4d379e..b67ee72ad 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -1102,7 +1102,7 @@ IPA.option_widget_base = function(spec, that) {
         }).appendTo(container);
 
         $('<label/>', {
-            text: option.label,
+            html: option.label || '&nbsp;',
             title: option.tooltip || that.tooltip,
             'for': id
         }).appendTo(container);
@@ -1445,6 +1445,51 @@ IPA.checkboxes_widget = function (spec) {
 };
 
 /**
+ * Creates input with properties defined by `spec` and an empty label which
+ * targets the input.
+ *
+ * Main purpose is to always create label tight with input[radio] or
+ * input[checkbox].
+ *
+ * - Creates checkbox if not type specified.
+ * - Adds them to container node if specified.
+ *
+ * @param {Object} spec
+ * @param {HTMLElement} [container]
+ * @param {string} [label] Label text
+ * @return {jQuery[]} [input, label]
+ */
+IPA.standalone_option = function(spec, container, label) {
+
+    spec = $.extend({}, spec);
+
+    var id = spec.id || IPA.html_util.get_next_id(spec.name);
+    spec.id = id;
+
+    spec.type = spec.type || 'checkbox';
+
+    var input = $('<input/>', spec);
+
+    if (!label) {
+        input.addClass('standalone');
+        label = '&nbsp;';
+    }
+
+    var label_el = $('<label/>', {
+        type: 'checkbox',
+        'for': id,
+        html: label
+    });
+
+    if (container) {
+        input.appendTo(container);
+        label_el.appendTo(container);
+    }
+
+    return [input, label_el];
+};
+
+/**
  * Select widget
  *
  * @class
@@ -2043,11 +2088,11 @@ IPA.table_widget = function (spec) {
             }).appendTo(tr);
 
             if (that.multivalued) {
-                var select_all_checkbox = $('<input/>', {
+                var select_all_checkbox = IPA.standalone_option({
                     type: 'checkbox',
                     name: that.name,
                     title: text.get('@i18n:search.select_all')
-                }).appendTo(th);
+                }, th)[0];
 
                 select_all_checkbox.change(function() {
                     if(select_all_checkbox.is(':checked')) {
@@ -2141,55 +2186,11 @@ IPA.table_widget = function (spec) {
             that.tbody.css('height', that.height);
         }
 
-        that.row = $('<tr/>');
-
-        var td;
-
-        if (that.selectable) {
-            td = $('<td/>', {
-                'style': 'width: '+ (IPA.checkbox_column_width + 7) +'px;'
-            }).appendTo(that.row);
-
-            if (that.multivalued) {
-                $('<input/>', {
-                    type: 'checkbox',
-                    name: that.name,
-                    value: ''
-                }).appendTo(td);
-            } else {
-                $('<input/>', {
-                    type: 'radio',
-                    name: that.name,
-                    value: ''
-                }).appendTo(td);
-            }
-        }
-
-        var width;
-
-        for (/* var */ i=0; i<columns.length; i++) {
-            /* var */ column = columns[i];
-
-            td = $('<td/>').appendTo(that.row);
-            if (column.width) {
-                width = parseInt(
-                        column.width.substring(0, column.width.length-2),10);
-                width += 7; //data cells lack right padding
-                width += 'px';
-                td.css('width', width);
-                td.css('max-width', width);
-            }
-
-            $('<div/>', {
-                'name': column.name
-            }).appendTo(td);
-        }
-
         that.tfoot = $('<tfoot/>').appendTo(that.table);
 
         tr = $('<tr/>').appendTo(that.tfoot);
 
-        td = $('<td/>', {
+        var td = $('<td/>', {
             colspan: columns.length + (that.selectable ? 1 : 0)
         }).appendTo(tr);
 
@@ -2250,6 +2251,52 @@ IPA.table_widget = function (spec) {
         that.set_enabled(that.enabled);
     };
 
+    /**
+     * Create empty row
+     */
+    that.create_row = function() {
+
+        var columns = that.columns.values;
+        var row = $('<tr/>');
+        var td;
+
+        if (that.selectable) {
+            td = $('<td/>', {
+                'style': 'width: '+ (IPA.checkbox_column_width + 7) +'px;'
+            }).appendTo(row);
+
+            var selectable_type = that.multivalued ? 'checkbox' : 'radio';
+            IPA.standalone_option({
+                type: selectable_type,
+                name: that.name,
+                value: ''
+            }, td);
+        }
+
+        var width;
+
+        for ( var  i=0; i<columns.length; i++) {
+
+            var column = columns[i];
+
+            td = $('<td/>').appendTo(row);
+            if (column.width) {
+                width = parseInt(
+                        column.width.substring(0, column.width.length-2),10);
+                width += 7; //data cells lack right padding
+                width += 'px';
+                td.css('width', width);
+                td.css('max-width', width);
+            }
+
+            $('<div/>', {
+                'name': column.name
+            }).appendTo(td);
+        }
+
+        return row;
+    };
+
     that.prev_page = function() {
         if (that.current_page > 1) {
             that.current_page--;
@@ -2389,7 +2436,7 @@ IPA.table_widget = function (spec) {
 
     that.add_record = function(record) {
 
-        var tr = that.row.clone();
+        var tr = that.create_row();
         tr.appendTo(that.tbody);
 
         $('input[name="'+that.name+'"]', tr).click(function(){