Bugzilla – Attachment 127138 Details for
Bug 28982
Use Flatpickr on onboarding pages
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 28982: Use Flatpickr on onboarding pages
Bug-28982-Use-Flatpickr-on-onboarding-pages.patch (text/plain), 9.97 KB, created by
Katrin Fischer
on 2021-10-31 13:54:51 UTC
(
hide
)
Description:
Bug 28982: Use Flatpickr on onboarding pages
Filename:
MIME Type:
Creator:
Katrin Fischer
Created:
2021-10-31 13:54:51 UTC
Size:
9.97 KB
patch
obsolete
>From 3197538681576e85fae86a5b114f947683f17070 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >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 <martin.renvoize@ptfs-europe.com> > >Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> >--- > .../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 %] >+<script> >+var Koha = {}; >+</script> >+[% 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 %] > <style id="antiClickjack">body{display:none !important;}</style> >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' %] > <!-- installer-intranet-bottom.inc --> > <script> > function _(s) { return s } // dummy function for gettext >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt >index f6242a3b4f..cbe0bede40 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt >@@ -106,7 +106,7 @@ > </li> > <li> > <label for="enrolmentperioddate">Until date: </label> >- <input type="text" class="enrolmentperioddate datepicker" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" /> >+ <input type="text" class="enrolmentperioddate" name="enrolmentperioddate" id="enrolmentperioddate" value="[% category.enrolmentperioddate | $KohaDates %]" /> > <div class="hint">[% INCLUDE 'date-format.inc' dateformat = Koha.Preference('dateformat') %]</div> > </li> > </ol> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/onboarding.js b/koha-tmpl/intranet-tmpl/prog/js/onboarding.js >index 93cb010b0c..5a19de635a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/onboarding.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/onboarding.js >@@ -61,8 +61,25 @@ $(document).ready(function() { > toUC(this); > }); > >- $("#enrolmentperioddate").datepicker({ >- minDate: 1 >+ $("#enrolmentperioddate").flatpickr({ >+ /* Default Flatpickr configuration uses Font Awesome icons for arrows. Onboarding doesn't include Font Awesome, so we redefine these arrows with some SVG icons */ >+ nextArrow: '<svg width="17" height="17" viewBox="0 0 4.498 4.498" xmlns="http://www.w3.org/2000/svg"><path d="M3.761 2.491c.158.17.47.12.566-.09.085-.158.02-.356-.116-.461L2.562.292C2.445.17 2.3.282 2.217.382c-.087.102-.255.193-.195.35.107.149.254.265.378.399l1.361 1.36zm.496.017c.17-.157.12-.47-.091-.566-.158-.085-.355-.02-.46.117L2.057 3.707c-.12.118-.01.263.091.345.101.087.193.255.35.195.148-.106.264-.254.398-.378l1.36-1.36zm-.746.095c.206.006.457-.124.462-.353-.005-.23-.256-.36-.462-.354-1.054 0-2.109-.002-3.163 0-.174-.003-.234.166-.212.308.01.128-.043.3.104.369.157.056.33.02.493.03h2.778z"/></svg>', >+ prevArrow: '<svg width="17" height="17" viewBox="0 0 4.498 4.498" xmlns="http://www.w3.org/2000/svg"><path d="M.737 2.008c-.158-.17-.47-.12-.566.09-.085.158-.02.356.116.461l1.649 1.648c.117.121.263.01.345-.09.087-.102.255-.193.195-.35-.107-.149-.254-.265-.378-.399L.737 2.008zM.241 1.99c-.17.157-.12.47.091.566.158.085.355.02.46-.117L2.441.792C2.56.674 2.45.53 2.35.447 2.249.36 2.157.192 2 .252c-.148.106-.264.254-.398.378L.242 1.99zm.746-.095C.781 1.89.53 2.02.525 2.249c.005.23.256.36.462.354 1.054 0 2.109.002 3.163 0 .174.003.234-.166.212-.308-.01-.128.043-.3-.104-.369-.157-.056-.33-.02-.493-.03H.987z"/></svg>', >+ minDate: new Date().fp_incr(1), >+ onReady: function( selectedDates, dateStr, instance ){ >+ $(instance.input) >+ /* Add a wrapper element so that we can prevent the clear button from wrapping */ >+ .wrap("<span class='flatpickr_wrapper'></span>") >+ .after( $("<a/>") >+ .attr("href","#") >+ .addClass("clear_date") >+ .on("click", function(e){ >+ e.preventDefault(); >+ instance.clear(); >+ }) >+ .attr("aria-hidden", true) >+ ); >+ } > }); // Require that "until date" be in the future > > $("#category_form").validate({ >-- >2.11.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 28982
:
124716
|
125503
|
125656
|
125710
| 127138 |
127139