dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(calendar): scope zoom selectors by layer and stretch week days to full height

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 15:32:52 +07:00
parent df8c06d313
commit 0bbeef5594
2 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/app/components/workspace/CrmWorkspaceApp.vue
View File

@@ -2765,10 +2765,10 @@ async function zoomInCalendar(event?: Event) {
const anchorDayKey = resolveWeekAnchor(wheelEvent); const anchorDayKey = resolveWeekAnchor(wheelEvent);
const rowStartKey = weekRowStartForDate(anchorDayKey); const rowStartKey = weekRowStartForDate(anchorDayKey);
const sourceElement = const sourceElement =
queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ?? queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${rowStartKey}"]`) ??
queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`) ?? queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${anchorDayKey}"]`) ??
queryCalendarElement("[data-calendar-week-start-key]") ?? queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
queryCalendarElement("[data-calendar-day-key]"); queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`);
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return; if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return;
await animateCalendarZoomIntoSource(sourceElement, () => { await animateCalendarZoomIntoSource(sourceElement, () => {
openWeekView(anchorDayKey); openWeekView(anchorDayKey);
@@ -2778,7 +2778,9 @@ async function zoomInCalendar(event?: Event) {
if (calendarView.value === "week") { if (calendarView.value === "week") {
const dayAnchor = resolveDayAnchor(wheelEvent); const dayAnchor = resolveDayAnchor(wheelEvent);
const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`) ?? queryCalendarElement("[data-calendar-day-key]"); const sourceElement =
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${dayAnchor}"]`) ??
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`);
if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return; if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return;
await animateCalendarZoomIntoSource(sourceElement, () => { await animateCalendarZoomIntoSource(sourceElement, () => {
openDayView(dayAnchor); openDayView(dayAnchor);
@@ -2803,7 +2805,9 @@ async function zoomOutCalendar() {
() => { () => {
calendarView.value = "week"; calendarView.value = "week";
}, },
() => queryCalendarElement(`[data-calendar-day-key="${targetDayKey}"]`), () =>
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key="${targetDayKey}"]`) ??
queryCalendarElement(`[data-calendar-layer="week"] [data-calendar-day-key]`),
); );
return; return;
} }
@@ -2816,8 +2820,10 @@ async function zoomOutCalendar() {
calendarView.value = "month"; calendarView.value = "month";
}, },
() => () =>
queryCalendarElement(`[data-calendar-week-start-key="${targetRowKey}"]`) ?? queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key="${targetRowKey}"]`) ??
queryCalendarElement(`[data-calendar-day-key="${selectedDateKey.value}"]`), queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key="${selectedDateKey.value}"]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-week-start-key]`) ??
queryCalendarElement(`[data-calendar-layer="month"] [data-calendar-day-key]`),
); );
return; return;
} }

9
frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
View File

@@ -206,6 +206,7 @@ defineProps<{
<div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack"> <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
<div <div
class="space-y-1 calendar-depth-layer" class="space-y-1 calendar-depth-layer"
data-calendar-layer="month"
:class="calendarView === 'month' || calendarView === 'agenda' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'" :class="calendarView === 'month' || calendarView === 'agenda' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
> >
<div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60"> <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
@@ -262,14 +263,15 @@ defineProps<{
</div> </div>
<div <div
class="calendar-week-scroll overflow-x-auto pb-1 calendar-depth-layer" class="calendar-week-scroll h-full min-h-0 overflow-x-auto pb-1 calendar-depth-layer"
data-calendar-layer="week"
:class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'" :class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
> >
<div class="calendar-week-grid"> <div class="calendar-week-grid">
<article <article
v-for="day in weekDays" v-for="day in weekDays"
:key="day.key" :key="day.key"
class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable" class="group relative flex h-full min-h-full flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
:class="[ :class="[
selectedDateKey === day.key ? 'border-primary bg-primary/5' : '', selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '', calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
@@ -301,6 +303,7 @@ defineProps<{
<div <div
class="space-y-2 calendar-depth-layer" class="space-y-2 calendar-depth-layer"
data-calendar-layer="day"
:class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'" :class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
> >
<button <button
@@ -359,6 +362,8 @@ defineProps<{
grid-template-columns: repeat(7, minmax(165px, 1fr)); grid-template-columns: repeat(7, minmax(165px, 1fr));
gap: 8px; gap: 8px;
min-width: 1180px; min-width: 1180px;
min-height: 100%;
align-items: stretch;
} }
.calendar-depth-stack { .calendar-depth-stack {