Redesign menu

2026-04-22 22:53:24 +02:00
parent ded24b53b4
commit 53a7212dfe
5 changed files with 271 additions and 101 deletions
--- a/js/views/ShoppingList.js
+++ b/js/views/ShoppingList.js
@@ -18,6 +18,7 @@ import { addDays, startOfDay, startOfMonth } from '../services/dateUtils.js';
 import { createSwipePopoverCalendarHTML, initSwipePopoverCalendar } from '../ui/swipePopoverCalendar.js';
 import { createCalendarPopoverController, createCalendarPopoverHTML } from '../ui/calendarPopover.js';
 import { showAppToast } from '../ui/toast.js';
+import { ensureFilterPopoverStyles } from '../ui/filterPopover.js?v=1';

 /* ── helpers ── */

@@ -118,20 +119,13 @@ function groupByCategory(items) {
 export function getShoppingListHTML() {
    return `
    <div id="shopping-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:rgb(var(--app-bg-rgb)) !important;">
-
-        <!-- ── header ── -->
-        <div class="shrink-0 px-4 pt-5 pb-0">
-
-            <!-- title row + pill + bought button (position:relative anchors the popups) -->
-            <div class="flex items-center justify-end gap-2 mb-4" style="position:relative;">
-                <button type="button" id="sl-range-pill" class="min-w-0 max-w-[10rem] h-10 rounded-full flex items-center gap-1.5 px-2.5 transition-all shrink" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);">
+        <!-- ── floating range pill ── -->
+        <div id="shopping-top-controls" class="pointer-events-none absolute inset-x-0 z-[24]" style="top:1rem; height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="shopping-range-wrap" class="pointer-events-auto absolute top-0" style="left:var(--catalog-menu-left, 1rem); width:var(--recipe-dock-width, calc(100% - 2rem)); height:var(--recipe-control-size, 3.05rem); position:relative;">
+                <button type="button" id="sl-range-pill" class="recipe-glass-btn w-full h-full rounded-full flex items-center gap-1.5 px-3 transition-all">
                    <span id="sl-range-label" class="min-w-0 flex-1 text-left text-[13px] font-normal truncate" style="color:rgb(var(--text-body-rgb));"></span>
                    <i id="sl-range-chevron" class="fas fa-chevron-down text-[10px] shrink-0 transition-transform duration-200" style="color:rgb(var(--text-dim-rgb));"></i>
                </button>
-                <button type="button" id="sl-bought-btn" class="relative h-10 w-10 rounded-full flex items-center justify-center transition-all shrink-0" style="background:rgb(var(--card-rgb)); border:1px solid rgb(var(--border-card-rgb)); box-shadow:var(--shadow-shell);" aria-label="Kupione">
-                    <i class="fas fa-check text-[13px]" style="color:rgb(var(--text-body-rgb));"></i>
-                    <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
-                </button>

                <!-- popup calendar (absolute, overlays content below) -->
                ${createCalendarPopoverHTML({
@@ -141,10 +135,24 @@ export function getShoppingListHTML() {
        weekdays: WEEKDAY_SHORT,
    }),
    })}
+        </div>
+        </div>

-                <!-- popup bought (absolute, overlays content below) -->
-                <div id="sl-bought-popup" style="position:absolute; top:calc(100% + 0.5rem); left:0; right:0; z-index:50; pointer-events:none; opacity:0; transform:translateY(-6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
-                    <div class="rounded-[1.35rem] px-3 py-3" style="background:rgb(var(--sunken-rgb)); border:1px solid rgb(var(--border-input-rgb)); box-shadow:var(--shadow-shell);">
+        <!-- ── scrollable list ── -->
+        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pb-24" style="background:rgb(var(--app-bg-rgb)) !important; padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem); scroll-padding-top:calc(1rem + var(--recipe-control-size, 3.05rem) + 0.9rem);">
+            <div id="sl-board"></div>
+        </div>
+
+        <div id="shopping-bottom-controls" class="pointer-events-none absolute inset-x-0 z-[24] h-[3.05rem]" style="bottom:calc(1.58rem + env(safe-area-inset-bottom) + var(--recipe-controls-lift, 0.335rem)); height:var(--recipe-control-size, 3.05rem); background:transparent !important; border:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;">
+            <div id="sl-bought-wrap" class="pointer-events-auto absolute bottom-0" style="left:calc(var(--catalog-menu-left, 1rem) + var(--recipe-dock-width, calc(100% - 2rem)) - var(--recipe-control-size, 3.05rem));">
+                <button type="button" id="sl-bought-btn" class="recipe-glass-btn recipe-bottom-action relative flex items-center justify-center transition-all duration-200" aria-label="Kupione">
+                    <i class="fas fa-check" aria-hidden="true"></i>
+                    <span id="sl-bought-badge" class="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 rounded-full text-[9px] font-bold items-center justify-center" style="background:rgb(var(--success-rgb)); color:rgb(var(--on-accent-rgb)); display:none;">0</span>
+                </button>
+
+                <!-- popup bought (absolute, overlays content above controls) -->
+                <div id="sl-bought-popup" style="position:absolute; bottom:calc(100% + 0.5rem); right:0; width:min(calc(100vw - 1.5rem), 22rem); z-index:50; pointer-events:none; opacity:0; transform:translateY(6px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;">
+                    <div class="filter-liquid-surface filter-liquid-panel rounded-[1.35rem] px-3 py-3">
                        <div class="flex items-center justify-between mb-2 px-1">
                            <span class="text-[11px] font-bold uppercase tracking-wider" style="color:rgb(var(--text-dim-rgb));">Kupione (<span id="sl-bought-popup-count">0</span>)</span>
                            <button type="button" id="sl-clear-session" class="h-8 px-2 rounded-full text-[11px] font-semibold transition-colors" style="background:transparent; border:none; color:rgb(var(--text-muted-rgb));">
@@ -156,11 +164,6 @@ export function getShoppingListHTML() {
                </div>
            </div>
        </div>
-
-        <!-- ── scrollable list ── -->
-        <div id="sl-scroll" class="flex-1 overflow-y-auto no-scrollbar px-4 pt-3 pb-24" style="background:rgb(var(--app-bg-rgb)) !important;">
-            <div id="sl-board"></div>
-        </div>
    </div>`;
 }

@@ -255,7 +258,7 @@ function closeBoughtPopup() {
    if (popup) {
        popup.style.pointerEvents = 'none';
        popup.style.opacity = '0';
-        popup.style.transform = 'translateY(-6px) scale(0.98)';
+        popup.style.transform = 'translateY(6px) scale(0.98)';
    }
    if (btn) {
        btn.style.background = 'rgb(var(--card-rgb))';
@@ -576,6 +579,8 @@ export function refreshShoppingList() {
 }

 export function setupShoppingList() {
+    ensureFilterPopoverStyles();
+
    if (getSelectedDays().length === 0) setSelectedDays(getDefaultSelectedDays());

    updatePillLabel();
@@ -616,5 +621,7 @@ export function setupShoppingList() {
        renderAll();
    });

+    window.closeShoppingCalendar = () => closeCalendar();
+    window.closeShoppingBoughtPopup = () => closeBoughtPopup();
    window.refreshShoppingList = refreshShoppingList;
 }