Fixed #17064 -- Improved the UX for the admin's time and date picker widgets by brushing up the 'Cancel' button's visual feedback and by allowing the popups to get closed by pressing the 'Escape' key.

git-svn-id: http://code.djangoproject.com/svn/django/trunk@17021 bcc190cf-cafb-0310-a4f2-bffc1f526a37
This commit is contained in:
Julien Phalip 2011-10-22 03:38:10 +00:00
parent 9117a4af30
commit dca81ad58a
2 changed files with 24 additions and 6 deletions

View File

@ -379,15 +379,19 @@ span.clearable-file-input label {
.calendar-cancel {
margin: 0 !important;
padding: 0;
padding: 0 !important;
font-size: 10px;
background: #e1e1e1 url(../img/nav-bg.gif) 0 50% repeat-x;
border-top: 1px solid #ddd;
}
.calendar-cancel:hover {
background: #e1e1e1 url(../img/nav-bg-reverse.gif) 0 50% repeat-x;
}
.calendar-cancel a {
padding: 2px;
color: #999;
color: black;
display: block;
}
ul.timelist, .timelist li {

View File

@ -79,17 +79,24 @@ var DateTimeShortcuts = {
addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
quickElement('h2', clock_box, gettext('Choose a time'));
time_list = quickElement('ul', clock_box, '');
var time_list = quickElement('ul', clock_box, '');
time_list.className = 'timelist';
time_format = get_format('TIME_INPUT_FORMATS')[0];
var time_format = get_format('TIME_INPUT_FORMATS')[0];
quickElement("a", quickElement("li", time_list, ""), gettext("Now"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date().strftime('" + time_format + "'));");
quickElement("a", quickElement("li", time_list, ""), gettext("Midnight"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,0,0,0,0).strftime('" + time_format + "'));");
quickElement("a", quickElement("li", time_list, ""), gettext("6 a.m."), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,6,0,0,0).strftime('" + time_format + "'));");
quickElement("a", quickElement("li", time_list, ""), gettext("Noon"), "href", "javascript:DateTimeShortcuts.handleClockQuicklink(" + num + ", new Date(1970,1,1,12,0,0,0).strftime('" + time_format + "'));");
cancel_p = quickElement('p', clock_box, '');
var cancel_p = quickElement('p', clock_box, '');
cancel_p.className = 'calendar-cancel';
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');');
django.jQuery(document).bind('keyup', function(event) {
if (event.which == 27) {
// ESC key closes popup
DateTimeShortcuts.dismissClock(num);
event.preventDefault();
}
});
},
openClock: function(num) {
var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
@ -195,6 +202,13 @@ var DateTimeShortcuts = {
var cancel_p = quickElement('p', cal_box, '');
cancel_p.className = 'calendar-cancel';
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');');
django.jQuery(document).bind('keyup', function(event) {
if (event.which == 27) {
// ESC key closes popup
DateTimeShortcuts.dismissCalendar(num);
event.preventDefault();
}
});
},
openCalendar: function(num) {
var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)