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; };