test0908
/
django
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
django/contrib/admin/static/admin/css/widgets.css
View File

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

20
django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js
View File

@ -79,17 +79,24 @@ var DateTimeShortcuts = {
addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation); addEvent(clock_box, 'click', DateTimeShortcuts.cancelEventPropagation);
quickElement('h2', clock_box, gettext('Choose a time')); 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_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("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("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("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 + "'));"); 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'; cancel_p.className = 'calendar-cancel';
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissClock(' + num + ');'); 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) { openClock: function(num) {
var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num) var clock_box = document.getElementById(DateTimeShortcuts.clockDivName+num)
@ -195,6 +202,13 @@ var DateTimeShortcuts = {
var cancel_p = quickElement('p', cal_box, ''); var cancel_p = quickElement('p', cal_box, '');
cancel_p.className = 'calendar-cancel'; cancel_p.className = 'calendar-cancel';
quickElement('a', cancel_p, gettext('Cancel'), 'href', 'javascript:DateTimeShortcuts.dismissCalendar(' + num + ');'); 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) { openCalendar: function(num) {
var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num) var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)