From a373f8ae4b54bfb64e4367854078ad0f40aac611 Mon Sep 17 00:00:00 2001 From: Bernd Bestel Date: Fri, 10 Jan 2025 20:26:37 +0100 Subject: [PATCH] More modal iframe dialog handling improvements --- changelog/77_UNRELEASED_xxxx-xx-xx.md | 3 +++ public/css/grocy.css | 14 ++++++++++ public/js/grocy.js | 36 ++++++++++++++++++-------- public/viewjs/batteryform.js | 2 +- public/viewjs/consume.js | 5 +++- public/viewjs/inventory.js | 5 +++- public/viewjs/locationform.js | 2 +- public/viewjs/productbarcodeform.js | 2 +- public/viewjs/productgroupform.js | 2 +- public/viewjs/purchase.js | 5 +++- public/viewjs/recipeposform.js | 6 ++--- public/viewjs/shoppinglistform.js | 2 +- public/viewjs/shoppinglistitemform.js | 11 +++++--- public/viewjs/shoppinglocationform.js | 2 +- public/viewjs/stockentryform.js | 2 +- public/viewjs/taskcategoryform.js | 2 +- public/viewjs/taskform.js | 2 +- public/viewjs/transfer.js | 5 +++- public/viewjs/userentityform.js | 2 +- views/components/batterycard.blade.php | 3 ++- views/components/chorecard.blade.php | 3 ++- views/components/productcard.blade.php | 6 +++-- views/layout/default.blade.php | 3 ++- views/productform.blade.php | 34 ++++++++++++++++++++---- 24 files changed, 117 insertions(+), 42 deletions(-) diff --git a/changelog/77_UNRELEASED_xxxx-xx-xx.md b/changelog/77_UNRELEASED_xxxx-xx-xx.md index 20666abb..859b3981 100644 --- a/changelog/77_UNRELEASED_xxxx-xx-xx.md +++ b/changelog/77_UNRELEASED_xxxx-xx-xx.md @@ -56,7 +56,10 @@ - Optimized nested modal dialogs: - Nested dialogs are now no longer displayed "in each other" and instead "on top of each other" + - Dialogs can now be closed with the `ESC` key on the keyboard + - There is no longer a close button at the bottom (outside of the displayed `iframe`) and instead one at the top right corner of the dialog - Wide dialogs (e.g. all showing a table, like showing stock entries of a product from the stock overview more/context menu per line) now use the full screen width + - Improved handling of the initial field focus ### API diff --git a/public/css/grocy.css b/public/css/grocy.css index 86a7a8ae..356f0e2d 100755 --- a/public/css/grocy.css +++ b/public/css/grocy.css @@ -120,6 +120,11 @@ input[type='number'] { appearance: textfield; } +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; +} + .sticky-form-footer { border-top: 1px solid #d6d6d6; background-color: white; @@ -275,11 +280,20 @@ a:not([href]) { z-index: 99998; } +/* There is a little too much padding around modals */ +.modal-body { + padding: 0.75rem; +} + @media (min-width: 576px) { .form .modal-dialog { max-width: 650px; } + .wider .modal-dialog { + max-width: 800px; + } + .table .modal-dialog { max-width: 90%; } diff --git a/public/js/grocy.js b/public/js/grocy.js index ec41f9d9..41567e42 100644 --- a/public/js/grocy.js +++ b/public/js/grocy.js @@ -703,6 +703,30 @@ if (Grocy.CalendarFirstDayOfWeek) }); } +if (GetUriParam("embedded")) +{ + $("body").append('
\ + \ +
'); +} + +$(document).on("click", ".close-last-modal-button", function() +{ + window.parent.postMessage(WindowMessageBag("CloseLastModal"), Grocy.BaseUrl); +}); + +$("body").on("keydown", function(e) +{ + if (e.key == "Escape") + { + window.parent.postMessage(WindowMessageBag("CloseLastModal"), Grocy.BaseUrl); + } +}); + + $(window).on("message", function(e) { var data = e.originalEvent.data; @@ -769,17 +793,7 @@ function IframeModal(link, dialogClass = "form") size: 'large', backdrop: true, closeButton: false, - className: dialogClass, - buttons: { - cancel: { - label: __t('Close'), - className: 'btn-secondary responsive-button', - callback: function() - { - $(".modal").last().modal("hide"); - } - } - } + className: dialogClass }); } diff --git a/public/viewjs/batteryform.js b/public/viewjs/batteryform.js index 7552f7ff..b258a858 100644 --- a/public/viewjs/batteryform.js +++ b/public/viewjs/batteryform.js @@ -107,5 +107,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('battery-form'); diff --git a/public/viewjs/consume.js b/public/viewjs/consume.js index 7b85c0a0..e550a6c3 100644 --- a/public/viewjs/consume.js +++ b/public/viewjs/consume.js @@ -492,7 +492,10 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e) Grocy.Components.ProductPicker.HideCustomError(); Grocy.FrontendHelpers.ValidateForm('consume-form'); - $('#display_amount').focus(); + setTimeout(function() + { + $('#display_amount').focus(); + }, 150); if (productDetails.stock_amount == productDetails.stock_amount_opened || productDetails.product.enable_tare_weight_handling == 1) { diff --git a/public/viewjs/inventory.js b/public/viewjs/inventory.js index 16272ca0..67ebe15d 100644 --- a/public/viewjs/inventory.js +++ b/public/viewjs/inventory.js @@ -311,7 +311,10 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e) $('#display_amount').val(productDetails.stock_amount); RefreshLocaleNumberInput(); $(".input-group-productamountpicker").trigger("change"); - $('#display_amount').focus(); + setTimeout(function() + { + $('#display_amount').focus(); + }, 150); $('#display_amount').trigger('keyup'); RefreshPriceHint(); }, diff --git a/public/viewjs/locationform.js b/public/viewjs/locationform.js index 9a4e48a1..a58565f4 100644 --- a/public/viewjs/locationform.js +++ b/public/viewjs/locationform.js @@ -93,4 +93,4 @@ Grocy.FrontendHelpers.ValidateForm('location-form'); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); diff --git a/public/viewjs/productbarcodeform.js b/public/viewjs/productbarcodeform.js index 1745952a..86960db1 100644 --- a/public/viewjs/productbarcodeform.js +++ b/public/viewjs/productbarcodeform.js @@ -99,7 +99,7 @@ Grocy.FrontendHelpers.ValidateForm('barcode-form'); setTimeout(function() { $('#barcode').focus(); -}, 250); +}, 150); RefreshLocaleNumberInput(); Grocy.Components.UserfieldsForm.Load() diff --git a/public/viewjs/productgroupform.js b/public/viewjs/productgroupform.js index 2af5a8d0..dc33e5b6 100644 --- a/public/viewjs/productgroupform.js +++ b/public/viewjs/productgroupform.js @@ -78,5 +78,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('product-group-form'); diff --git a/public/viewjs/purchase.js b/public/viewjs/purchase.js index ed1b662b..7234c4e3 100644 --- a/public/viewjs/purchase.js +++ b/public/viewjs/purchase.js @@ -343,7 +343,10 @@ if (Grocy.Components.ProductPicker !== undefined) $("#stock_label_type").trigger("change"); } - $("#display_amount").focus(); + setTimeout(function() + { + $('#display_amount').focus(); + }, 150); Grocy.FrontendHelpers.ValidateForm('purchase-form'); if (GetUriParam("flow") === "shoppinglistitemtostock" && BoolVal(Grocy.UserSettings.shopping_list_to_stock_workflow_auto_submit_when_prefilled) && Grocy.FrontendHelpers.ValidateForm("purchase-form")) diff --git a/public/viewjs/recipeposform.js b/public/viewjs/recipeposform.js index 74b3043b..97564c09 100644 --- a/public/viewjs/recipeposform.js +++ b/public/viewjs/recipeposform.js @@ -124,14 +124,14 @@ if (!Grocy.Components.ProductPicker.InAnyFlow()) setTimeout(function() { $("#display_amount").focus(); - }, 250); + }, 150); } else { setTimeout(function() { Grocy.Components.ProductPicker.GetInputElement().focus(); - }, 250); + }, 150); } } else @@ -143,7 +143,7 @@ else setTimeout(function() { Grocy.Components.ProductPicker.GetInputElement().focus(); - }, 250); + }, 150); } } diff --git a/public/viewjs/shoppinglistform.js b/public/viewjs/shoppinglistform.js index 44c23e49..bf17ea70 100644 --- a/public/viewjs/shoppinglistform.js +++ b/public/viewjs/shoppinglistform.js @@ -82,5 +82,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('shopping-list-form'); diff --git a/public/viewjs/shoppinglistitemform.js b/public/viewjs/shoppinglistitemform.js index aa9555d4..3f17999b 100644 --- a/public/viewjs/shoppinglistitemform.js +++ b/public/viewjs/shoppinglistitemform.js @@ -210,7 +210,10 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e) $("#display_amount").trigger("change"); } - $('#display_amount').focus(); + setTimeout(function() + { + $('#display_amount').focus(); + }, 150); Grocy.FrontendHelpers.ValidateForm('shoppinglist-form'); Grocy.ShoppingListItemFormInitialLoadDone = true; }, @@ -289,14 +292,14 @@ if (!Grocy.Components.ProductPicker.InAnyFlow()) setTimeout(function() { $("#display_amount").focus(); - }, 250); + }, 150); } else { setTimeout(function() { Grocy.Components.ProductPicker.GetInputElement().focus(); - }, 250); + }, 150); } } else @@ -308,7 +311,7 @@ else setTimeout(function() { Grocy.Components.ProductPicker.GetInputElement().focus(); - }, 250); + }, 150); } } diff --git a/public/viewjs/shoppinglocationform.js b/public/viewjs/shoppinglocationform.js index 598f2c67..ba3bc05e 100644 --- a/public/viewjs/shoppinglocationform.js +++ b/public/viewjs/shoppinglocationform.js @@ -92,5 +92,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('shoppinglocation-form'); diff --git a/public/viewjs/stockentryform.js b/public/viewjs/stockentryform.js index d36e692d..650dc055 100644 --- a/public/viewjs/stockentryform.js +++ b/public/viewjs/stockentryform.js @@ -149,5 +149,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#amount').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm("stockentry-form"); diff --git a/public/viewjs/taskcategoryform.js b/public/viewjs/taskcategoryform.js index a28b5c62..727de55f 100644 --- a/public/viewjs/taskcategoryform.js +++ b/public/viewjs/taskcategoryform.js @@ -92,5 +92,5 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('task-category-form'); diff --git a/public/viewjs/taskform.js b/public/viewjs/taskform.js index 7ca88741..fd6b1ee5 100644 --- a/public/viewjs/taskform.js +++ b/public/viewjs/taskform.js @@ -112,6 +112,6 @@ Grocy.Components.UserfieldsForm.Load(); setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.Components.DateTimePicker.GetInputElement().trigger('input'); Grocy.FrontendHelpers.ValidateForm('task-form'); diff --git a/public/viewjs/transfer.js b/public/viewjs/transfer.js index b70040aa..86549b74 100644 --- a/public/viewjs/transfer.js +++ b/public/viewjs/transfer.js @@ -280,7 +280,10 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e) Grocy.Components.ProductPicker.HideCustomError(); Grocy.FrontendHelpers.ValidateForm('transfer-form'); - $('#display_amount').focus(); + setTimeout(function() + { + $('#display_amount').focus(); + }, 150); }, function(xhr) { diff --git a/public/viewjs/userentityform.js b/public/viewjs/userentityform.js index 99edc59b..0b1ea86b 100644 --- a/public/viewjs/userentityform.js +++ b/public/viewjs/userentityform.js @@ -103,7 +103,7 @@ $("#show_in_sidebar_menu").on("click", function() setTimeout(function() { $('#name').focus(); -}, 250); +}, 150); Grocy.FrontendHelpers.ValidateForm('userentity-form'); // Click twice to trigger on-click but not change the actual checked state diff --git a/views/components/batterycard.blade.php b/views/components/batterycard.blade.php index b92d235d..649118fa 100644 --- a/views/components/batterycard.blade.php +++ b/views/components/batterycard.blade.php @@ -27,7 +27,8 @@ + href="#" + data-dialog-type="table"> {{ $__t('Battery journal') }} diff --git a/views/components/chorecard.blade.php b/views/components/chorecard.blade.php index 02a6c3aa..40e02286 100644 --- a/views/components/chorecard.blade.php +++ b/views/components/chorecard.blade.php @@ -27,7 +27,8 @@ + href="#" + data-dialog-type="table"> {{ $__t('Chore journal') }} diff --git a/views/components/productcard.blade.php b/views/components/productcard.blade.php index 95e349d2..9536e131 100644 --- a/views/components/productcard.blade.php +++ b/views/components/productcard.blade.php @@ -29,12 +29,14 @@ + href="#" + data-dialog-type="table"> {{ $__t('Stock journal') }} + href="#" + data-dialog-type="table"> {{ $__t('Stock entries') }} diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php index 37061968..9134225b 100644 --- a/views/layout/default.blade.php +++ b/views/layout/default.blade.php @@ -672,6 +672,7 @@ href="{{ $U('/barcodescannertesting') }}"> {{ $__t('Barcode scanner testing') }}
 {{ $__t('About Grocy') }} @@ -681,7 +682,7 @@ @endif
-
+
diff --git a/views/productform.blade.php b/views/productform.blade.php index fe8b7de2..1a31b593 100644 --- a/views/productform.blade.php +++ b/views/productform.blade.php @@ -25,11 +25,13 @@ @@ -156,7 +158,26 @@ for="move_on_open">{{ $__t('Move on open') }} 
@@ -773,11 +794,13 @@