From 54400946b5b36093989d43835743e1f065f47b64 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  | 142 ++++++++++++---------
 .../intranet-tmpl/prog/js/pages/circulation.js     |  29 +++--
 4 files changed, 125 insertions(+), 90 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 ab2a4228..9107597 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;
@@ -1975,7 +1975,7 @@ i {
     }
 }
 
-.checkout-setting {
+.circ-setting {
     font-size: 85%;
     padding-top: .3em;
 
@@ -1989,7 +1989,7 @@ i {
     }
 }
 
-.checkout-settings {
+.circ-settings {
     background-color: #F4F8F9;
     border-radius: 0;
     border-top: 2px solid #B9D8D9;
@@ -2000,10 +2000,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 2a06845..5030478 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt
@@ -598,30 +598,59 @@
         </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 | html %] ).</p>
-    </div>
-
-<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