From dca81ad58a21ca9621a131c787544176618c27e8 Mon Sep 17 00:00:00 2001
From: Julien Phalip <jphalip@gmail.com>
Date: Sat, 22 Oct 2011 03:38:10 +0000
Subject: [PATCH] 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
---
 .../admin/static/admin/css/widgets.css        | 10 +++++++---
 .../admin/js/admin/DateTimeShortcuts.js       | 20 ++++++++++++++++---
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/django/contrib/admin/static/admin/css/widgets.css b/django/contrib/admin/static/admin/css/widgets.css
index 3b5c31c738..2989f2f4fd 100644
--- a/django/contrib/admin/static/admin/css/widgets.css
+++ b/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 {
diff --git a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js b/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js
index f22cc7a8ed..3ecc06f098 100644
--- a/django/contrib/admin/static/admin/js/admin/DateTimeShortcuts.js
+++ b/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)