On 09/15/2011 01:51 AM, Endi Sukma Dewata wrote:
On 9/14/2011 7:23 AM, Petr Vobornik wrote:
Forgot to update tests - to address newly added validation row in
table_widget.
One issue, in all search and association facets we now have 2 rows of
footer (there are 2 horizontal lines at the bottom). I think it would be
better to use a single row for both summary/error messages and
pagination. The messages will be left aligned, the pagination will be
right aligned.
It seems that the bigger problem is that these two lines of footer are
displayed in search facet and association adder dialog. Anyway I've
moved the error message to the same row as summary and pagination.
I've left summary on the left so error message will be displayed between
the summary and the pager. To be more readable a margin-right was added
to the summary so when the summary is empty error_message is on the
left. Line-height is set for the footer so summary, error message and
pagination are equally vertically aligned.
I've added padding and unified font-weight in error-message style. The
padding is added because text of the message was right on the border
which wasn't much readable. Font-weight is added because sometimes it
inherits font-weight from other style and so it is inconsistent with
other appearances. I'm not sure about the 'bold', though.
--
Petr Vobornik
From ac15659856b624e0f2084b1712313e91c1d7fe1a Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Wed, 14 Sep 2011 13:01:25 +0200
Subject: [PATCH] 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
---
install/ui/aci.js | 2 ++
install/ui/ipa.css | 3 ++-
install/ui/jquery-ui.css | 12 ++++++------
install/ui/widget.js | 29 ++++++++++++++++++++++++-----
4 files changed, 34 insertions(+), 12 deletions(-)
diff --git a/install/ui/aci.js b/install/ui/aci.js
index 676f5df3e63032dd6c6f32279314545608fbcc28..eb6557b58a28832636801783e31b2220258f26fe 100644
--- a/install/ui/aci.js
+++ b/install/ui/aci.js
@@ -315,6 +315,8 @@ IPA.attributes_widget = function(spec) {
if (that.object_type) {
that.populate(that.object_type);
}
+
+ that.create_error_link(container);
};
that.load = function(record) {
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index a838195c042ed0e236306e3a15a241c141152a48..0b8b8e3190b77fb50aac97a1887efbd2ce85aaec 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -698,12 +698,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] {
diff --git a/install/ui/jquery-ui.css b/install/ui/jquery-ui.css
index 01c3ec90e2e01c2a6dc677ddf57164c12b9ba0a1..ad021554fa18503dfffc22b2b1b4046bcd70d14c 100644
--- a/install/ui/jquery-ui.css
+++ b/install/ui/jquery-ui.css
@@ -78,7 +78,7 @@
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #ffde2e; background: #ffeb80 url(ui-bg_inset-hard_55_ffeb80_1x100.png) 50% bottom repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
-.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #9e0505; background: #cd0a0a url(ui-bg_inset-hard_45_cd0a0a_1x100.png) 50% bottom repeat-x; color: #ffffff; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #9e0505; background: #cd0a0a url(ui-bg_inset-hard_45_cd0a0a_1x100.png) 50% bottom repeat-x; color: #ffffff; font-weight: bold; padding: 0.2em; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
@@ -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 f32dfbb18479fb5020e9ae7c2987e29321c833ef..be8df4fb9986ff28a6a47187ee9831d431d12595 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 = $('<span/>', {
'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;
};
--
1.7.6
_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel
