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:
parent
9117a4af30
commit
dca81ad58a
|
@ -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 {
|
||||
|
|
|
@ -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)
|
||||
|
|
Loading…
Reference in New Issue