From 9222441ff89d8ebcdfb48b7ffb1ea3a808f9b071 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Mon, 19 Apr 2021 11:49:25 +0000 Subject: [PATCH] Bug 27847: Don't obscure page when checkin modal is non-blocking This patch changes the series of events striggered when a non-blocking modal dialog is displayed during checkin. If the "TransfersBlockCirc" preference is set to "Don't block," the user can continue to check in even though a transfer dialog has appeared. This patch hides the modal's "backdrop" element so that the modal doesn't look like one which blocks further action. There is no Bootstrap backdrop option which both hides the backdrop and makes it non-blocking, so we have to use the default non-blocking option and "manually" hide the backdrop. The "show.bs.modal" event must be added in order to make the necessary change before the modal is displayed. This prevents the darkened backdrop from appearing and then being hidden. To test, apply the patch and rebuild the staff interface CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Set the "TransfersBlockCirc" preference to "Don't block." - Check in an item which belongs to another library. - A modal dialog should be displayed: "Please return this item to XXX" - The page "behind" the modal should not be darkened, and the cursor focus should remain in the check-in field. - Checking in an item which as a hold should still trigger the "blocking" behavior: The modal must be dismissed by clicking one of its buttons (not the backdrop) and the page behind the modal should be darkend. - Test with "TransfersBlockCirc" set to "Block." Checking in an item belonging to another library should trigger the "blocking" modal behavior. - Test that other checkins still work correctly. --- koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss | 6 ++++++ koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt | 8 +++++++- 2 files changed, 13 insertions(+), 1 deletion(-) 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 dd1211569e..f5bef131a5 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -254,6 +254,12 @@ body { line-height: 1.22; padding: 0 0 4em; text-align: left; + + &.nobackdrop { + .modal-backdrop { + opacity: 0; + } + } } br { 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 6c8eab60e0..a6097f9a03 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt @@ -1000,7 +1000,13 @@ }).on('hidden.bs.modal', function() { $("#barcode").prop("disabled", false).focus(); }); - $(".modal.noblock").modal({ backdrop: 'static'}).on('shown.bs.modal', function() { + $(".modal.noblock").on('show.bs.modal', function() { + /* If the modal doesn't block further action, the backdrop should be hidden. + In order for this to happen smoothly we add a class to the body tag which + targeted in the CSS */ + $("body").addClass("nobackdrop"); + }).modal() + .on('shown.bs.modal', function() { $("#barcode").prop("disabled", false).focus(); }).on('hidden.bs.modal', function() { $("#barcode").prop("disabled", false).focus(); -- 2.11.0