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

fix(calendar): keep depth layers mounted in one card without display swap

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 14:58:52 +07:00
parent ec94dd6e2a
commit 7c019a6300
1 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -203,8 +203,11 @@ defineProps<{
{{ formatDay(item.first.start) }} · {{ item.first.title }}
</button>
<div v-if="item.monthIndex === calendarCursorMonth" class="mt-3">
<div v-show="calendarView === 'month' || calendarView === 'agenda'" class="space-y-1">
<div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
<div
class="space-y-1 calendar-depth-layer"
: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">
<span>Sun</span>
<span>Mon</span>
@@ -258,7 +261,10 @@ defineProps<{
</div>
</div>
<div v-show="calendarView === 'week'" class="calendar-week-scroll overflow-x-auto pb-1">
<div
class="calendar-week-scroll overflow-x-auto pb-1 calendar-depth-layer"
:class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<div class="calendar-week-grid">
<article
v-for="day in weekDays"
@@ -293,7 +299,10 @@ defineProps<{
</div>
</div>
<div v-show="calendarView === 'day'" class="space-y-2">
<div
class="space-y-2 calendar-depth-layer"
:class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<button
v-for="event in selectedDayEvents"
:key="event.id"
@@ -352,6 +361,32 @@ defineProps<{
min-width: 1180px;
}
.calendar-depth-stack {
position: relative;
min-height: 100%;
}
.calendar-depth-layer {
transition: opacity 260ms ease, transform 260ms ease;
}
.calendar-depth-layer-active {
opacity: 1;
transform: translateY(0);
position: relative;
z-index: 1;
pointer-events: auto;
}
.calendar-depth-layer-hidden {
opacity: 0;
transform: translateY(10px);
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.calendar-side-nav {
position: absolute;
top: 50%;