Commit dca81ad5 authored by Julien Phalip's avatar Julien Phalip
Browse files

Fixed #17064 -- Improved the UX for the admin's time and date picker widgets... 

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
parent 9117a4af

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

+7 −3
Original line number Diff line number Diff line
@@ -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 {

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

+17 −3
Original line number Diff line number Diff line
@@ -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)