ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine meal removal fade state and shorten undo timeout
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m12s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-10 15:55:12 +02:00
parent 02e9856ff0
commit 4c4a56a75c
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/views/MealPlanner.js
View File

@@ -53,7 +53,7 @@ const PLANNER_SHEET_OFF_TRANSFORM = `translateY(calc(100% + ${PLANNER_SHEET_BOTT
const PLANNER_PICKER_OFF_TRANSFORM = 'translateY(100%)'; const PLANNER_PICKER_OFF_TRANSFORM = 'translateY(100%)';
const PLANNER_MEAL_SWIPE_MAX = 132; const PLANNER_MEAL_SWIPE_MAX = 132;
const PLANNER_MEAL_SWIPE_DELETE_THRESHOLD = 96; const PLANNER_MEAL_SWIPE_DELETE_THRESHOLD = 96;
const PLANNER_MEAL_PENDING_DELETE_MS = 3200; const PLANNER_MEAL_PENDING_DELETE_MS = 2000;
const PLANNER_MEAL_PENDING_DELETE_TICK_MS = 100; const PLANNER_MEAL_PENDING_DELETE_TICK_MS = 100;
const PICKER_FILTER_MIN_MINUTES = 5; const PICKER_FILTER_MIN_MINUTES = 5;
const PICKER_FILTER_MAX_MINUTES = 120; const PICKER_FILTER_MAX_MINUTES = 120;
@@ -483,31 +483,35 @@ function renderDayContent(state, onMealRemoved = null) {
const rowStyle = `--planner-swipe-progress:${isPendingDelete ? '1' : '0'};`; const rowStyle = `--planner-swipe-progress:${isPendingDelete ? '1' : '0'};`;
const rowAttrs = isPendingDelete ? 'data-pending-delete="true"' : ''; const rowAttrs = isPendingDelete ? 'data-pending-delete="true"' : '';
const backgroundStyle = isPendingDelete const backgroundStyle = isPendingDelete
? 'background:rgba(122,58,52,0.78);' ? 'background:linear-gradient(90deg, rgba(65,64,60,0.08), rgba(65,64,60,0.2));'
: 'background:rgba(203,74,72, calc(0.18 + var(--planner-swipe-progress) * 0.5));'; : 'background:rgba(203,74,72, calc(0.18 + var(--planner-swipe-progress) * 0.5));';
const backgroundLabel = isPendingDelete const backgroundLabel = isPendingDelete
? `<span class="inline-flex items-center text-[#f6d4cf]/75"> ? `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(210,204,194,0.42);">
<i class="fas fa-trash text-[11px]" aria-hidden="true"></i> <i class="fas fa-hourglass-half text-[10px]" aria-hidden="true"></i>
Usuwanie
</span>` </span>`
: `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(250,234,234, calc(0.55 + var(--planner-swipe-progress) * 0.45));"> : `<span class="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-wide uppercase" style="color:rgba(250,234,234, calc(0.55 + var(--planner-swipe-progress) * 0.45));">
<i class="fas fa-trash text-[10px]" aria-hidden="true"></i> <i class="fas fa-trash text-[10px]" aria-hidden="true"></i>
Usuń Usuń
</span>`; </span>`;
const titleClass = isPendingDelete const titleClass = isPendingDelete
? 'text-[13px] font-normal text-[#d6bbb5] truncate line-through decoration-[#b9877f]' ? 'text-[13px] font-normal text-[#bcb5ab] truncate'
: 'text-[13px] font-normal text-[#ddd6ca] truncate'; : 'text-[13px] font-normal text-[#ddd6ca] truncate';
const metaClass = isPendingDelete const metaClass = isPendingDelete
? 'text-[11px] text-[#c29a93] mt-0.5 tabular-nums' ? 'text-[11px] text-[#878079] mt-0.5 tabular-nums'
: 'text-[11px] text-[#9b978f] mt-0.5 tabular-nums'; : 'text-[11px] text-[#9b978f] mt-0.5 tabular-nums';
const actionWrapClass = isPendingDelete const actionWrapClass = isPendingDelete
? 'flex items-center shrink-0 self-center' ? 'relative z-[2] flex items-center shrink-0 self-center'
: 'flex items-center gap-1 shrink-0 self-center'; : 'flex items-center gap-1 shrink-0 self-center';
const contentToneStyle = isPendingDelete
? 'opacity:0.48; filter:saturate(0.72); transform:scale(0.985); transform-origin:left center; transition:opacity 180ms ease, transform 180ms ease, filter 180ms ease;'
: '';
const remainingProgress = isPendingDelete const remainingProgress = isPendingDelete
? getPendingMealRemovalProgress(state, selectedDayKey, slot.id, entry.id) ? getPendingMealRemovalProgress(state, selectedDayKey, slot.id, entry.id)
: 0; : 0;
const entryAction = isPendingDelete const entryAction = isPendingDelete
? `<button type="button" class="planner-cancel-pending-remove rounded-full p-[1.5px] transition-transform hover:scale-[1.02] active:scale-[0.98]" style="background:${getPendingMealRemovalButtonStyle(remainingProgress)};" data-pending-delete-progress data-day-key="${selectedDayKey}" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Anuluj usunięcie posiłku"> ? `<button type="button" class="planner-cancel-pending-remove rounded-full p-[1.5px] transition-transform hover:scale-[1.02] active:scale-[0.98]" style="background:${getPendingMealRemovalButtonStyle(remainingProgress)};" data-pending-delete-progress data-day-key="${selectedDayKey}" data-slot-id="${slot.id}" data-entry-id="${eid}" aria-label="Anuluj usunięcie posiłku">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-[#372826] text-[#f3c6bf]"> <span class="flex h-7 w-7 items-center justify-center rounded-full bg-[#343530] text-[#e2ddd4] shadow-[0_1px_2px_rgba(0,0,0,0.28)]">
<i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i> <i class="fas fa-rotate-left text-[10px]" aria-hidden="true"></i>
</span> </span>
</button>` </button>`
@@ -515,13 +519,13 @@ function renderDayContent(state, onMealRemoved = null) {
<i class="fas fa-pencil text-[9px]" aria-hidden="true"></i> <i class="fas fa-pencil text-[9px]" aria-hidden="true"></i>
</button>`; </button>`;
return ` return `
<div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-red-300/25' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}> <div class="relative overflow-hidden rounded-lg ${isPendingDelete ? 'ring-1 ring-white/5' : ''}" data-planner-swipe-row style="${rowStyle}" data-slot-id="${slot.id}" data-entry-id="${eid}" ${rowAttrs}>
<div class="pointer-events-none absolute inset-0 flex items-center justify-end px-4" style="${backgroundStyle}"> <div class="pointer-events-none absolute inset-0 flex items-center justify-end px-4" style="${backgroundStyle}">
${backgroundLabel} ${backgroundLabel}
</div> </div>
<div class="relative z-[1] rounded-lg p-2" style="background:${isPendingDelete ? '#372826' : '#2d2e2b'}; box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); transform:translateX(0); transition:transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, background-color 180ms ease; touch-action:pan-y; opacity:${isPendingDelete ? '0.84' : '1'};" data-planner-swipe-card data-slot-id="${slot.id}" data-entry-id="${eid}"> <div class="relative z-[1] rounded-lg p-2" style="background:${isPendingDelete ? 'rgba(45,45,43,0.76)' : '#2d2e2b'}; box-shadow:inset 0 1px 3px rgba(0,0,0,0.3); transform:${isPendingDelete ? 'translateX(0) scale(0.988)' : 'translateX(0)'}; transition:transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, background-color 180ms ease; touch-action:pan-y; opacity:1;" data-planner-swipe-card data-slot-id="${slot.id}" data-entry-id="${eid}">
<div class="flex items-start justify-between gap-2"> <div class="relative flex items-start justify-between gap-2">
<div class="flex items-center gap-2 min-w-0 cursor-pointer planner-open-recipe" data-recipe-id="${escapeHtml(recipe.id)}"> <div class="flex items-center gap-2 min-w-0 cursor-pointer planner-open-recipe" style="${contentToneStyle}" data-recipe-id="${escapeHtml(recipe.id)}">
<div class="w-8 h-8 rounded-lg bg-[#3a3a37] overflow-hidden shrink-0"> <div class="w-8 h-8 rounded-lg bg-[#3a3a37] overflow-hidden shrink-0">
${recipe.image ${recipe.image
? `<img src="${escapeHtml(recipe.image)}" alt="" class="w-full h-full object-cover">` ? `<img src="${escapeHtml(recipe.image)}" alt="" class="w-full h-full object-cover">`
@@ -600,7 +604,7 @@ function getPendingMealRemovalProgress(state, dayKey, slotId, entryId) {
function getPendingMealRemovalButtonStyle(progress) { function getPendingMealRemovalButtonStyle(progress) {
const clamped = Math.max(0, Math.min(1, progress)); const clamped = Math.max(0, Math.min(1, progress));
const angle = Math.round(clamped * 360); const angle = Math.round(clamped * 360);
return `conic-gradient(from -90deg, rgba(243,198,191,0.96) 0deg, rgba(243,198,191,0.96) ${angle}deg, rgba(139,90,84,0.22) ${angle}deg, rgba(139,90,84,0.22) 360deg)`; return `conic-gradient(from -90deg, rgba(229,223,214,0.96) 0deg, rgba(229,223,214,0.96) ${angle}deg, rgba(109,108,103,0.24) ${angle}deg, rgba(109,108,103,0.24) 360deg)`;
} }
function stopPendingMealRemovalTicker(state) { function stopPendingMealRemovalTicker(state) {