Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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
  • Loading branch information...
commit dca81ad58a21ca9621a131c787544176618c27e8 1 parent 9117a4a
@jphalip jphalip authored
View
10 django/contrib/admin/static/admin/css/widgets.css
@@ -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
20 django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js
@@ -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)
Please sign in to comment.
Something went wrong with that request. Please try again.