diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2013-10-17 15:36:09 +0200 |
---|---|---|
committer | Martin Kosek <mkosek@redhat.com> | 2014-01-21 12:04:02 +0100 |
commit | 4ae69b99b22f50b9bc31d60126bb0dc805c7b11b (patch) | |
tree | 57f3dc34c971ef9fa3a8386d4154ba61c277373e /install/ui | |
parent | 9a7e65100c4d193248ef19d5a79300e14c99fabc (diff) | |
download | freeipa-4ae69b99b22f50b9bc31d60126bb0dc805c7b11b.tar.gz freeipa-4ae69b99b22f50b9bc31d60126bb0dc805c7b11b.tar.xz freeipa-4ae69b99b22f50b9bc31d60126bb0dc805c7b11b.zip |
Always create radio and checkbox with label
https://fedorahosted.org/freeipa/ticket/3904
Diffstat (limited to 'install/ui')
-rw-r--r-- | install/ui/less/forms-override.less | 6 | ||||
-rw-r--r-- | install/ui/src/freeipa/aci.js | 23 | ||||
-rw-r--r-- | install/ui/src/freeipa/dns.js | 8 | ||||
-rw-r--r-- | install/ui/src/freeipa/host.js | 8 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 145 |
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 || ' ', 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 = ' '; + } + + 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(){ |