Bug 11565 [QA Followup] - Hide checkout options when not in use

This follow-up reformats the checkout screen so that checkout settings
like specify due date, on-site checkout, and override high holds are
grouped in a panel which is hidden by default. Clicking a link shows all
the available settings.

Also modified in this patch: The default color for div.hint has been
made a little darker for readability.

To test, apply the patch and clear your browser cache if necessary.

- Check out to a patron who is not blocked from checking out.
- Click the "Checkout settings" link and confirm that the settings panel
  is displayed.
- Test that the settings in the panel behave as expected.
- Test with preferences on and off: decreaseLoanHighHolds,
  OnSiteCheckouts, SpecifyDueDate.

NOTE: This patch is a work in progress. It does not address the issue of
checkout setting being hidden even if they are active.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 1780e00..697e725 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -517,12 +517,11 @@ fieldset.brief ol, fieldset.brief li {
 }
 
 .hint {
-       color : #999999;
+    color : #666;
        font-size : 95%;
 }
 
 fieldset.brief div.hint, fieldset.rows div.hint, div.yui-u div.hint {
-       font-size : 95%;
        margin-bottom : .4em;
 }
 
@@ -1006,32 +1005,40 @@ tr.highlight th[scope=row] {
        border-color : #BCBCBC;
 }
 
-#circ_circulation_issue label {
-       font-size: 105%;
-       font-weight : bold;
-}
-
-#circ_circulation_issue div.hint {
-       color : #666666;
-       margin: .2em 0;
+label.circ_barcode {
+    font-size: 105%;
+    font-weight : bold;
 }
 
