diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 0cd761fb0..689fa7f20 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -1138,9 +1138,9 @@ body.info-page {
}
.required-indicator {
- color: red;
+ color: #1d85d9;
font-weight: bold;
- font-size: 120%;
+ font-size: 125%;
}
.section-cell-label .required-indicator {
diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index 3b4ec6f42..7c356a576 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -115,6 +115,11 @@ input[type="radio"]:checked:disabled + label {
}
}
+// this style directly negates the same in forms.less
+.help-inline {
+ margin-top: 0;
+}
+
.control-group .control-label {
position: relative;
@@ -122,3 +127,22 @@ input[type="radio"]:checked:disabled + label {
margin-bottom: 0;
}
}
+
+// implicit required indicator
+.control-group.required .control-label label:after {
+ display: inline-block;
+ position: absolute;
+ right: -11px;
+ top: 0px;
+ font-size: 125%;
+ font-weight: bold;
+ content: '*';
+ color: #1d85d9;
+}
+
+@media (max-width: 480px) {
+ .control-group.required .control-label label:after {
+ position: relative;
+ right: -2px;
+ }
+}
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 8fb8908b0..b6cfdd6d4 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -25,6 +25,7 @@
define(['dojo/_base/array',
'dojo/_base/lang',
'dojo/Evented',
+ 'dojo/on',
'./builder',
'./ipa',
'./jquery',
@@ -32,7 +33,7 @@ define(['dojo/_base/array',
'./reg',
'./text'
],
- function(array, lang, Evented, builder, IPA, $, phases, reg, text) {
+ function(array, lang, Evented, on, builder, IPA, $, phases, reg, text) {
/**
* Widget module
@@ -279,7 +280,7 @@ IPA.input_widget = function(spec) {
$('', {
name: 'error_link',
- 'class': 'ui-state-error ui-corner-all',
+ 'class': 'help-inline',
style: 'display:none'
}).appendTo(container);
};
@@ -382,7 +383,7 @@ IPA.input_widget = function(spec) {
that.show_error = function(message) {
var error_link = that.get_error_link();
error_link.html(message);
- error_link.css('display', 'block');
+ error_link.css('display', '');
that.emit('error-show', { source: that, error: message });
};
@@ -788,6 +789,9 @@ IPA.multivalued_widget = function(spec) {
row.widget.undo_clicked.attach(function() {
that.on_child_undo_clicked(row);
});
+ on(row.widget, 'error-show', function() {
+ that.emit('error-show', { source: that });
+ });
row.remove_link = $('', {
name: 'remove',
@@ -3962,6 +3966,9 @@ IPA.fluid_layout = function(spec) {
label.appendTo(group);
control.appendTo(group);
+
+ that.register_state_handlers(widget);
+ that.update_state(group, widget);
}
return container;
@@ -3991,7 +3998,6 @@ IPA.fluid_layout = function(spec) {
}).appendTo(label_cont);
// TODO: set `for` in label
- // TODO: maintain errors and required
return label_cont;
};
@@ -4009,6 +4015,52 @@ IPA.fluid_layout = function(spec) {
return controls;
};
+ that.register_state_handlers = function(widget) {
+ on(widget, 'require-change', that.on_require_change);
+ on(widget, 'enabled-change', that.on_enabled_change);
+ on(widget, 'error-show', that.on_error_show);
+ on(widget, 'error-hide', that.on_error_hide);
+ };
+
+ that.on_enabled_change = function(event) {
+
+ var row = that._get_row(event);
+ if (!row) return;
+ row.toggleClass('disabled', !event.enabled);
+ };
+
+ that.on_require_change = function(event) {
+
+ var row = that._get_row(event);
+ if (!row) return;
+ row.toggleClass('required', !!event.required);
+ };
+
+ that.on_error_show = function(event) {
+
+ var row = that._get_row(event);
+ if (!row) return;
+ row.toggleClass('error', true);
+ };
+
+ that.on_error_hide= function(event) {
+
+ var row = that._get_row(event);
+ if (!row) return;
+ row.toggleClass('error', false);
+ };
+
+ that.update_state = function(row, widget) {
+ row.toggleClass('disabled', !widget.enabled);
+ row.toggleClass('required', !!widget.required);
+ };
+
+ that._get_row = function(event) {
+ var widget = event.source;
+ if (!widget) return null;
+ return that.rows.get(widget.name);
+ };
+
return that;
};