Bugzilla – Attachment 86729 Details for
Bug 20959
Style checkin form more like the checkout form, with collapsed settings panel
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 20959: Style checkin form more like the checkout form, with collapsed settings panel
Bug-20959-Style-checkin-form-more-like-the-checkou.patch (text/plain), 20.87 KB, created by
Owen Leonard
on 2019-03-18 18:44:27 UTC
(
hide
)
Description:
Bug 20959: Style checkin form more like the checkout form, with collapsed settings panel
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2019-03-18 18:44:27 UTC
Size:
20.87 KB
patch
obsolete
>From cca0f2d37cb0c6b95bbfc2508d8bb2929318a10c Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Mon, 11 Mar 2019 17:57:41 +0000 >Subject: [PATCH] Bug 20959: Style checkin form more like the checkout form, > with collapsed settings panel > >This patch modifies the structure of the checkin form so that settings >(Specify return date, book drop mode, forgive overdue charges) are in a >collapsed panel when inactive. The style of the barcode field and the >mode notification messages has been changed to reduce the vertical >motion of the form when selecting options. > >Some class names have been changed in circulation.tt and circulation.js >to make them appropriate for use on both forms. > >To test, apply the patch and clear your browser cache if necessary. > > - View the checkin page. The "checkin settings" panel should be > collapsed by default. > - Confirm that the settings panel collapses and expands as it should. > - Confirm that selecting "Forgive overdue charges" or "Book drop mode" > trigger the display of the correct message and that the style of the > barcode field is changed. > - Confirm that after submitting a barcode for check-in, the > settings panel stays open and your selected settings are still > selected. > - Test with CircSidebar enabled and disabled. >--- > .../intranet-tmpl/prog/css/src/staff-global.scss | 28 ++-- > .../prog/en/modules/circ/circulation.tt | 16 +-- > .../intranet-tmpl/prog/en/modules/circ/returns.tt | 144 ++++++++++++--------- > .../intranet-tmpl/prog/js/pages/circulation.js | 29 +++-- > 4 files changed, 126 insertions(+), 91 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >index af5afa2..dffaba5 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -480,11 +480,6 @@ input { > } > } > >- &.alert { >- background-color: #FFFF99; >- border-color: #900; >- } >- > &.hasDatepicker { > background-image: url("../img/famfamfam/silk/calendar.png"); > background-position-x: right; >@@ -513,6 +508,11 @@ input { > } > } > >+.input-warning { >+ background-color: #FFFF99; >+ border-color: #900; >+} >+ > label, > .label { > color: #000; >@@ -1971,7 +1971,7 @@ i { > } > } > >-.checkout-setting { >+.circ-setting { > font-size: 85%; > padding-top: .3em; > >@@ -1985,7 +1985,7 @@ i { > } > } > >-.checkout-settings { >+.circ-settings { > background-color: #F4F8F9; > border-radius: 0; > border-top: 2px solid #B9D8D9; >@@ -1996,10 +1996,22 @@ i { > padding: 1em 1em 0; > } > >-#show-checkout-settings { >+#show-circ-settings { > margin-top: .5em; > } > >+.checkin-active-setting { >+ background-color: #FFC; >+ border-radius: 3px; >+ box-shadow: 1px 1px 2px 0 rgba(102, 102, 102, .5); >+ margin: .5em; >+ padding: .5em; >+} >+ >+.form-control-group { >+ white-space: nowrap; >+} >+ > .blocker { > color: #990000; > } >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt >index 5490ea6..31732a3 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt >@@ -531,15 +531,15 @@ No patron matched <span class="ex">[% message | html %]</span> > [% END %] > <button type="submit" class="btn btn-default">Check out</button> > >- <div id="show-checkout-settings"> >- <a href="#"><i class="fa fa-caret-right checkout-settings-icon"></i> Checkout settings</a> >+ <div id="show-circ-settings"> >+ <a href="#"><i class="fa fa-caret-right circ-settings-icon"></i> Checkout settings</a> > </div> > >- <div class="checkout-settings"> >+ <div class="circ-settings"> > > [% UNLESS ( noissues && Koha.Preference('OnSiteCheckoutsForce') ) %] > [% IF ( SpecifyDueDate ) %] >- <div id="specify-due-date" class="checkout-setting"> >+ <div id="specify-due-date" class="circ-setting"> > <div class="hint">Specify due date [% INCLUDE 'date-format.inc' %]: </div> > [% IF ( duedatespec ) %] > <input type="text" size="13" id="duedatespec" name="duedatespec" value="[% duedatespec | html %]" /> >@@ -558,7 +558,7 @@ No patron matched <span class="ex">[% message | html %]</span> > [% END %] > > [% UNLESS ( noissues ) %] >- <div id="set-automatic-renewal" class="checkout-setting"> >+ <div id="set-automatic-renewal" class="circ-setting"> > [% IF NEEDSCONFIRMATION %] > <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" disabled="disabled" /> > [% ELSE %] >@@ -568,7 +568,7 @@ No patron matched <span class="ex">[% message | html %]</span> > <label for="auto_renew">Automatic renewal</label> > </div> > [% IF Koha.Preference('decreaseLoanHighHolds') %] >- <div id="set_high_holds_overrride" class="checkout-setting"> >+ <div id="set_high_holds_overrride" class="circ-setting"> > [% IF NEEDSCONFIRMATION %] > [% IF override_high_holds %] > <input type="checkbox" name="override_high_holds" id="override_high_holds" value="1" disabled="disabled" checked="checked"/> >@@ -588,7 +588,7 @@ No patron matched <span class="ex">[% message | html %]</span> > [% END %] > > [% IF Koha.Preference('OnSiteCheckouts') %] >- <div id="onsite_checkout-select" class="checkout-setting"> >+ <div id="onsite_checkout-select" class="circ-setting"> > [% IF noissues %] > <div class="onsite-checkout-only"> > <input type="checkbox" id="onsite_checkout" name="onsite_checkout_forced" checked="checked" disabled="disabled" /> <label for="onsite_checkout">On-site checkouts only. Automatic due date: </label> >@@ -601,7 +601,7 @@ No patron matched <span class="ex">[% message | html %]</span> > </div> > [% END %] > >- </div> <!-- /.checkout-settings --> >+ </div> <!-- /.circ-settings --> > > <input type="hidden" name="borrowernumber" id="borrowernumber" value="[% patron.borrowernumber | html %]" /> > <input type="hidden" name="branch" value="[% branch | html %]" /> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >index 0ccd192..7d241f5 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt >@@ -596,32 +596,61 @@ > [% END %] > <p class="problem">[% checkinmsg | html_line_break %]</p> > </div> >-[% END%] >- >- <div id="exemptfines" class="dialog message" style="display:none;"> >- <p>Fines for returned items are forgiven.</p> >- </div> >- <div id="forgivemanualholdsexpire-alert" class="dialog message" style="display:none;"> >- <p>Fines are not charged for manually cancelled holds.</p> >- </div> >- <div id="dropboxmode" class="dialog message" style="display:none;"> >- <p>Book drop mode. (Effective checkin date is [% dropboxdate | $KohaDates %] ).</p> >- </div> >+[% END %] > >-<div class="row"> > <form id="checkin-form" method="post" action="/cgi-bin/koha/circ/returns.pl" autocomplete="off" > >+ <fieldset id="circ_returns_checkin"> >+ <h3>Check in</h3> >+ <div class="row"> > <div class="col-sm-6"> >- <fieldset> >- <legend>Check in</legend> >- <label for="barcode">Enter item barcode: </label> >+ <div class="hint">Enter item barcode:</div> >+ <div class="form-control-group"> > [% IF ( exemptfine ) %] >- <input name="barcode" id="barcode" size="14" class="focus alert" type="text" /> >+ <input name="barcode" id="barcode" size="14" class="barcode focus input-warning" /> > [% ELSIF ( dropboxmode ) %] >- <input name="barcode" id="barcode" size="14" class="focus alert" type="text" /> >+ <input name="barcode" id="barcode" size="14" class="barcode focus input-warning" /> >+ [% ELSE %] >+ <input name="barcode" id="barcode" size="14" class="barcode focus" /> >+ [% END %] >+ <button type="submit" class="btn btn-default">Check in</button> >+ [% FOREACH inputloo IN inputloop %] >+ <input type="hidden" name="ri-[% inputloo.counter | html %]" value="[% inputloo.barcode | html %]" /> >+ <input type="hidden" name="dd-[% inputloo.counter | html %]" value="[% inputloo.duedate | html %]" /> >+ <input type="hidden" name="bn-[% inputloo.counter | html %]" value="[% inputloo.borrowernumber | html %]" /> >+ [% END %] >+ </div> >+ <div id="show-circ-settings"> >+ <a href="#"><i class="fa circ-settings-icon fa-caret-down"></i> Checkin settings</a> >+ </div> >+ </div> >+ <div class="col-sm-6"> >+ [% IF ( exemptfine ) %] >+ <div id="exemptfines" class="checkin-active-setting"> >+ [% ELSE %] >+ <div id="exemptfines" class="checkin-active-setting" style="display:none;"> >+ [% END %] >+ <p><i class="fa fa-check"></i> Fines for returned items are forgiven.</p> >+ </div> >+ >+ [% IF ( forgivemanualholdsexpire ) %] >+ <div id="forgivemanualholdsexpire-alert" class="checkin-active-setting"> > [% ELSE %] >- <input name="barcode" id="barcode" size="14" class="focus" type="text" /> >+ <div id="forgivemanualholdsexpire-alert" class="checkin-active-setting" style="display:none;"> > [% END %] >- <input type="submit" class="submit" value="Submit" /> >+ <p><i class="fa fa-check"></i> Fines are not charged for manually cancelled holds.</p> >+ </div> >+ >+ [% IF ( dropboxmode ) %] >+ <div id="dropboxmode" class="checkin-active-setting"> >+ [% ELSE %] >+ <div id="dropboxmode" class="checkin-active-setting" style="display:none;"> >+ [% END %] >+ <p><i class="fa fa-check"></i> Book drop mode. (Effective checkin date is [% dropboxdate | html %] ).</p> >+ </div> >+ </div> >+ </div> >+ >+ <div class="circ-settings"> > > [% IF Koha.Preference('SpecifyReturnDate') %] > <div class="date-select" id="return_date_override_fields"> >@@ -635,54 +664,43 @@ > [% ELSE %] > <input type="checkbox" id="return_date_override_remember" onclick="this.form.barcode.focus();" name="return_date_override_remember" /> > [% END %] >- >- <input type="button" class="action" id="cleardate" value="Clear" name="cleardate" onclick="this.checked = false; this.form.return_date_override.value = ''; this.form.return_date_override_remember.checked = false; this.form.barcode.focus(); return false;" /> >+ <button type="button" class="action btn btn-default btn-xs" id="cleardate" name="cleardate" onclick="this.checked = false; this.form.return_date_override.value = ''; this.form.return_date_override_remember.checked = false; this.form.barcode.focus(); return false;">Clear</button> > </div> > [% END %] >- [% FOREACH inputloo IN inputloop %] >- <input type="hidden" name="ri-[% inputloo.counter | html %]" value="[% inputloo.barcode | html %]" /> >- <input type="hidden" name="dd-[% inputloo.counter | html %]" value="[% inputloo.duedate | html %]" /> >- <input type="hidden" name="bn-[% inputloo.counter | html %]" value="[% inputloo.borrowernumber | html %]" /> >- [% END %] >- > >- </fieldset> >- </div> >- <div class="col-sm-6"> >- <fieldset id="checkin_options"> >- <legend>Options</legend> > [% IF ( CAN_user_updatecharges_writeoff && overduecharges ) %] >- <p> >+ <div id="forgive-overdue-fines" class="circ-setting"> > [% IF ( exemptfine ) %] > <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" checked="checked" /> > [% ELSE %] > <input type="checkbox" id="exemptcheck" name="exemptfine" value="exemptfine" /> > [% END %] > <label for="exemptcheck">Forgive overdue charges</label> >- </p> >- [% END %] <!-- overduecharges --> >- <p> >+ </div> >+ [% END %] >+ <!-- overduecharges --> >+ <div id="book-drop-mode" class="circ-setting"> > [% IF ( dropboxmode ) %] > <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" checked="checked" /> > [% ELSE %] > <input type="checkbox" id="dropboxcheck" name="dropboxmode" value="dropboxmode" /> > [% END %] > <label for="dropboxcheck">Book drop mode</label> >- </p> >+ </div> > [% IF Koha.Preference('ExpireReservesMaxPickUpDelayCharge') %] >- <p> >+ <div id="forgive-manual-hold-fees" class="circ-setting"> > [% IF ( forgivemanualholdsexpire ) %] > <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" checked="checked" /> > [% ELSE %] > <input type="checkbox" id="forgivemanualholdsexpire" name="forgivemanualholdsexpire" value="forgivemanualholdsexpire" /> > [% END %] > <label for="forgivemanualholdsexpire">Forgive fees for manually expired holds</label> >- </p> >- [% END %] <!-- overduecharges --> >- </fieldset> >- </div> >- </form> > </div> >+ [% END %] >+ <!-- overduecharges --> >+ </div> [%# /.circ-settings %] >+ </fieldset> [%# /#circ_returns_checkin %] >+</form> [%# /#checkin-form %] > > [% IF ( riloop ) %] > <h2>Checked-in items</h2> >@@ -738,15 +756,18 @@ > </table> > [% END %] > >- [% IF Koha.Preference('CircSidebar') %] >- </div> <!-- /.col-sm-10.col-sm-push-2 --> >- <div class="col-sm-2 col-sm-pull-10"> >- <aside> >- [% INCLUDE 'circ-nav.inc' %] >- </aside> >- </div> <!-- /.col-sm-2.col-sm-pull-10 --> >- </div> <!-- /.row --> >- [% END %] >+ [% IF Koha.Preference('CircSidebar') %] >+ </div> <!-- /.col-sm-10.col-sm-push-2 --> >+ <div class="col-sm-2 col-sm-pull-10"> >+ <aside> >+ [% INCLUDE 'circ-nav.inc' %] >+ </aside> >+ </div> <!-- /.col-sm-2.col-sm-pull-10 --> >+ </div> <!-- /.row --> >+ [% ELSE %] >+ </div> <!-- /.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 --> >+ </div> <!-- /.row --> >+ [% END %] > > </main> > </div> <!-- /.col-sm-12 --> >@@ -757,6 +778,7 @@ > [% INCLUDE 'columns_settings.inc' %] > [% INCLUDE 'calendar.inc' %] > [% Asset.js("lib/jquery/plugins/jquery-ui-timepicker-addon.min.js") | $raw %] >+ [% Asset.js("js/pages/circulation.js") | $raw %] > [% INCLUDE 'timepicker.inc' %] > > <script> >@@ -828,23 +850,23 @@ > > $("#exemptcheck").change(function () { > if (this.checked == true) { >- $("#barcode").addClass("alert"); >+ $("#barcode").addClass("input-warning"); > $("#exemptfines").show(); > } else { >- $("#barcode").removeClass("alert"); >+ $("#barcode").removeClass("input-warning"); > $("#exemptfines").hide(); > } > $("#barcode").focus(); > }); > $("#dropboxcheck").change(function () { > if (this.checked == true) { >- $("#barcode").addClass("alert"); >+ $("#barcode").addClass("input-warning"); > $("#dropboxmode").show(); > > $("#return_date_override_fields :input").prop('disabled', true); > $("#return_date_override").datetimepicker("disable"); > } else { >- $("#barcode").removeClass("alert"); >+ $("#barcode").removeClass("input-warning"); > $("#dropboxmode").hide(); > > $("#return_date_override_fields :input").prop('disabled', false); >@@ -854,10 +876,10 @@ > }); > $("#forgivemanualholdsexpire").change(function () { > if (this.checked == true) { >- $("#barcode").addClass("alert"); >+ $("#barcode").addClass("input-warning"); > $("#forgivemanualholdsexpire-alert").show(); > } else { >- $("#barcode").removeClass("alert"); >+ $("#barcode").removeClass("input-warning"); > $("#forgivemanualholdsexpire-alert").hide(); > } > $("#barcode").focus(); >@@ -866,13 +888,13 @@ > [% IF(overduecharges) %] > $("#barcode").focus(function () { > if (($("#exemptcheck").prop("checked") == true) || ($("#dropboxcheck").prop("checked") == true)) { >- $("#barcode").addClass("alert"); >+ $("#barcode").addClass("input-warning"); > } else { >- $("#barcode").removeClass("alert"); >+ $("#barcode").removeClass("input-warning"); > } > }); > $("#barcode").blur(function () { >- $("#barcode").removeClass("alert"); >+ $("#barcode").removeClass("input-warning"); > }); > [% END %] > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js b/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js >index cd2ca9b..45e381b 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/circulation.js >@@ -54,26 +54,27 @@ $(document).ready(function() { > return false; > }); > >- var checkout_settings = $(".checkout-settings"); >- var checkout_settings_icon = $(".checkout-settings-icon"); >+ var circ_settings = $(".circ-settings"); >+ var circ_settings_icon = $(".circ-settings-icon"); > >- // If any checkboxes in the checkout settings are selected, show the settings by default >- if ( $(".checkout-settings input:checked,#duedatespec[value!='']").length ) { >- checkout_settings.show(); >- checkout_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down"); >+ // If any checkboxes in the circ settings are selected, show the settings by default >+ if ( $(".circ-settings input:checked,#duedatespec[value!='']").length ) { >+ circ_settings.show(); >+ circ_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down"); > } else { >- checkout_settings.hide(); >- checkout_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right"); >+ circ_settings.hide(); >+ circ_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right"); > } > >- $("#show-checkout-settings a").on("click",function(){ >- if( checkout_settings.is(":hidden")){ >- checkout_settings.show(); >- checkout_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down"); >+ $("#show-circ-settings a").on("click",function(e){ >+ e.preventDefault(); >+ if( circ_settings.is(":hidden")){ >+ circ_settings.show(); >+ circ_settings_icon.removeClass("fa-caret-right").addClass("fa-caret-down"); > } else { > $("#barcode").focus(); >- checkout_settings.hide(); >- checkout_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right"); >+ circ_settings.hide(); >+ circ_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right"); > } > }); > >-- >2.1.4
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 20959
:
76136
|
76137
|
76139
|
76526
|
76560
|
76561
|
78733
|
78734
|
78810
|
78812
|
78831
|
78839
|
78840
|
78841
|
79757
|
82995
|
82996
|
82997
|
83180
|
83772
|
86477
|
86729
|
87422
|
87933
|
87934
|
91081
|
91123
|
91164