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

feat(calendar): seamless zoom animation with clone-and-swap + full-area coverage

Browse Source 
Zoom-in: fade siblings → fade source content → clone source style to fly-rect →
hide source → animate fly-rect to viewport → switch view → fade in new content.

Zoom-out: fade scene → show fly-rect at viewport → switch view → clone target
style → animate fly-rect to target → fade in scene.

Full-area: all views (month/week/day) now fill 100% of container height.
Month grid rows stretch equally, day cells fill row height, depth layers flex.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-02-24 11:56:42 +07:00
parent 227030b9ae
commit 77141978c5
2 changed files with 74 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2678,6 +2678,24 @@ function nextAnimationFrame() {
});
}
function cloneElementStyleToFlyRect(source: HTMLElement, flyEl: HTMLElement) {
const s = getComputedStyle(source);
flyEl.style.borderColor = s.borderColor;
flyEl.style.borderWidth = s.borderWidth;
flyEl.style.borderStyle = s.borderStyle;
flyEl.style.backgroundColor = s.backgroundColor;
flyEl.style.borderRadius = s.borderRadius;
flyEl.style.boxShadow = s.boxShadow;
}
function resetFlyRectStyle(flyEl: HTMLElement) {
flyEl.style.borderColor = "";
flyEl.style.borderWidth = "";
flyEl.style.borderStyle = "";
flyEl.style.backgroundColor = "";
flyEl.style.borderRadius = "";
flyEl.style.boxShadow = "";
}
async function animateCalendarFlipTransition(
_sourceElement: HTMLElement | null,
@@ -2701,55 +2719,71 @@ async function animateCalendarFlipTransition(
try {
const wrapRect = wrapEl.getBoundingClientRect();
// 1. Fade out current content
// 1. Fade out current scene content
if (sceneEl) {
await calendarTweenTo(sceneEl, { opacity: 0, duration: CALENDAR_FADE_DURATION, ease: "power2.in" });
}
// 2. Position fly rect at full viewport
const pad = 4;
// 2. Position fly rect at full viewport, styled like a card
const pad = 0;
gsap.set(flyEl, {
left: pad,
top: pad,
width: wrapRect.width - pad * 2,
height: wrapRect.height - pad * 2,
opacity: 1,
borderRadius: 14,
});
// Apply card-like styling: border + bg matching article cards
flyEl.style.borderRadius = "0.75rem";
flyEl.style.borderWidth = "1px";
flyEl.style.borderStyle = "solid";
flyEl.style.borderColor = "color-mix(in oklab, var(--color-base-300) 100%, transparent)";
flyEl.style.backgroundColor = "color-mix(in oklab, var(--color-base-100) 100%, transparent)";
flyEl.style.boxShadow = "";
calendarFlyVisible.value = true;
// 3. Switch to parent view
apply();
await nextTick();
await nextAnimationFrame();
// 4. Find target element in new view
const targetElement = resolveTarget();
const targetRect = targetElement?.getBoundingClientRect() ?? null;
if (targetElement && targetRect && targetRect.width >= 2 && targetRect.height >= 2) {
// Clone target's visual style to fly rect for seamless landing
cloneElementStyleToFlyRect(targetElement, flyEl);
// Hide target so there's no double
targetElement.style.opacity = "0";
const tgtLeft = targetRect.left - wrapRect.left;
const tgtTop = targetRect.top - wrapRect.top;
// 5. Animate fly rect → target element
// 5. Animate fly rect → target element bounds
await calendarTweenTo(flyEl, {
left: tgtLeft,
top: tgtTop,
width: targetRect.width,
height: targetRect.height,
borderRadius: 12,
duration: CALENDAR_FLY_DURATION,
ease: CALENDAR_EASE,
});
// Restore target visibility
targetElement.style.opacity = "";
}
// 6. Hide fly rect, fade in content
calendarFlyVisible.value = false;
resetFlyRectStyle(flyEl);
if (sceneEl) {
gsap.set(sceneEl, { opacity: 0 });
await calendarTweenTo(sceneEl, { opacity: 1, duration: 0.25, ease: "power2.out" });
}
} finally {
calendarFlyVisible.value = false;
resetFlyRectStyle(flyEl);
calendarZoomBusy.value = false;
}
}
@@ -2787,7 +2821,12 @@ async function animateCalendarZoomIntoSource(
).filter((el) => el !== sourceElement && !sourceElement.contains(el) && !el.contains(sourceElement));
await calendarTweenTo(siblings, { opacity: 0, duration: CALENDAR_FADE_DURATION, ease: "power2.in" });
// 2. Position fly rect at source element
// 2. Fade out source element's inner content (keep border/bg visible)
const sourceChildren = Array.from(sourceElement.children) as HTMLElement[];
await calendarTweenTo(sourceChildren, { opacity: 0, duration: 0.12, ease: "power2.in" });
// 3. Clone source visual style to fly-rect, position at source bounds
cloneElementStyleToFlyRect(sourceElement, flyEl);
const srcLeft = sourceRect.left - wrapRect.left;
const srcTop = sourceRect.top - wrapRect.top;
gsap.set(flyEl, {
@@ -2796,39 +2835,46 @@ async function animateCalendarZoomIntoSource(
width: sourceRect.width,
height: sourceRect.height,
opacity: 1,
borderRadius: 12,
});
// 4. Swap: hide source, show fly-rect (seamless — identical visual)
sourceElement.style.opacity = "0";
calendarFlyVisible.value = true;
// 3. Animate fly rect → full viewport
const pad = 4;
// 5. Animate fly-rect expanding to full viewport
const pad = 0;
await calendarTweenTo(flyEl, {
left: pad,
top: pad,
width: wrapRect.width - pad * 2,
height: wrapRect.height - pad * 2,
borderRadius: 14,
duration: CALENDAR_FLY_DURATION,
ease: CALENDAR_EASE,
});
// 4. Switch content
// 6. Switch view content
apply();
await nextTick();
// 5. Hide fly rect, fade in new content
// 7. Hide fly-rect, fade in new content
calendarFlyVisible.value = false;
resetFlyRectStyle(flyEl);
if (sceneEl) {
gsap.set(sceneEl, { opacity: 0 });
await calendarTweenTo(sceneEl, { opacity: 1, duration: 0.25, ease: "power2.out" });
}
// 6. Restore sibling opacity
// 8. Restore source + siblings
sourceElement.style.opacity = "";
for (const child of sourceChildren) {
child.style.opacity = "";
}
for (const el of siblings) {
el.style.opacity = "";
}
} finally {
calendarFlyVisible.value = false;
resetFlyRectStyle(flyEl);
calendarZoomBusy.value = false;
}
}

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

