From 9c0e0c5870fe97793c40f2afaffaf2f664043ac2 Mon Sep 17 00:00:00 2001
From: Bernd Bestel <bernd@berrnd.de>
Date: Tue, 21 Jan 2025 20:59:01 +0100
Subject: [PATCH] Optimized big header button menus

---
 localization/strings.pot      |  6 +++
 public/viewjs/shoppinglist.js |  2 +-
 views/shoppinglist.blade.php  | 88 +++++++++++++++++++++--------------
 views/stockoverview.blade.php | 14 +++---
 4 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/localization/strings.pot b/localization/strings.pot
index 7f190871..989ec81b 100644
--- a/localization/strings.pot
+++ b/localization/strings.pot
@@ -2470,3 +2470,9 @@ msgstr ""
 
 msgid "Round up quantity amounts to the nearest whole number"
 msgstr ""
+
+msgid "Stock actions"
+msgstr ""
+
+msgid "List actions"
+msgstr ""
diff --git a/public/viewjs/shoppinglist.js b/public/viewjs/shoppinglist.js
index 6eb85b6b..3cbe5f19 100644
--- a/public/viewjs/shoppinglist.js
+++ b/public/viewjs/shoppinglist.js
@@ -82,7 +82,7 @@ $(".status-filter-message").on("click", function()
 
 $("#delete-selected-shopping-list").on("click", function()
 {
-	var objectName = $("#selected-shopping-list option:selected").text();
+	var objectName = $("#selected-shopping-list option:selected").attr("data-shoppinglist-name");
 	var objectId = $("#selected-shopping-list").val();
 
 	bootbox.confirm({
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php
index d074b436..5be83ffe 100644
--- a/views/shoppinglist.blade.php
+++ b/views/shoppinglist.blade.php
@@ -51,37 +51,47 @@
 				id="related-links">
 				@if(GROCY_FEATURE_FLAG_SHOPPINGLIST_MULTIPLE_LISTS)
 				<div class="my-auto float-right">
-					<select class="custom-control custom-select custom-select-sm"
+					<select class="custom-control custom-select bg-light font-weight-bold mt-md-0 mt-1"
 						id="selected-shopping-list">
 						@foreach($shoppingLists as $shoppingList)
-						<option @if($shoppingList->id == $selectedShoppingListId) selected="selected" @endif value="{{ $shoppingList->id }}">{{ $shoppingList->name }} ({{ $shoppingList->item_count }})</option>
+						<option @if($shoppingList->id == $selectedShoppingListId) selected="selected" @endif value="{{ $shoppingList->id }}" data-shoppinglist-name="{{ $shoppingList->name }}">{{ $shoppingList->name }} ({{ $shoppingList->item_count }})</option>
 						@endforeach
 					</select>
 				</div>
-				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-					href="{{ $U('/shoppinglist/new?embedded') }}">
-					{{ $__t('New shopping list') }}
-				</a>
-				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right show-as-dialog-link"
-					href="{{ $U('/shoppinglist/' . $selectedShoppingListId . '?embedded') }}">
-					{{ $__t('Edit shopping list') }}
-				</a>
-				<a id="delete-selected-shopping-list"
-					class="btn btn-outline-danger responsive-button m-1 mt-md-0 mb-md-0 float-right @if($selectedShoppingListId == 1) disabled @endif"
-					href="#">
-					{{ $__t('Delete shopping list') }}
-				</a>
+				<div class="dropdown">
+					<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right dropdown-toggle"
+						href="#"
+						data-toggle="dropdown">
+						{{ $__t('List actions') }}
+					</a>
+					<div class="dropdown-menu">
+						<a class="dropdown-item show-as-dialog-link"
+							href="{{ $U('/shoppinglist/new?embedded') }}">
+							{{ $__t('New shopping list') }}
+						</a>
+						<a class="dropdown-item show-as-dialog-link"
+							href="{{ $U('/shoppinglist/' . $selectedShoppingListId . '?embedded') }}">
+							{{ $__t('Edit shopping list') }}
+						</a>
+						<a id="delete-selected-shopping-list"
+							class="dropdown-item text-danger @if($selectedShoppingListId == 1) disabled text-muted @endif"
+							href="#">
+							{{ $__t('Delete shopping list') }}
+						</a>
+						<div class="dropdown-divider"></div>
+						<a id="print-shopping-list-button"
+							class="dropdown-item"
+							href="#">
+							{{ $__t('Print') }}
+						</a>
+					</div>
+				</div>
 				@else
 				<input type="hidden"
 					name="selected-shopping-list"
 					id="selected-shopping-list"
 					value="1">
 				@endif
-				<a id="print-shopping-list-button"
-					class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
-					href="#">
-					{{ $__t('Print') }}
-				</a>
 			</div>
 		</div>
 		<div id="filter-container"
@@ -107,23 +117,29 @@
 						{{ $__t('Clear done items') }}
 					</a>
 				</div>
-				<a id="add-all-items-to-stock-button"
-					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-					href="#">
-					{{ $__t('Add all list items to stock') }}
-				</a>
-				@if(!boolval($userSettings['shopping_list_auto_add_below_min_stock_amount']))
-				<a id="add-products-below-min-stock-amount"
-					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-					href="#">
-					{{ $__t('Add products that are below defined min. stock amount') }}
-				</a>
+
+				@if(GROCY_FEATURE_FLAG_STOCK)
+				<div class="dropdown d-inline">
+					<a class="btn btn-sm btn-outline-dark responsive-button mb-1 dropdown-toggle"
+						href="#"
+						data-toggle="dropdown">
+						{{ $__t('Stock actions') }}
+					</a>
+					<div class="dropdown-menu text-right">
+						<a id="add-all-items-to-stock-button"
+							class="dropdown-item"
+							href="#">{{ $__t('Add all list items to stock') }}</a>
+						@if(!boolval($userSettings['shopping_list_auto_add_below_min_stock_amount']))
+						<a id="add-products-below-min-stock-amount"
+							class="dropdown-item"
+							href="#">{{ $__t('Add products that are below defined min. stock amount') }}</a>
+						@endif
+						<a id="add-overdue-expired-products"
+							class="dropdown-item"
+							href="#">{{ $__t('Add overdue/expired products') }}</a>
+					</div>
+				</div>
 				@endif
-				<a id="add-overdue-expired-products"
-					class="btn btn-outline-primary btn-sm mb-1 responsive-button @if(!GROCY_FEATURE_FLAG_STOCK) d-none @endif"
-					href="#">
-					{{ $__t('Add overdue/expired products') }}
-				</a>
 			</div>
 		</div>
 	</div>
diff --git a/views/stockoverview.blade.php b/views/stockoverview.blade.php
index 9aa19c2b..44bfa899 100755
--- a/views/stockoverview.blade.php
+++ b/views/stockoverview.blade.php
@@ -35,13 +35,7 @@
 					href="{{ $U('/stockentries') }}">
 					{{ $__t('Stock entries') }}
 				</a>
-				@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
-				<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right"
-					href="{{ $U('/locationcontentsheet') }}">
-					{{ $__t('Location Content Sheet') }}
-				</a>
-				@endif
-				@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
+				@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING || GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
 				<div class="dropdown">
 					<a class="btn btn-outline-dark responsive-button m-1 mt-md-0 mb-md-0 float-right dropdown-toggle"
 						href="#"
@@ -49,8 +43,14 @@
 						{{ $__t('Reports') }}
 					</a>
 					<div class="dropdown-menu">
+						@if(GROCY_FEATURE_FLAG_STOCK_LOCATION_TRACKING)
+						<a class="dropdown-item"
+							href="{{ $U('/locationcontentsheet') }}">{{ $__t('Location Content Sheet') }}</a>
+						@endif
+						@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
 						<a class="dropdown-item"
 							href="{{ $U('/stockreports/spendings') }}">{{ $__t('Spendings') }}</a>
+						@endif
 					</div>
 				</div>
 				@endif