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

fix(calendar): use full available calendar viewport height on desktop

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 14:40:59 +07:00
parent db49c4a830
commit f6b738352b
2 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2310,6 +2310,10 @@ onBeforeUnmount(() => {
clearInterval(lifecycleClock);
lifecycleClock = null;
}
if (calendarViewportResizeObserver) {
calendarViewportResizeObserver.disconnect();
calendarViewportResizeObserver = null;
}
clearCalendarZoomPrime();
});
@@ -2360,16 +2364,29 @@ type CalendarRect = { left: number; top: number; width: number; height: number }
const calendarContentWrapRef = ref<HTMLElement | null>(null);
const calendarContentScrollRef = ref<HTMLElement | null>(null);
const calendarSceneRef = ref<HTMLElement | null>(null);
const calendarViewportHeight = ref(0);
const calendarHoveredMonthIndex = ref<number | null>(null);
const calendarHoveredWeekStartKey = ref("");
const calendarHoveredDayKey = ref("");
let calendarViewportResizeObserver: ResizeObserver | null = null;
function setCalendarContentWrapRef(element: HTMLElement | null) {
calendarContentWrapRef.value = element;
}
function setCalendarContentScrollRef(element: HTMLElement | null) {
if (calendarViewportResizeObserver) {
calendarViewportResizeObserver.disconnect();
calendarViewportResizeObserver = null;
}
calendarContentScrollRef.value = element;
if (element && typeof ResizeObserver !== "undefined") {
calendarViewportResizeObserver = new ResizeObserver(() => {
calendarViewportHeight.value = Math.max(0, Math.round(element.clientHeight));
});
calendarViewportResizeObserver.observe(element);
calendarViewportHeight.value = Math.max(0, Math.round(element.clientHeight));
}
}
function setCalendarSceneRef(element: HTMLElement | null) {
@@ -4765,6 +4782,7 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
:set-calendar-content-scroll-ref="setCalendarContentScrollRef"
:on-calendar-hierarchy-wheel="onCalendarHierarchyWheel"
:set-calendar-scene-ref="setCalendarSceneRef"
:calendar-viewport-height="calendarViewportHeight"
:normalized-calendar-view="normalizedCalendarView"
:calendar-scene-transform-style="calendarSceneTransformStyle"
:on-calendar-scene-mouse-leave="onCalendarSceneMouseLeave"

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

@@ -52,6 +52,7 @@ defineProps<{
setCalendarContentScrollRef: (element: HTMLDivElement | null) => void;
onCalendarHierarchyWheel: (event: WheelEvent) => void;
setCalendarSceneRef: (element: HTMLDivElement | null) => void;
calendarViewportHeight: number;
normalizedCalendarView: string;
calendarSceneTransformStyle: Record<string, string>;
onCalendarSceneMouseLeave: () => void;
@@ -182,7 +183,12 @@ defineProps<{
calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
]"
:style="calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex))"
:style="{
...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
? { minHeight: `${Math.max(420, calendarViewportHeight)}px` }
: {}),
}"
:data-calendar-month-index="item.monthIndex"
@mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
@click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"