-.date-select,
-.onsite_checkout-select {
+.checkout-setting {
     font-size : 85%;
     padding-top : .3em;
 }
 
-#circ_circulation_issue .date-select label,
-.date-select label {
+.checkout-setting label {
     font-size : inherit;
     font-weight: normal;
 }
 
-.date-select input {
+.checkout-setting input {
     vertical-align: middle;
 }
 
+.checkout-settings {
+    background-color: #f4f8f9;
+    border-radius: 0;
+    border-top: 2px solid #b9d8d9;
+    display: none;
+    margin-left: -1em;
+    margin-right: -1em;
+    margin-top: 1em;
+    padding: 1em 1em 0;
+}
+
+#show-checkout-settings {
+    margin-top: .5em;
+}
+
 tr.expired td {
        color : #999999;
 }

diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/pages/circulation.js b/koha-tmpl/intranet-tmpl/prog/en/js/pages/circulation.js
index cea3e88..92dba4b 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/js/pages/circulation.js
+++ b/koha-tmpl/intranet-tmpl/prog/en/js/pages/circulation.js
@@ -45,6 +45,21 @@ $(document).ready(function() {
         export_checkouts(output_format);
         return false;
     });
+
+    var checkout_settings = $(".checkout-settings");
+    var checkout_settings_icon = $(".checkout-settings-icon");
+
+    $("#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");
+        } else {
+            $("#barcode").focus();
+            checkout_settings.hide();
+            checkout_settings_icon.removeClass("fa-caret-down").addClass("fa-caret-right");
+        }
+    });
+
 });
 
 function export_checkouts(format) {

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 633cc0d..3028242 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt
@@ -650,7 +650,7 @@ No patron matched <span class="ex">[% message %]</span>
 
     [% IF (forceallow) %]<input type="hidden" name="forceallow" value="1">[% END %]
 
-    <label for="barcode">Checking out to [% INCLUDE 'patron-title.inc' %]</label>
+    <label class="circ_barcode" for="barcode">Checking out to [% INCLUDE 'patron-title.inc' %]</label>
 
        <div class="hint">Enter item barcode:</div>
 
@@ -661,18 +661,44 @@ No patron matched <span class="ex">[% message %]</span>
     [% END %]
     <button type="submit" class="btn">Check out</button>
 
-    [% UNLESS noissues %]
-        <div class="date-select">
-            [% IF NEEDSCONFIRMATION %]
-                <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" disabled="disabled" />
-            [% ELSE %]
-                <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" />
+    <div id="show-checkout-settings">
+        <a href="#"><i class="fa fa-caret-right checkout-settings-icon"></i> Checkout settings</a>
+    </div>
+
+    <div class="checkout-settings">
+
+        [% UNLESS ( noissues && Koha.Preference('OnSiteCheckoutsForce') ) %]
+            [% IF ( SpecifyDueDate ) %]
+                <div id="specify-due-date" class="checkout-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 %]" readonly="readonly" />
+                    [% ELSE %]
+                        <input type="text" size="13" id="duedatespec" name="duedatespec" value="" readonly="readonly" />
+                    [% END %]
+                    <label for="stickyduedate"> Remember for session:</label>
+                    [% IF ( stickyduedate ) %]
+                        <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" checked="checked" />
+                    [% ELSE %]
+                        <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" />
+                    [% END %]
+                    <button class="btn btn-small action" id="cleardate" name="cleardate" onclick="this.checked = false; this.form.duedatespec.value = ''; this.form.stickyduedate.checked = false; this.form.barcode.focus(); return false;" >Clear</button>
+                </div>
             [% END %]
+        [% END %]
 
-            <label for="auto_renew">Automatic renewal</label>
+        [% UNLESS ( noissues ) %]
+            <div id="set-automatic-renewal" class="checkout-setting">
+                [% IF NEEDSCONFIRMATION %]
+                    <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" disabled="disabled" />
+                [% ELSE %]
+                    <input type="checkbox" name="auto_renew" id="auto_renew" value="auto_renew" />
+                [% END %]
 
-            <span class="circ-override-high-holds">
-                [% IF Koha.Preference('decreaseLoanHighHolds') %]
+                <label for="auto_renew">Automatic renewal</label>
+            </div>
+            [% IF Koha.Preference('decreaseLoanHighHolds') %]
+                <div id="set_high_holds_overrride" class="checkout-setting">
                     [% IF NEEDSCONFIRMATION %]
                         [% IF override_high_holds %]
                             <input type="checkbox" name="override_high_holds" id="override_high_holds" value="1" disabled="disabled" checked="checked"/>
@@ -686,45 +712,26 @@ No patron matched <span class="ex">[% message %]</span>
                             <input type="checkbox" name="override_high_holds" id="override_high_holds" value="1" />
                         [% END %]
                     [% END %]
-                    <label for="override_high_holds">Don't decrease loan length based on holds</label>
-                [% END %]
-            </span>
-        </div>
-    [% END %]
+                    <label for="override_high_holds">Don't decrease checkout length based on holds</label>
+                </div>
+            [% END %]
+        [% END %]
 
-    [% UNLESS ( noissues && Koha.Preference('OnSiteCheckoutsForce') ) %]
-        [% IF ( SpecifyDueDate ) %]
-            <div class="date-select">
-                <div class="hint">Specify due date [% INCLUDE 'date-format.inc' %]: </div>
-                [% IF ( duedatespec ) %]
-                    <input type="text" size="13" id="duedatespec" name="duedatespec" value="[% duedatespec %]" readonly="readonly" />
-                [% ELSE %]
-                    <input type="text" size="13" id="duedatespec" name="duedatespec" value="" readonly="readonly" />
-                [% END %]
-                <label for="stickyduedate"> Remember for session:</label>
-                [% IF ( stickyduedate ) %]
-                    <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" checked="checked" />
+        [% IF Koha.Preference('OnSiteCheckouts') %]
+            <div id="onsite_checkout-select" class="checkout-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>
+                        <input type="text" name="duedatespec" id="duedatespec" readonly="readonly" />
+                        <input type="hidden" name="onsite_checkout" checked="checked" value="1" />
+                    </div>
                 [% ELSE %]
-                    <input type="checkbox" id="stickyduedate" onclick="this.form.barcode.focus();" name="stickyduedate" />
+                    <input type="checkbox" id="onsite_checkout" name="onsite_checkout" /> <label for="onsite_checkout">On-site checkout</label>
                 [% END %]
-                <button class="btn btn-small action" id="cleardate" name="cleardate" onclick="this.checked = false; this.form.duedatespec.value = ''; this.form.stickyduedate.checked = false; this.form.barcode.focus(); return false;" >Clear</button>
             </div>
         [% END %]
-    [% END %]
 
-    [% IF Koha.Preference('OnSiteCheckouts') %]
-        <div class="onsite_checkout-select">
-            [% 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>
-                    <input type="text" name="duedatespec" id="duedatespec" readonly="readonly" />
-                    <input type="hidden" name="onsite_checkout" checked="checked" value="1" />
-                </div>
-            [% ELSE %]
-                <input type="checkbox" id="onsite_checkout" name="onsite_checkout" /> <label for="onsite_checkout">On-site checkout</label>
-            [% END %]
-        </div>
-    [% END %]
+    </div> <!-- /.checkout-settings -->
 
           <input type="hidden" name="borrowernumber" id="borrowernumber" value="[% borrowernumber %]" />
           <input type="hidden" name="branch" value="[% branch %]" />