From 1e2c0562834d0ee3c3a7a815f5449befa4797a5a Mon Sep 17 00:00:00 2001 From: Petr Vobornik Date: Sep 29 2011 16:58:53 +0000 Subject: Fixed: Some widgets do not have space for validation error message https://fedorahosted.org/freeipa/ticket/1454 The following widgets should call create_error_link() to create a space to show validation error messages: IPA.checkbox_widget IPA.checkboxes_widget IPA.radio_widget IPA.select_widget IPA.table_widget IPA.attributes_widget IPA.rights_widget IPA.target_section (it's a widget) Solution: * added call to checkbox, checkboxes, radio, select, table, attributes widget * rights_widget inherits it from checkboxes_widget. * target_section IS NOT a widget as it doesn't inherit from widget. It's still a section, which shows different widgets based on its state. * table_widget displays error_link between pagination and summary. Additional: * added padding and unified font-weight for error message --- diff --git a/install/ui/aci.js b/install/ui/aci.js index 6fd4a52..e5b5491 100644 --- a/install/ui/aci.js +++ b/install/ui/aci.js @@ -276,6 +276,8 @@ IPA.attributes_widget = function(spec) { if (that.object_type) { that.populate(that.object_type); } + + that.create_error_link(container); }; that.load = function(record) { @@ -371,6 +373,10 @@ IPA.attributes_widget = function(spec) { } }; + that.show_undo = function() { + $(that.undo_span).css('display', 'inline-block'); + }; + return that; }; diff --git a/install/ui/ipa.css b/install/ui/ipa.css index 5befe49..a59df0b 100644 --- a/install/ui/ipa.css +++ b/install/ui/ipa.css @@ -193,6 +193,13 @@ body { padding-right: 0.3em; } +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + font-weight: bold; + padding: 0.2em; +} + /* ---- Header ---- */ #header { position: absolute; @@ -698,12 +705,13 @@ span.main-nav-off > a:visited { padding: 0.5em 0 0 1em; border-top: 1px solid #dfdfdf; height: 25px; + line-height: 25px; margin-top: 1em; } .search-table span[name=summary] { float: left; - line-height: 25px; + margin-right: 4em; } .search-table span[name=pagination] { @@ -846,6 +854,7 @@ hr { .undo { cursor:pointer; + padding: 0.2em; } span.attrhint { diff --git a/install/ui/jquery-ui.css b/install/ui/jquery-ui.css index 01c3ec9..eb0228c 100644 --- a/install/ui/jquery-ui.css +++ b/install/ui/jquery-ui.css @@ -348,7 +348,7 @@ * * http://docs.jquery.com/UI/Autocomplete#theming */ -.ui-autocomplete { position: absolute; cursor: default; } +.ui-autocomplete { position: absolute; cursor: default; } /* workarounds */ * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ @@ -404,8 +404,8 @@ .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ -.ui-button-icons-only { width: 3.4em; } -button.ui-button-icons-only { width: 3.7em; } +.ui-button-icons-only { width: 3.4em; } +button.ui-button-icons-only { width: 3.7em; } /*button text element */ .ui-button .ui-button-text { display: block; line-height: 1.4; } @@ -441,7 +441,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad */ .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } .ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; } -.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } @@ -513,7 +513,7 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } .ui-datepicker select.ui-datepicker-month-year {width: 100%;} -.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;} .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } diff --git a/install/ui/widget.js b/install/ui/widget.js index f32dfbb..be8df4f 100644 --- a/install/ui/widget.js +++ b/install/ui/widget.js @@ -149,7 +149,7 @@ IPA.widget = function(spec) { the validation pattern. If the field value does not pass validation, displays the error message and returns false. */ that.validate = function() { - hide_error(); + that.hide_error(); that.valid = true; var values = that.save(); @@ -357,10 +357,10 @@ IPA.widget = function(spec) { error_link.css('display', 'block'); }; - function hide_error() { + that.hide_error = function() { var error_link = that.get_error_link(); error_link.css('display', 'none'); - } + }; that.set_enabled = function() { }; @@ -374,10 +374,12 @@ IPA.widget = function(spec) { // methods that should be invoked by subclasses that.widget_create = that.create; + that.widget_hide_error = that.hide_error; that.widget_load = that.load; that.widget_reset = that.reset; that.widget_save = that.save; that.widget_set_dirty = that.set_dirty; + that.widget_show_error = that.show_error; that.widget_test_dirty = that.test_dirty; return that; @@ -789,6 +791,8 @@ IPA.checkbox_widget = function (spec) { if (that.undo) { that.create_undo(container); } + + that.create_error_link(container); }; that.load = function(record) { @@ -877,6 +881,8 @@ IPA.checkboxes_widget = function (spec) { input.change(function() { that.set_dirty(that.test_dirty()); }); + + that.create_error_link(container); }; @@ -947,6 +953,8 @@ IPA.radio_widget = function(spec) { input.change(function() { that.set_dirty(that.test_dirty()); }); + + that.create_error_link(container); }; that.load = function(record) { @@ -1019,6 +1027,8 @@ IPA.select_widget = function(spec) { that.select.change(function() { that.set_dirty(that.test_dirty()); }); + + that.create_error_link(container); }; that.load = function(record) { @@ -1359,6 +1369,8 @@ IPA.table_widget = function (spec) { colspan: columns.length + (that.selectable ? 1 : 0) }).appendTo(tr); + that.create_error_link(td); + that.summary = $('', { 'name': 'summary' }).appendTo(td); @@ -1566,6 +1578,12 @@ IPA.table_widget = function (spec) { return rows; }; + that.show_error = function(message) { + var error_link = that.get_error_link(); + error_link.html(message); + error_link.css('display', 'inline'); + }; + that.set_enabled = function(enabled) { if (enabled) { $('input[name="select"]', that.table).attr('disabled', false); @@ -1582,10 +1600,11 @@ IPA.table_widget = function (spec) { // methods that should be invoked by subclasses that.table_create = that.create; - that.table_set_enabled = that.set_enabled; - that.table_prev_page = that.prev_page; that.table_next_page = that.next_page; + that.table_prev_page = that.prev_page; + that.table_set_enabled = that.set_enabled; that.table_set_page = that.set_page; + that.table_show_error = that.show_error; return that; };