From b3135848077b0ea0bbdc8eda3eb796048bf25fbf Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 9 Sep 2021 14:10:57 +0000 Subject: [PATCH] Bug 28982: Use Flatpickr on onboarding pages This patch replaces the use of jQueryUI's datepicker in the onboarding templates. The addition of calendar.inc to the template requires that some additions be made to the installer's header files, adding the i18n JavaScript assets. jQueryUI-specific CSS is removed from installer.scss, and inclusion of Flatpickr's SCSS is added. To test, apply the patch and rebuild the staff client SCSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Start the installation process. - Continue through the installation process until you reach the stage in onboarding where you are creating a patron category. - The "Enrollment period -> Until" field should be a Flatpickr calendar widget. The widget should look and work correctly. Signed-off-by: Martin Renvoize Signed-off-by: Katrin Fischer Signed-off-by: Jonathan Druart --- .../intranet-tmpl/prog/css/src/installer.scss | 104 ++---------------- .../en/includes/installer-doc-head-close.inc | 8 ++ .../en/includes/installer-intranet-bottom.inc | 1 + .../en/modules/onboarding/onboardingstep2.tt | 2 +- koha-tmpl/intranet-tmpl/prog/js/onboarding.js | 21 +++- 5 files changed, 40 insertions(+), 96 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss index c9c4892abf..e823531d77 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/installer.scss @@ -1,3 +1,5 @@ +@import "flatpickr"; + body { background-color: #EEE; font-family: arial, verdana, helvetica, sans-serif; @@ -189,99 +191,15 @@ span.required { padding: .4em 2em; } - -/* Override core jQueryUI widgets */ -.ui-widget-content { - border: 1px solid #B9D8D9; - background: #ffffff none; - color: #222222; -} - -.ui-widget-header { - border: 1px solid #B9D8D9; - background: #E6F0F2 none; - color: #222222; - font-weight: bold; -} - -.ui-state-default, -.ui-widget-content .ui-state-default, -.ui-widget-header .ui-state-default { - border: 1px solid #B9D8D9; - background: #F4F8F9 none; - font-weight: normal; - color: #555555; -} - -.ui-state-hover, -.ui-widget-content .ui-state-hover, -.ui-widget-header .ui-state-hover, -.ui-state-focus, -.ui-widget-content .ui-state-focus, -.ui-widget-header .ui-state-focus { - border: 1px solid #B9D8D9; - background: #E6F0F2 none; - font-weight: normal; - color: #212121; -} - -.ui-state-active, -.ui-widget-content .ui-state-active, -.ui-widget-header .ui-state-active { - border: 1px solid #aaaaaa; - background: #ffffff none; - font-weight: normal; - color: #212121; -} - -.ui-state-highlight, -.ui-widget-content .ui-state-highlight, -.ui-widget-header .ui-state-highlight { - border: 1px solid #FED22F; - background: #FFF4C6; - color: #363636; -} - -.ui-state-error, -.ui-widget-content .ui-state-error, -.ui-widget-header .ui-state-error { - border: 1px solid #cd0a0a; - background: #fef1ec; - color: #cd0a0a; -} - -.ui-widget, -.ui-widget input, -.ui-widget select, -.ui-widget textarea, -.ui-widget button { - font-family : inherit; - font-size : inherit; -} - -/* jQuery UI Datepicker */ -.ui-datepicker table { - width: 100%; - font-size: .9em; - border : 0; - border-collapse: collapse; - margin:0 0 .4em; -} - -.ui-datepicker th { - background : transparent none; - padding: .7em .3em; - text-align: center; - font-weight: bold; - border: 0; -} - -.ui-datepicker-trigger { - vertical-align: middle; - margin : 0 3px; -} -.ui-datepicker { - box-shadow: 1px 1px 3px 0 #666; +/* Font Awesome isn't used in the installer, so add custom X icon */ +.clear_date { + background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 3.175 3.175' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-74.712 -91.722)'%3E%3Cpath d='M75.321 94.571a.207.207 0 0 0 .293 0l.686-.685.685.685a.207.207 0 0 0 .293 0l.284-.283a.207.207 0 0 0 0-.294l-.686-.685.686-.685a.207.207 0 0 0 0-.294l-.284-.283a.207.207 0 0 0-.293 0l-.685.685-.686-.685a.207.207 0 0 0-.293 0l-.283.283a.207.207 0 0 0 0 .294l.685.685-.685.685a.207.207 0 0 0 0 .294z' fill='%23c33'/%3E%3Cimage x='-117.25' y='-204.6' width='196.44' height='175.61' preserveAspectRatio='none'/%3E%3C/g%3E%3C/svg%3E"); + background-position: 5px 5px; + background-repeat: no-repeat; + content: ""; + display: inline-block; + width: 16px; + height: 16px; } span.breadcrumbs { diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc index 556d241762..b7cccf913b 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc @@ -6,4 +6,12 @@ [% Asset.css("lib/bootstrap/bootstrap.min.css") | $raw %] [% Asset.css("lib/font-awesome/css/font-awesome.min.css") | $raw %] [% Asset.css("css/installer.css") | $raw %] + +[% IF lang && lang != 'en' %] + [% Asset.js(lang _ '/js/locale_data.js') | $raw %] +[% END %] +[% Asset.js('js/Gettext.js') | $raw %] +[% Asset.js('js/i18n.js') | $raw %] diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc index 33f7ffb3d2..3f1ca56a38 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc @@ -5,6 +5,7 @@ [% Asset.js("lib/jquery/jquery-ui-1.11.4.min.js") | $raw %] [% Asset.js("lib/bootstrap/bootstrap.min.js") | $raw %] [% Asset.js("lib/jquery/plugins/jquery.validate.min.js") | $raw %] + [% INCLUDE 'calendar.inc' %]