summaryrefslogtreecommitdiffstats
path: root/install
diff options
context:
space:
mode:
authorPetr Vobornik <pvoborni@redhat.com>2013-11-29 13:10:30 +0100
committerMartin Kosek <mkosek@redhat.com>2014-01-21 12:04:04 +0100
commit33359d25ef2e18aed854ee7ccd514c3a05c92c46 (patch)
tree4ca8e3662ce7895392ef1fc90c0d0603f91385ea /install
parent0b428b832636fead6e5bba35f44a71eec22ea22f (diff)
downloadfreeipa-33359d25ef2e18aed854ee7ccd514c3a05c92c46.tar.gz
freeipa-33359d25ef2e18aed854ee7ccd514c3a05c92c46.tar.xz
freeipa-33359d25ef2e18aed854ee7ccd514c3a05c92c46.zip
Use fluid layout in host adder dialog fqdn widget
Diffstat (limited to 'install')
-rw-r--r--install/ui/less/forms-override.less5
-rw-r--r--install/ui/src/freeipa/host.js85
-rw-r--r--install/ui/src/freeipa/widget.js17
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 = $('<table/>', {
- 'class': 'fqdn'
- }).appendTo(that.container);
-
- var tr = $('<tr/>').appendTo(table);
-
- var th = $('<th/>', {
- 'class': 'hostname',
- title: hostname.label,
- text: hostname.label
- }).appendTo(tr);
-
- $('<span/>', {
- 'class': 'required-indicator',
- text: IPA.required_indicator
- }).appendTo(th);
-
- th = $('<th/>', {
- 'class': 'dnszone',
- title: dnszone.label,
- text: dnszone.label
- }).appendTo(tr);
-
- $('<span/>', {
- 'class': 'required-indicator',
- text: IPA.required_indicator
- }).appendTo(th);
-
- tr = $('<tr/>').appendTo(table);
-
- var td = $('<td/>', {
- 'class': 'hostname'
- }).appendTo(tr);
-
- var widget_cont = $('<div/>', {
- name: hostname.name
- }).appendTo(td);
- hostname.create(widget_cont);
-
- td = $('<td/>', {
- 'class': 'dnszone'
- }).appendTo(tr);
-
- widget_cont = $('<div/>', {
- 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
@@ -220,6 +220,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.
* @property {boolean} undo=true
@@ -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 = $('<div/>', { 'class': 'control-group' });
+ var group = $('<div/>', { '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 = $('<div/>', { 'class': 'control-label' });
+ var label_cont = $('<div/>', { 'class': that.label_cls });
var label_el = $('<label/>', {
name: widget.name,
@@ -4073,7 +4082,7 @@ IPA.fluid_layout = function(spec) {
that.create_control = function(widget) {
var controls = $('<div/>', {
- 'class': 'controls'
+ 'class': that.widget_cls
});
var widget_container = $('<div/>', {