From 58cec67dbdd6064e9435b04b7474fe0ebc5e0ac5 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 16 Nov 2021 14:17:19 +0000
Subject: [PATCH] Bug 29478: (follow-up) Provide default style for shortcut
 buttons

This patch adds some CSS to _flatpickr.scss in order to give a deafult
style to the "yesterday," "today," and "tomorrow" controls added by the
shortcut plugin.

A missed translatable string is now wrapped in the __() function:
__("or").

The patch also updates the date calculation for those shortcuts to use
Flatpickr's date calculation shorthand. This isn't strictly necessary
but I think it makes the code more readable.

To test, apply the patch and build the staff interface CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

In the staff client, view some pages with date-picker widgets. A
calendar widget time selection:

- Circulation -> Check out -> Checkout settings -> Select date:
  - The calendar widget should have "yesterday," "today," and "tomorrow"
    controls styled like links appearing after the time selector. The
    controls should be centered, with the "or" label on the same line.

A calendar widget without time selection:

- Tools -> Log viewer -> Display from.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../prog/css/src/_flatpickr.scss              | 33 +++++++++++++++++++
 .../prog/en/includes/calendar.inc             |  6 ++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
index 59886c9e83..85c4e96f8f 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss
@@ -963,3 +963,36 @@ span.flatpickr-weekday {
 .flatpickr_wrapper {
     white-space: nowrap;
 }
+
+/* Shortcut buttons plugin */
+
+.shortcut-buttons-flatpickr-wrapper {
+    display: flex;
+    justify-content: center;
+    padding: 5px;
+
+    .shortcut-buttons-flatpickr-label {
+        align-content: center;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        padding: 0 5px;
+    }
+
+    .shortcut-buttons-flatpickr-buttons {
+        display: flex;
+        flex-flow: row wrap;
+
+        .shortcut-buttons-flatpickr-button {
+            background: transparent none;
+            border: 0;
+            color: #004D99;
+            font-size: 90%;
+            margin: 2px;
+
+            &:hover {
+                color: #538200;
+            }
+        }
+    }
+}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
index ac17aa8325..83ae48013e 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc
@@ -98,18 +98,18 @@
                 label: __("Tomorrow")
               }
             ],
-            label: "or",
+            label: __("or"),
             onClick: (index, fp) => {
               let date;
               switch (index) {
                 case 0:
-                  date = new Date(Date.now() - 24 * 60 * 60 * 1000);
+                  date = new Date().fp_incr(-1);
                   break;
                 case 1:
                   date = new Date();
                   break;
                 case 2:
-                  date = new Date(Date.now() + 24 * 60 * 60 * 1000);
+                  date = new Date().fp_incr(1);
                   break;
               }
               date.setHours(23, 59, 0, 0);
-- 
2.39.5