gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This commit is contained in:
Owen Leonard 2021-09-09 14:10:57 +00:00 committed by Jonathan Druart
parent 0a67a732c2
commit b313584807
5 changed files with 40 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
koha-tmpl/intranet-tmpl/prog/css/src/installer.scss
View File

@ -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 {

8
koha-tmpl/intranet-tmpl/prog/en/includes/installer-doc-head-close.inc
View File

@ -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 %]
<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>

1
koha-tmpl/intranet-tmpl/prog/en/includes/installer-intranet-bottom.inc
View File

@ -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

2
koha-tmpl/intranet-tmpl/prog/en/modules/onboarding/onboardingstep2.tt
View File

@ -121,7 +121,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>

21
koha-tmpl/intranet-tmpl/prog/js/onboarding.js
View File

@ -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({