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

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
class="space-y-1 calendar-depth-layer"
data-calendar-layer="month"
: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">
@@ -262,14 +263,15 @@ defineProps<{
</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'"
>
<div class="calendar-week-grid">
<article
v-for="day in weekDays"
: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="[
selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
@@ -301,6 +303,7 @@ defineProps<{
<div
class="space-y-2 calendar-depth-layer"
data-calendar-layer="day"
:class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<button
@@ -359,6 +362,8 @@ defineProps<{
grid-template-columns: repeat(7, minmax(165px, 1fr));
gap: 8px;
min-width: 1180px;
min-height: 100%;
align-items: stretch;
}
.calendar-depth-stack {