From 3197538681576e85fae86a5b114f947683f17070 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 --- .../intranet-tmpl/prog/css/src/installer.scss | 104 +++------------------ .../prog/en/includes/installer-doc-head-close.inc | 8 ++ .../prog/en/includes/installer-intranet-bottom.inc | 1 + .../prog/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 19301fcec1..3b63e3066a 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 3c1a5f4659..dc49562037 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 @@ -5,4 +5,12 @@ [% Asset.css("lib/jquery/jquery-ui-1.11.4.min.css") | $raw %] [% Asset.css("lib/bootstrap/bootstrap.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' %]