Ticket #17064: 17064.improved-date-time-picker-ux.diff

django/contrib/admin/static/admin/css/widgets.css

@@ -379 +379 @@
 
 .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 {

django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js

@@ -79 +79 @@
         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 +202 @@
         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)