Reorganizacja górnych paneli i ujednolicenie stylu filtrów
- Kalendarz: data między strzałkami zamiast napisu "Dziś", nawigacja po prawej, mniejszy komponent dopasowany do wysokości dnia - MealPlanner/Pantry/RecipeList: spójne nagłówki z tytułem po lewej i kontrolkami po prawej - RecipeList: nowy top bar z przyciskami filtrów i wyszukiwania wzorowany na spiżarni - Filter popup: ujednolicony styl z popoverem spiżarni (ciemniejsze tło, jaśniejsze obramowanie, spójne chipy) - Usunięcie przyciemnienia otoczenia przy otwieraniu filtrów - Badge z liczbą aktywnych filtrów na przycisku, zachowujący stan po zamknięciu popupu - Usunięcie ikon kalendarza z pigułek w spiżarni Made-with: Cursor
This commit is contained in:
@@ -21,18 +21,39 @@ export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd
|
||||
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
|
||||
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[#6d6c67]/75';
|
||||
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr) {
|
||||
const { mode, selectedDate, inCurrentMonth } = meta;
|
||||
function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
|
||||
const { mode, selectedDate } = meta;
|
||||
const isSelected = selectedDate && sameDay(day, selectedDate);
|
||||
const showIndicator = !!dayState.showIndicator;
|
||||
const isDisabled = !!dayState.disabled;
|
||||
const isDimmed = !!dayState.dimmed && !isSelected;
|
||||
const bg = isSelected ? '#23221e' : '#2f2f2d';
|
||||
const border = isSelected ? '#787876' : '#444442';
|
||||
const text = isSelected ? '#f2efe8' : (isDimmed ? '#7d7a74' : '#d7d2c8');
|
||||
const dot = isSelected ? '#f2efe8' : '#a59f92';
|
||||
const opacity = isDimmed ? '0.72' : '1';
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full border text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const defaultBg = '#2f2f2d';
|
||||
const defaultBorder = '#444442';
|
||||
const defaultText = '#d7d2c8';
|
||||
|
||||
let bg;
|
||||
let borderColor;
|
||||
let text;
|
||||
let borderClass = 'border';
|
||||
|
||||
if (isSelected) {
|
||||
bg = theme.selectedBg || '#23221e';
|
||||
borderColor = theme.selectedBorder || '#787876';
|
||||
text = theme.selectedText || '#f2efe8';
|
||||
} else if (isDimmed) {
|
||||
bg = theme.dimmedBg ?? theme.bg ?? defaultBg;
|
||||
text = theme.dimText || '#7d7a74';
|
||||
borderClass = 'border-0';
|
||||
} else {
|
||||
bg = theme.bg || defaultBg;
|
||||
borderColor = theme.border || defaultBorder;
|
||||
text = theme.text || defaultText;
|
||||
}
|
||||
|
||||
const dot = isSelected ? (theme.selectedDot || '#f2efe8') : (theme.dot || '#a59f92');
|
||||
const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
|
||||
const borderStyle = isDimmed ? 'border:none;' : `border-color:${borderColor};`;
|
||||
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
|
||||
const innerClass = mode === 'month'
|
||||
? 'relative flex h-full w-full flex-col items-center justify-center'
|
||||
: 'relative flex h-full w-full items-center justify-center';
|
||||
@@ -43,7 +64,7 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr) {
|
||||
return `
|
||||
<${tagName}${buttonAttrs}
|
||||
class="${outerClass}"
|
||||
style="background:${bg};border-color:${border};color:${text};opacity:${opacity};">
|
||||
style="background:${bg};${borderStyle}color:${text};opacity:${opacity};">
|
||||
<span class="${innerClass}">
|
||||
<span class="text-[13px] font-semibold leading-none ${showIndicator ? '-translate-y-[0.18rem]' : ''}">${day.getDate()}</span>
|
||||
${showIndicator
|
||||
@@ -82,37 +103,39 @@ function getDayState(day, meta, resolveDayState) {
|
||||
};
|
||||
}
|
||||
|
||||
export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT) {
|
||||
export function createCalendarWeekdayHeaderHTML(labels = CALENDAR_WEEKDAYS_SHORT, {
|
||||
wrapperClass = 'grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none',
|
||||
} = {}) {
|
||||
return `
|
||||
<div class="grid grid-cols-7 gap-1.5 text-center text-[8px] font-medium text-gray-400 uppercase tracking-wide mb-1 leading-none">
|
||||
<div class="${wrapperClass}">
|
||||
${labels.map((label) => `<div>${label}</div>`).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
export function createCalendarTopbarHTML({
|
||||
titleId,
|
||||
prevId,
|
||||
todayId,
|
||||
nextId,
|
||||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center gap-3',
|
||||
titleClass = 'text-[18px] font-semibold text-gray-900 leading-none tracking-[-0.03em]',
|
||||
wrapperClass = 'px-4 pt-4 pb-3 flex items-center justify-end',
|
||||
controlsStyle = 'background:#2f2f2d;border-color:#444442;',
|
||||
navButtonClass = 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors',
|
||||
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap',
|
||||
todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[#7d7a74] cursor-default',
|
||||
}) {
|
||||
return `
|
||||
<div class="${wrapperClass}">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p id="${titleId}" class="${titleClass}"></p>
|
||||
</div>
|
||||
<div class="shrink-0 flex h-[2.3rem] items-center gap-0.5 rounded-full border px-1" style="background:#2f2f2d;border-color:#444442;">
|
||||
<button type="button" id="${prevId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Poprzedni okres">
|
||||
<i class="fas fa-chevron-left text-[11px]" aria-hidden="true"></i>
|
||||
<div class="flex h-[2.05rem] min-w-0 max-w-[min(100%,20rem)] items-center gap-px rounded-full border px-0.5" style="${controlsStyle}">
|
||||
<button type="button" id="${prevId}" class="${navButtonClass}" aria-label="Poprzedni okres">
|
||||
<i class="fas fa-chevron-left text-[10px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" id="${todayId}" title="Dziś" aria-label="Przejdź do dzisiejszego dnia"
|
||||
class="h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none text-[#d7d2c8] transition-colors hover:bg-[#3a3a37]">
|
||||
Dziś
|
||||
<button type="button" id="${todayId}"
|
||||
class="${todayButtonActiveClass}"
|
||||
data-cal-active-class="${todayButtonActiveClass}"
|
||||
data-cal-dim-class="${todayButtonDimClass}">
|
||||
</button>
|
||||
<button type="button" id="${nextId}" class="shrink-0 w-8 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors" aria-label="Następny okres">
|
||||
<i class="fas fa-chevron-right text-[11px]" aria-hidden="true"></i>
|
||||
<button type="button" id="${nextId}" class="${navButtonClass}" aria-label="Następny okres">
|
||||
<i class="fas fa-chevron-right text-[10px]" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,13 +157,25 @@ export function isCalendarOnToday(mode, weekStart, monthAnchor, selectedDate) {
|
||||
return startOfMonth(monthAnchor).getTime() === startOfMonth(today).getTime();
|
||||
}
|
||||
|
||||
export function syncCalendarTodayButton(buttonEl, isOnToday) {
|
||||
/**
|
||||
* Środkowy przycisk pokazuje wybraną datę; działa jak „Dziś” (skok do bieżącego okresu).
|
||||
* Styl pozostaje jak aktywny — bez wyciszania przy isOnToday.
|
||||
*/
|
||||
export function syncCalendarTodayButton(buttonEl, isOnToday, selectedDate, options = {}) {
|
||||
if (!buttonEl) return;
|
||||
const base = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2.5 text-[11px] font-semibold leading-none transition-colors';
|
||||
const active = `${base} text-[#d7d2c8] hover:bg-[#3a3a37]`;
|
||||
const dim = `${base} text-[#7d7a74] cursor-default`;
|
||||
buttonEl.className = isOnToday ? dim : active;
|
||||
buttonEl.disabled = isOnToday;
|
||||
const {
|
||||
ariaLabelGo = 'Przejdź do dzisiejszego dnia',
|
||||
ariaLabelCurrent = 'Widok jest ustawiony na bieżący okres',
|
||||
} = options;
|
||||
const active = buttonEl.dataset.calActiveClass
|
||||
|| 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap';
|
||||
if (selectedDate != null) {
|
||||
buttonEl.textContent = formatCalendarSelectedDate(selectedDate);
|
||||
}
|
||||
buttonEl.className = active;
|
||||
buttonEl.removeAttribute('disabled');
|
||||
buttonEl.setAttribute('aria-disabled', isOnToday ? 'true' : 'false');
|
||||
buttonEl.setAttribute('aria-label', isOnToday ? ariaLabelCurrent : ariaLabelGo);
|
||||
}
|
||||
|
||||
export function renderCalendarGrid({
|
||||
@@ -150,6 +185,7 @@ export function renderCalendarGrid({
|
||||
selectedDate,
|
||||
resolveDayState,
|
||||
dayAttr = CALENDAR_DAY_ATTR,
|
||||
theme,
|
||||
}) {
|
||||
if (!gridEl) return;
|
||||
|
||||
@@ -163,7 +199,7 @@ export function renderCalendarGrid({
|
||||
selectedDate,
|
||||
inCurrentMonth: true,
|
||||
};
|
||||
cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr));
|
||||
cells.push(getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme));
|
||||
}
|
||||
gridEl.innerHTML = cells.join('');
|
||||
return;
|
||||
@@ -176,7 +212,7 @@ export function renderCalendarGrid({
|
||||
selectedDate,
|
||||
inCurrentMonth: day.getMonth() === month,
|
||||
};
|
||||
return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr);
|
||||
return getCalendarDayHTML(day, meta, getDayState(day, meta, resolveDayState), dayAttr, theme);
|
||||
}).join('');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user