More modal iframe dialog handling improvements

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
 

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%;
 	}

public/js/grocy.js

@@ -703,6 +703,30 @@ if (Grocy.CalendarFirstDayOfWeek)
 	});
 }
 
+if (GetUriParam("embedded"))
+{
+	$("body").append('<div class="fixed-top"> \
+		<button class="btn btn-light float-right close-last-modal-button" \
+			type="button" \> \
+			<i class="fa-solid fa-xmark"></i> \
+		</button> \
+	</div>');
+}
+
+$(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,
+		className: dialogClass
-		buttons: {
-			cancel: {
-				label: __t('Close'),
-				className: 'btn-secondary responsive-button',
-				callback: function()
-				{
-					$(".modal").last().modal("hide");
-				}
-			}
-		}
 	});
 }
 

public/viewjs/batteryform.js

@@ -107,5 +107,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm('battery-form');

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)
 				{

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();
 			},

public/viewjs/locationform.js

@@ -93,4 +93,4 @@ Grocy.FrontendHelpers.ValidateForm('location-form');
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);

public/viewjs/productbarcodeform.js

@@ -99,7 +99,7 @@ Grocy.FrontendHelpers.ValidateForm('barcode-form');
 setTimeout(function()
 {
 	$('#barcode').focus();
-}, 250);
+}, 150);
 RefreshLocaleNumberInput();
 Grocy.Components.UserfieldsForm.Load()
 

public/viewjs/productgroupform.js

@@ -78,5 +78,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm('product-group-form');

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"))

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);
 	}
 }
 

public/viewjs/shoppinglistform.js

@@ -82,5 +82,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm('shopping-list-form');

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);
 	}
 }
 

public/viewjs/shoppinglocationform.js

@@ -92,5 +92,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm('shoppinglocation-form');

public/viewjs/stockentryform.js

@@ -149,5 +149,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#amount').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm("stockentry-form");

public/viewjs/taskcategoryform.js

@@ -92,5 +92,5 @@ Grocy.Components.UserfieldsForm.Load();
 setTimeout(function()
 {
 	$('#name').focus();
-}, 250);
+}, 150);
 Grocy.FrontendHelpers.ValidateForm('task-category-form');

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');

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)
 			{

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

views/components/batterycard.blade.php

@@ -27,7 +27,8 @@
 						</a>
 						<a id="batterycard-battery-journal-button"
 							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-							href="#">
+							href="#"
+							data-dialog-type="table">
 							{{ $__t('Battery journal') }}
 						</a>
 					</div>

views/components/chorecard.blade.php

@@ -27,7 +27,8 @@
 						</a>
 						<a id="chorecard-chore-journal-button"
 							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-							href="#">
+							href="#"
+							data-dialog-type="table">
 							{{ $__t('Chore journal') }}
 						</a>
 					</div>

views/components/productcard.blade.php

@@ -29,12 +29,14 @@
 						</a>
 						<a id="productcard-product-journal-button"
 							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-							href="#">
+							href="#"
+							data-dialog-type="table">
 							{{ $__t('Stock journal') }}
 						</a>
 						<a id="productcard-product-stock-button"
 							class="btn btn-sm btn-outline-secondary py-0 mr-1 float-right disabled show-as-dialog-link"
-							href="#">
+							href="#"
+							data-dialog-type="table">
 							{{ $__t('Stock entries') }}
 						</a>
 					</div>

views/layout/default.blade.php

@@ -672,6 +672,7 @@
 							href="{{ $U('/barcodescannertesting') }}"><i class="fa-solid fa-fw fa-barcode"></i>&nbsp;{{ $__t('Barcode scanner testing') }}</a>
 						<div class="dropdown-divider"></div>
 						<a class="dropdown-item discrete-link show-as-dialog-link"
+							data-dialog-type="wider"
 							href="{{ $U('/about?embedded') }}"><i class="fa-solid fa-fw fa-info"></i>&nbsp;{{ $__t('About Grocy') }}</a>
 					</div>
 				</li>
@@ -681,7 +682,7 @@
 	@endif
 
 	<div class="@if(GROCY_AUTHENTICATED) content-wrapper @endif pt-0">
-		<div class="container-fluid @if(GROCY_AUTHENTICATED) pr-1 pl-md-3 pl-2 @endif">
+		<div class="container-fluid @if(GROCY_AUTHENTICATED && !$embedded) pr-1 pl-md-3 pl-2 @endif @if($embedded) px-1 @endif">
 			<div class="row mb-3">
 				<div id="page-content"
 					class="col content-text">

views/productform.blade.php

@@ -25,11 +25,13 @@
 			<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
 				id="related-links">
 				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-					href="{{ $U('/stockentries?embedded&product=') }}{{ $product->id }}">
+					href="{{ $U('/stockentries?embedded&product=') }}{{ $product->id }}"
+					data-dialog-type="table">
 					{{ $__t('Stock entries') }}
 				</a>
 				<a class="btn btn-outline-secondary m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-					href="{{ $U('/stockjournal?embedded&product=') }}{{ $product->id }}">
+					href="{{ $U('/stockjournal?embedded&product=') }}{{ $product->id }}"
+					data-dialog-type="table">
 					{{ $__t('Stock journal') }}
 				</a>
 			</div>
@@ -156,7 +158,26 @@
 						for="move_on_open">{{ $__t('Move on open') }}&nbsp;<i class="fa-solid fa-question-circle text-muted"
 							data-toggle="tooltip"
 							data-trigger="hover click"
-							title="{{ $__t("When enabled, on marking this product as opened, the corresponding amount will be moved to the default consume location")
+							title="{{ $__t("
+							When
+							enabled,
+							on
+							marking
+							this
+							product
+							as
+							opened,
+							the
+							corresponding
+							amount
+							will
+							be
+							moved
+							to
+							the
+							default
+							consume
+							location")
 							}}"></i>
 					</label>
 				</div>
@@ -773,11 +794,13 @@
 					<div class="related-links collapse d-md-flex order-2 width-xs-sm-100"
 						id="related-links">
 						<a class="btn btn-primary btn-sm m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-							href="{{ $U('/quantityunitconversion/new?embedded&product=' . $product->id ) }}">
+							href="{{ $U('/quantityunitconversion/new?embedded&product=' . $product->id ) }}"
+							data-dialog-type="wider">
 							{{ $__t('Add') }}
 						</a>
 						<a class="btn btn-outline-primary btn-sm m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
 							href="{{ $U('/quantityunitconversionsresolved?embedded&product=' . $product->id ) }}"
+							data-dialog-type="wider"
 							data-toggle="tooltip"
 							title="{{ $__t('This shows all to this product directly or indirectly related quantity units and their derived conversion factors') }}">
 							{{ $__t('Show resolved conversions') }}
@@ -808,7 +831,8 @@
 						<tr>
 							<td class="fit-content border-right">
 								<a class="btn btn-sm btn-info show-as-dialog-link @if($quConversion->product_id == null) disabled @endif"
-									href="{{ $U('/quantityunitconversion/' . $quConversion->id . '?embedded&product=' . $product->id ) }}">
+									href="{{ $U('/quantityunitconversion/' . $quConversion->id . '?embedded&product=' . $product->id ) }}"
+									data-dialog-type="wider">
 									<i class="fa-solid fa-edit"></i>
 								</a>
 								<a class="btn btn-sm btn-danger qu-conversion-delete-button @if($quConversion->product_id == null) disabled @endif"