diff options
-rw-r--r-- | install/ui/less/forms-override.less | 21 | ||||
-rw-r--r-- | install/ui/src/freeipa/widget.js | 179 |
2 files changed, 155 insertions, 45 deletions
diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less index 321eac246..241c99740 100644 --- a/install/ui/less/forms-override.less +++ b/install/ui/less/forms-override.less @@ -87,11 +87,20 @@ input[type="radio"]:checked:disabled + label { // lower radio's label width to keep it aligned with other labels when // radio is part of form label + .control-label { + input[type="checkbox"] + label, + input[type="radio"] + label { + width: 144px; + padding: 0 0 0 16px; + margin: 0; + } + } +} - input[type="radio"] + .control-label, - input[type="radio"] + .control-label { - width: 144px; - padding: 3px 0 0 16px; - margin: 0 0 3px 0; +.control-group .control-label { + position: relative; + + label { + margin-bottom: 0; } -}
\ No newline at end of file +} diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index b67ee72ad..778468965 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -3738,34 +3738,49 @@ IPA.collapsible_section = function(spec) { var that = IPA.composite_widget(spec); + that.collabsible = !!spec.collabsible; + that.show_header = spec.show_header === undefined ? true : spec.show_header; + that.create = function(container) { that.widget_create(container); - that.header = $('<h2/>', { + if (that.show_header) { + that.create_header(container); + } + + that.content_container = $('<div/>', { name: that.name, - title: that.label + 'class': 'details-section' }).appendTo(container); - that.icon = $('<span/>', { - name: 'icon', - 'class': 'icon section-expand '+IPA.expanded_icon - }).appendTo(that.header); - - that.header.append(' '); + that.create_content(); + }; - that.header.append(that.label); + that.create_header = function(container) { - that.content_container = $('<div/>', { - name: that.name, - 'class': 'details-section' + that.header = $('<h2/>', { + name: that.name }).appendTo(container); - that.header.click(function() { - var visible = that.content_container.is(":visible"); - that.toggle(!visible); - }); + if (that.collabsible) { + that.icon = $('<span/>', { + name: 'icon', + 'class': 'icon section-expand '+IPA.expanded_icon + }).appendTo(that.header); + + that.header.click(function() { + var visible = that.content_container.is(":visible"); + that.toggle(!visible); + }); + } + that.header.append(' '); + + that.header.append(that.label); + }; + + that.create_content = function() { that.composite_widget_create(that.content_container); }; @@ -3783,18 +3798,24 @@ IPA.collapsible_section = function(spec) { }; /** - * Section which can be collapsed - * @class - * @extends IPA.collapsible_section - */ -IPA.details_section = IPA.collapsible_section; - -/** * Base layout * @class */ + IPA.layout = function(spec) { - return {}; + + var that = {}; + + that.get_measurement_unit_text = function(widget) { + + if (widget.measurement_unit) { + var unit = text.get('@i18n:measurement_units.'+widget.measurement_unit); + return ' (' + unit + ')'; + } + return ''; + }; + + return that; }; /** @@ -3878,32 +3899,100 @@ IPA.table_layout = function(spec) { return that; }; +IPA.fluid_layout = function(spec) { + + var that = IPA.layout(spec); + + that.cont_cls = spec.cont_cls || 'form-horizontal'; + + that.create = function(widgets) { + + that.rows = $.ordered_map(); + + var container = $('<div/>', { 'class': that.cont_cls }); + + for (var i=0; i<widgets.length; i++) { + var widget = widgets[i]; + var group = that.create_control_group(container, widget); + var control = that.create_control(widget); + var label = that.create_label(widget); + + label.appendTo(group); + control.appendTo(group); + } + + return container; + }; + + that.create_control_group = function(container, widget) { + var group = $('<div/>', { 'class': 'control-group' }); + that.rows.put(widget.name, group); + + if (widget.hidden) { + group.css('display', 'none'); + } + + group.appendTo(container); + return group; + }; + + that.create_label = function(widget) { + var label_text = widget.label + that.get_measurement_unit_text(widget); + + var label_cont = $('<div/>', { 'class': 'control-label' }); + + $('<label/>', { + name: widget.name, + 'class': '', + text: label_text + }).appendTo(label_cont); + + // TODO: set `for` in label + // TODO: maintain errors and required + return label_cont; + }; + + that.create_control = function(widget) { + var controls = $('<div/>', { + 'class': 'controls' + }); + + var widget_container = $('<div/>', { + name: widget.name, + 'class': that.field_class + }).appendTo(controls); + + widget.create(widget_container); + return controls; + }; + + return that; +}; + /** * Collapsible section with table layout * @class - * @extends IPA.details_section + * @extends IPA.collapsible_section */ -IPA.details_table_section = function(spec) { +IPA.details_section = function(spec) { spec = spec || {}; - var that = IPA.details_section(spec); - that.layout = IPA.build(spec.layout || IPA.table_layout); + var that = IPA.collapsible_section(spec); + that.layout = IPA.build(spec.layout || IPA.fluid_layout); that.action_panel = that.build_child(spec.action_panel, {}, { $factory: IPA.action_panel }); that.rows = $.ordered_map(); - that.composite_widget_create = function(container) { - - that.widget_create(container); + that.create_content = function() { if (that.action_panel) { - that.action_panel.create(container); + that.action_panel.create(that.content_container); } var widgets = that.widgets.get_widgets(); - var table = that.layout.create(widgets); - table.appendTo(container); + var layout = that.layout.create(widgets); + layout.appendTo(that.content_container); that.rows = that.layout.rows; }; @@ -3921,8 +4010,20 @@ IPA.details_table_section = function(spec) { row.css('display', visible ? '' : 'none'); }; - that.table_section_create = that.composite_widget_create; + return that; +}; + +/** + * Collapsible section with table layout + * @class + * @extends IPA.details_section + */ +IPA.details_table_section = function(spec) { + + spec.collabsible = spec.collabsible === undefined ? true : spec.collabsible; + spec.layout = spec.layout || IPA.table_layout; + var that = IPA.details_section(spec); return that; }; @@ -3961,10 +4062,9 @@ IPA.hide_empty_row_policy = function (spec) { IPA.details_table_section_nc = function(spec) { spec = spec || {}; + spec.show_header = spec.show_header === undefined ? false : spec.show_header; - var that = IPA.details_table_section(spec); - - that.create = that.table_section_create; + var that = IPA.details_section(spec); return that; }; @@ -4867,8 +4967,9 @@ exp.register = function() { w.register('checkboxes', IPA.checkboxes_widget); w.register('combobox', IPA.combobox_widget); w.register('composite_widget', IPA.composite_widget); + w.register('details_section', IPA.details_section); w.register('details_table_section', IPA.details_table_section); - w.register('details_table_section_nc', IPA.details_table_section_nc); + w.register('details_table_section_nc', IPA.details_section); w.register('multiple_choice_section', IPA.multiple_choice_section); w.register('enable', IPA.enable_widget); w.register('entity_select', IPA.entity_select_widget); |