On 09/27/2011 10:54 PM, Endi Sukma Dewata wrote:
On 9/27/2011 7:50 AM, Petr Vobornik wrote:
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.
This is good but can we use a new CSS class for the error message? I'd
rather not change the jquery-ui.css (removing white spaces is ok)
because it will be difficult to keep track the changes if we need to
upgrade it.
Moved this change to ipa.css (no need to add extra class, it will
overwrite it as long ipa.css is linked after jquery-ui.css).
There's another minor issue, but this one can be fixed separately if you
want. Try editing a self-service permission, uncheck all attributes,
then click Update. The undo link and the error message appear in 2
separate lines.
Kept them on 2 lines.
I think it's better to show them in a single line. When
we fix the attributes widget to inherit from table, they will fit into
the footer.
I agree.
The padding should be consistent as well, right now the undo
box is smaller than the error message.
Added padding to undo. Added 1px margin-bottom to undo to separate undo
and error message borders when they are on two lines.
Changed display of undo in attributes_widget from inline to inline-block
- looks better with added padding.
--
Petr Vobornik
From fdf6af10481885d8e8e2ba012b92129d5a534d17 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <[email protected]>
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 | 6 ++++++
install/ui/ipa.css | 11 ++++++++++-
install/ui/jquery-ui.css | 10 +++++-----
install/ui/widget.js | 29 ++++++++++++++++++++++++-----
4 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/install/ui/aci.js b/install/ui/aci.js
index 676f5df3e63032dd6c6f32279314545608fbcc28..5d5fd8878ca14a5421cf5aa40a3c1384615935e2 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) {
@@ -410,6 +412,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 a838195c042ed0e236306e3a15a241c141152a48..20b19eed66fc76490b7a9dde226873a39a83e6e4 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 01c3ec90e2e01c2a6dc677ddf57164c12b9ba0a1..eb0228cd2fdf151872e7de92ff28c8305af8ea2b 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 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
[email protected]
https://www.redhat.com/mailman/listinfo/freeipa-devel