@@ -180,7 +180,7 @@ defineProps<{
>
<div
class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3 auto-rows-fr"
:style="calendarView === 'year' && calendarViewportHeight > 0 ? { minHeight: `${Math.max(420, calendarViewportHeight)}px` } : undefined"
:style="calendarViewportHeight > 0 ? { minHeight: `${calendarView === 'year' ? Math.max(420, calendarViewportHeight) : calendarViewportHeight}px` } : undefined"
>
<article
v-for="item in yearMonths"
@@ -190,14 +190,14 @@ defineProps<{
:class="[
calendarView === 'year'
? 'h-full hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
: 'cursor-default min-h-[26rem] bg-base-100 sm:col-span-2 xl:col-span-3',
: 'cursor-default bg-base-100 sm:col-span-2 xl:col-span-3 flex flex-col',
calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
]"
:style="{
...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
? { minHeight: `${Math.max(420, calendarViewportHeight)}px` }
? { minHeight: `${calendarViewportHeight}px` }
: {}),
}"
:data-calendar-month-index="item.monthIndex"
@@ -230,11 +230,11 @@ defineProps<{
<span>Sat</span>
</div>
<div class="space-y-1">
<div class="flex flex-1 flex-col gap-1">
<div
v-for="row in monthRows"
:key="row.key"
class="group relative calendar-hover-targetable"
class="group relative flex-1 calendar-hover-targetable"
:class="[
calendarHoveredWeekStartKey === row.startKey ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeWeekToken(row.startKey) ? 'calendar-zoom-prime-active' : '',
@@ -243,11 +243,11 @@ defineProps<{
:data-calendar-week-start-key="row.startKey"
@mouseenter="setCalendarHoveredWeekStartKey(row.startKey)"
>
<div class="grid grid-cols-7 gap-1">
<div class="grid grid-cols-7 gap-1 h-full">
<button
v-for="cell in row.cells"
:key="cell.key"
class="group relative min-h-24 rounded-lg border p-1 text-left"
class="group relative rounded-lg border p-1 text-left"
:class="[
cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
@@ -379,7 +379,10 @@ defineProps<{
.calendar-depth-stack {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.calendar-depth-layer {
@@ -392,6 +395,9 @@ defineProps<{
position: relative;
z-index: 1;
pointer-events: auto;
flex: 1;
display: flex;
flex-direction: column;
}
.calendar-depth-layer-hidden {
@@ -451,9 +457,6 @@ defineProps<{
.calendar-fly-rect {
position: absolute;
border-radius: 12px;
border: 2px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
background: color-mix(in oklab, var(--color-base-200) 60%, transparent);
z-index: 20;
pointer-events: none;
will-change: left, top, width, height;