From 21f717fe000f0771e26cfae861b7c6b7de713cd3 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. Signed-off-by: Lucas Gass Signed-off-by: Katrin Fischer --- 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 e3fb1e464f..134c94e319 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 eec665f6b1..21fda48f6e 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/returns.tt @@ -1007,7 +1007,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