From 33359d25ef2e18aed854ee7ccd514c3a05c92c46 Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Fri, 29 Nov 2013 13:10:30 +0100 Subject: Use fluid layout in host adder dialog fqdn widget --- install/ui/less/forms-override.less | 5 +++ install/ui/src/freeipa/host.js | 85 ++++++++++++++----------------------- install/ui/src/freeipa/widget.js | 17 ++++++-- 3 files changed, 49 insertions(+), 58 deletions(-) diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less index 4c3d2162d..ac442bb0b 100644 --- a/install/ui/less/forms-override.less +++ b/install/ui/less/forms-override.less @@ -149,6 +149,11 @@ input[type="radio"]:disabled + label { color: #1d85d9; } +.row-fluid .control-group.required .control-label label:after { + position: relative; + right: -2px; +} + @media (max-width: 480px) { .control-group.required .control-label label:after { position: relative; diff --git a/install/ui/src/freeipa/host.js b/install/ui/src/freeipa/host.js index a96fc9823..18167f24b 100644 --- a/install/ui/src/freeipa/host.js +++ b/install/ui/src/freeipa/host.js @@ -316,53 +316,15 @@ IPA.host_fqdn_widget = function(spec) { var hostname = that.widgets.get_widget('hostname'); var dnszone = that.widgets.get_widget('dnszone'); - var table = $('', { - 'class': 'fqdn' - }).appendTo(that.container); - - var tr = $('').appendTo(table); - - var th = $('').appendTo(table); - - var td = $('
', { - 'class': 'hostname', - title: hostname.label, - text: hostname.label - }).appendTo(tr); - - $('', { - 'class': 'required-indicator', - text: IPA.required_indicator - }).appendTo(th); - - th = $('', { - 'class': 'dnszone', - title: dnszone.label, - text: dnszone.label - }).appendTo(tr); - - $('', { - 'class': 'required-indicator', - text: IPA.required_indicator - }).appendTo(th); - - tr = $('
', { - 'class': 'hostname' - }).appendTo(tr); - - var widget_cont = $('
', { - name: hostname.name - }).appendTo(td); - hostname.create(widget_cont); - - td = $('
', { - 'class': 'dnszone' - }).appendTo(tr); - - widget_cont = $('
', { - name: dnszone.name - }).appendTo(td); - dnszone.create(widget_cont); + var layout = IPA.fluid_layout({ + cont_cls: 'row-fluid', + group_cls: 'control-group span6', + widget_cls: 'control', + label_cls: 'control-label' + }); + + var html = layout.create([hostname, dnszone]); + that.container.append(html); var hostname_input = $('input', hostname.container); var dnszone_input = $('input', dnszone.container); @@ -392,19 +354,24 @@ IPA.host_fqdn_field = function(spec) { var that = IPA.field(spec); - that.validate_required = function() { - var hostname = that.hostname_widget.save(); - var dnszone = that.dns_zone_widget.save(); + that.has_value = function(widget) { + + var value = widget.save(); + var has_value = !!value.length && value[0] !== ''; + return has_value; + }; + + that.validate_required = function() { var valid = true; - if(!hostname.length || hostname[0] === '') { + if (!that.has_value(that.hostname_widget)) { that.hostname_widget.show_error(text.get('@i18n:widget.validation.required')); that.valid = valid = false; } - if(!dnszone.length || dnszone[0] === '') { + if (!that.has_value(that.dns_zone_widget)) { that.dns_zone_widget.show_error(text.get('@i18n:widget.validation.required')); that.valid = valid = false; } @@ -413,8 +380,12 @@ IPA.host_fqdn_field = function(spec) { }; that.hide_error = function() { - that.hostname_widget.hide_error(); - that.dns_zone_widget.hide_error(); + if (that.has_value(that.hostname_widget)) { + that.hostname_widget.hide_error(); + } + if (that.has_value(that.dns_zone_widget)) { + that.dns_zone_widget.hide_error(); + } }; that.save = function(record) { @@ -440,6 +411,12 @@ IPA.host_fqdn_field = function(spec) { that.widget = that.container.widgets.get_widget(that.widget_name); that.hostname_widget = that.widget.widgets.get_widget('hostname'); that.dns_zone_widget = that.widget.widgets.get_widget('dnszone'); + that.hostname_widget.value_changed.attach(that.child_value_changed); + that.dns_zone_widget.value_changed.attach(that.child_value_changed); + }; + + that.child_value_changed = function() { + that.validate(); }; return that; diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index 28a068bfb..9ea5ea0e0 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -219,6 +219,12 @@ IPA.input_widget = function(spec) { */ that.height = spec.height; + /** + * Widget is required + * @property {boolean} + */ + that.required = spec.required; + /** * Enable undo button showing. Undo button is displayed when user * modifies data. @@ -4006,11 +4012,14 @@ IPA.table_layout = function(spec) { return that; }; -IPA.fluid_layout = function(spec) { +exp.fluid_layout = IPA.fluid_layout = function(spec) { var that = IPA.layout(spec); that.cont_cls = spec.cont_cls || 'form-horizontal'; + that.widget_cls = spec.widget_cls || 'controls'; + that.label_cls = spec.label_cls || 'control-label'; + that.group_cls = spec.group_cls || 'control-group'; that.create = function(widgets) { @@ -4035,7 +4044,7 @@ IPA.fluid_layout = function(spec) { }; that.create_control_group = function(container, widget) { - var group = $('
', { 'class': 'control-group' }); + var group = $('
', { 'class': that.group_cls }); that.rows.put(widget.name, group); if (widget.hidden) { @@ -4049,7 +4058,7 @@ IPA.fluid_layout = function(spec) { that.create_label = function(widget) { var label_text = widget.label + that.get_measurement_unit_text(widget); - var label_cont = $('
', { 'class': 'control-label' }); + var label_cont = $('
', { 'class': that.label_cls }); var label_el = $('