refs #8864 always show apply button in date selector

6 files changed, 40 insertions, 30 deletions

diff --git a/lang/en.json b/lang/en.json
index ff5dd3738b..8e954f711f 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -11,7 +11,7 @@
         "AllWebsitesDashboard": "All Websites dashboard",
         "And": "and",
         "API": "API",
-        "ApplyDateRange": "Apply Date Range",
+        "Apply": "Apply",
         "ArchivingInlineHelp": "For medium to high traffic websites, it is recommended to disable Piwik archiving to trigger from the browser. Instead, we recommend that you setup a cron job to process Piwik reports every hour.",
         "ArchivingTriggerDescription": "Recommended for larger Piwik installs, you need to %ssetup a cron job%s to process the reports automatically.",
         "AuthenticationMethodSmtp": "Authentication method for SMTP",
diff --git a/plugins/CoreHome/javascripts/calendar.js b/plugins/CoreHome/javascripts/calendar.js
index 1c308fb74c..ceb11e4ec4 100644
--- a/plugins/CoreHome/javascripts/calendar.js
+++ b/plugins/CoreHome/javascripts/calendar.js
@@ -294,7 +294,6 @@
         var togglePeriodPickers = function (showSingle) {
             $('#periodString').find('.period-date').toggle(showSingle);
             $('#periodString').find('.period-range').toggle(!showSingle);
-            $('#calendarRangeApply').toggle(!showSingle);
         };
 
         //
@@ -383,6 +382,40 @@
             changePeriodOnClick($('#' + id));
         });
 
+        $("#otherPeriods").find("label,input").on('dblclick', function (e) {
+            var id = $(e.target).attr('for');
+            changePeriodOnClick($('#' + id));
+        });
+
+        // Apply date range button will reload the page with the selected range
+        $('#calendarApply')
+            .on('click', function () {
+                var $selectedPeriod = $('#periodMore [name=period]:checked');
+
+                if (!$selectedPeriod.is('#period_id_range')) {
+                    changePeriodOnClick($selectedPeriod);
+                    return true;
+                }
+
+                var dateFrom = $('#inputCalendarFrom').val(),
+                    dateTo = $('#inputCalendarTo').val(),
+                    oDateFrom = $.datepicker.parseDate('yy-mm-dd', dateFrom),
+                    oDateTo = $.datepicker.parseDate('yy-mm-dd', dateTo);
+
+                if (!isValidDate(oDateFrom)
+                    || !isValidDate(oDateTo)
+                    || oDateFrom > oDateTo) {
+                    $('#alert').find('h2').text(_pk_translate('General_InvalidDateRange'));
+                    piwikHelper.modalConfirm('#alert', {});
+                    return false;
+                }
+                piwikHelper.showAjaxLoading('ajaxLoadingCalendar');
+                broadcast.propagateNewPage('period=range&date=' + dateFrom + ',' + dateTo);
+            })
+            .show();
+
+
+
         // when non-range period is clicked, change the period & refresh the date picker
         $("#otherPeriods").find("input").on('click', function (e) {
             var request_URL = $(e.target).val(),
@@ -487,27 +520,6 @@
             // If not called, the first date appears light brown instead of dark brown
             $('.ui-state-hover').removeClass('ui-state-hover');
 
-            // Apply date range button will reload the page with the selected range
-            $('#calendarRangeApply')
-                .on('click', function () {
-                    var request_URL = $(e.target).val();
-                    var dateFrom = $('#inputCalendarFrom').val(),
-                        dateTo = $('#inputCalendarTo').val(),
-                        oDateFrom = $.datepicker.parseDate('yy-mm-dd', dateFrom),
-                        oDateTo = $.datepicker.parseDate('yy-mm-dd', dateTo);
-
-                    if (!isValidDate(oDateFrom)
-                        || !isValidDate(oDateTo)
-                        || oDateFrom > oDateTo) {
-                        $('#alert').find('h2').text(_pk_translate('General_InvalidDateRange'));
-                        piwikHelper.modalConfirm('#alert', {});
-                        return false;
-                    }
-                    piwikHelper.showAjaxLoading('ajaxLoadingCalendar');
-                    broadcast.propagateNewPage('period=range&date=' + dateFrom + ',' + dateTo);
-                })
-                .show();
-
             // Bind the input fields to update the calendar's date when date is manually changed
             $('#inputCalendarFrom, #inputCalendarTo')
                 .keyup(function (e) {
@@ -520,7 +532,7 @@
                     }
                     $("#calendar" + fromOrTo).datepicker("setDate", newDate);
                     if (e.keyCode == 13) {
-                        $('#calendarRangeApply').click();
+                        $('#calendarApply').click();
                     }
                 });
             return true;
diff --git a/plugins/CoreHome/stylesheets/coreHome.less b/plugins/CoreHome/stylesheets/coreHome.less
index 5474eae3d2..f9659cb85b 100644
--- a/plugins/CoreHome/stylesheets/coreHome.less
+++ b/plugins/CoreHome/stylesheets/coreHome.less
@@ -110,10 +110,8 @@ div.ui-datepicker {
     line-height: 12px;
 }
 
-#calendarRangeApply {
-    display: none;
+#calendarApply {
     margin-top: 10px;
-    margin-left: 10px;
 }
 
 #invalidDateRange {
diff --git a/plugins/CoreHome/templates/_periodSelect.twig b/plugins/CoreHome/templates/_periodSelect.twig
index 14ca6d707f..c99f463eca 100644
--- a/plugins/CoreHome/templates/_periodSelect.twig
+++ b/plugins/CoreHome/templates/_periodSelect.twig
@@ -26,7 +26,7 @@
                 <br/>
             {% endfor %}
 			</span>
-            <input tabindex="3" type="submit" value="{{ 'General_ApplyDateRange'|translate }}" id="calendarRangeApply" class="btn"/>
+            <input tabindex="3" type="submit" value="{{ 'General_Apply'|translate }}" id="calendarApply" class="btn"/>
             {% import 'ajaxMacros.twig' as ajax %}
             {{ ajax.loadingDiv('ajaxLoadingCalendar') }}
         </div>
diff --git a/tests/UI/specs/PeriodSelector_spec.js b/tests/UI/specs/PeriodSelector_spec.js
index c070f4beb5..0711ee55a8 100644
--- a/tests/UI/specs/PeriodSelector_spec.js
+++ b/tests/UI/specs/PeriodSelector_spec.js
@@ -83,7 +83,7 @@ describe("PeriodSelector", function () {
         expect.screenshot("date_range_selected").to.be.captureSelector('#periodString', function (page) {
             page.click('#calendarFrom .ui-datepicker-calendar a:contains(10)');
             page.click('#calendarTo .ui-datepicker-calendar a:contains(18)');
-            page.mouseMove('#calendarRangeApply');
+            page.mouseMove('#calendarApply');
         }, done);
     });
 });
\ No newline at end of file
diff --git a/tests/UI/specs/UIIntegration_spec.js b/tests/UI/specs/UIIntegration_spec.js
index d1f7ac80ae..7cb5f456b5 100644
--- a/tests/UI/specs/UIIntegration_spec.js
+++ b/tests/UI/specs/UIIntegration_spec.js
@@ -583,7 +583,7 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
                     $('#period_id_range').click();
                     $('#inputCalendarFrom').val('2012-08-02');
                     $('#inputCalendarTo').val('2012-08-12');
-                    setTimeout(function () {$('#calendarRangeApply').click();}, 500);
+                    setTimeout(function () {$('#calendarApply').click();}, 500);
                 });
             });
         }, done);