feat(calendar-lab): switch to hierarchical grid zoom mechanics
This commit is contained in:
Ruslan Bakiev
@@ -1,15 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
||||
import CrmCalendarLabDayRect from "~~/app/components/workspace/calendar/lab/CrmCalendarLabDayRect.vue";
|
||||
import CrmCalendarLabMonthRect from "~~/app/components/workspace/calendar/lab/CrmCalendarLabMonthRect.vue";
|
||||
import CrmCalendarLabWeekRect from "~~/app/components/workspace/calendar/lab/CrmCalendarLabWeekRect.vue";
|
||||
import CrmCalendarLabYearRect from "~~/app/components/workspace/calendar/lab/CrmCalendarLabYearRect.vue";
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
|
||||
type Level = "year" | "month" | "week" | "day";
|
||||
type LevelState = {
|
||||
loaded: boolean;
|
||||
loading: boolean;
|
||||
};
|
||||
type Direction = "in" | "out";
|
||||
|
||||
const LEVELS: Level[] = ["year", "month", "week", "day"];
|
||||
const LEVEL_LABELS: Record<Level, string> = {
|
||||
@@ -19,247 +12,279 @@ const LEVEL_LABELS: Record<Level, string> = {
|
||||
day: "Day",
|
||||
};
|
||||
|
||||
const NEXT_LEVEL: Record<Level, Level | null> = {
|
||||
year: "month",
|
||||
month: "week",
|
||||
week: "day",
|
||||
day: null,
|
||||
};
|
||||
|
||||
const PREV_LEVEL: Record<Level, Level | null> = {
|
||||
year: null,
|
||||
month: "year",
|
||||
week: "month",
|
||||
day: "week",
|
||||
};
|
||||
const MONTH_LABELS = [
|
||||
"Jan", "Feb", "Mar", "Apr",
|
||||
"May", "Jun", "Jul", "Aug",
|
||||
"Sep", "Oct", "Nov", "Dec",
|
||||
];
|
||||
|
||||
const ZOOM_PRIME_STEPS = 2;
|
||||
const ZOOM_PRIME_SCALE = 1.05;
|
||||
const ZOOM_ANIMATION_MS = 2200;
|
||||
const WORLD_PADDING = 20;
|
||||
|
||||
const WORLD_RECT_BY_LEVEL: Record<Level, { x: number; y: number; width: number; height: number }> = {
|
||||
year: { x: 80, y: 50, width: 1240, height: 760 },
|
||||
month: { x: 330, y: 195, width: 740, height: 430 },
|
||||
week: { x: 470, y: 275, width: 460, height: 270 },
|
||||
day: { x: 560, y: 330, width: 280, height: 165 },
|
||||
};
|
||||
const ZOOM_ANIMATION_MS = 2000;
|
||||
const VIEWPORT_PADDING = 20;
|
||||
|
||||
const viewportRef = ref<HTMLDivElement | null>(null);
|
||||
const sceneRef = ref<HTMLDivElement | null>(null);
|
||||
const resizeObserver = ref<ResizeObserver | null>(null);
|
||||
|
||||
const currentLevel = ref<Level>("year");
|
||||
const transitionTarget = ref<Level | null>(null);
|
||||
const hoveredLevel = ref<Level>("month");
|
||||
const isAnimating = ref(false);
|
||||
const useTransition = ref(false);
|
||||
|
||||
const camera = reactive({
|
||||
x: 0,
|
||||
y: 0,
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
});
|
||||
const selectedMonth = ref(0);
|
||||
const selectedWeek = ref(0);
|
||||
const selectedDay = ref(0);
|
||||
|
||||
const levelState = reactive<Record<Level, LevelState>>({
|
||||
year: { loaded: true, loading: false },
|
||||
month: { loaded: false, loading: false },
|
||||
week: { loaded: false, loading: false },
|
||||
day: { loaded: false, loading: false },
|
||||
});
|
||||
const hoveredMonth = ref(0);
|
||||
const hoveredWeek = ref(0);
|
||||
const hoveredDay = ref(0);
|
||||
|
||||
const wheelPrime = reactive({
|
||||
direction: "" as "" | "in" | "out",
|
||||
ticks: 0,
|
||||
});
|
||||
const primeFocusId = ref("");
|
||||
|
||||
const pulseState = reactive({
|
||||
level: "" as "" | Level,
|
||||
scale: 1,
|
||||
});
|
||||
const cameraX = ref(0);
|
||||
const cameraY = ref(0);
|
||||
const cameraScaleX = ref(1);
|
||||
const cameraScaleY = ref(1);
|
||||
|
||||
const wheelPrimeDirection = ref<"" | Direction>("");
|
||||
const wheelPrimeTicks = ref(0);
|
||||
|
||||
let animationTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let primeTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let loadTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
const currentLevelIndex = computed(() => LEVELS.indexOf(currentLevel.value));
|
||||
const displayLevel = computed(() => transitionTarget.value ?? currentLevel.value);
|
||||
const displayIndex = computed(() => LEVELS.indexOf(displayLevel.value));
|
||||
const canZoomIn = computed(() => NEXT_LEVEL[currentLevel.value] !== null);
|
||||
const canZoomOut = computed(() => PREV_LEVEL[currentLevel.value] !== null);
|
||||
const displayLevelIndex = computed(() => LEVELS.indexOf(displayLevel.value));
|
||||
|
||||
const canZoomIn = computed(() => currentLevelIndex.value < LEVELS.length - 1);
|
||||
const canZoomOut = computed(() => currentLevelIndex.value > 0);
|
||||
|
||||
const sceneStyle = computed(() => ({
|
||||
transform: `translate3d(${camera.x}px, ${camera.y}px, 0) scale(${camera.scaleX}, ${camera.scaleY})`,
|
||||
transform: `translate3d(${cameraX.value}px, ${cameraY.value}px, 0) scale(${cameraScaleX.value}, ${cameraScaleY.value})`,
|
||||
transformOrigin: "0 0",
|
||||
transition: useTransition.value ? `transform ${ZOOM_ANIMATION_MS}ms cubic-bezier(0.2, 0.8, 0.2, 1)` : "none",
|
||||
}));
|
||||
|
||||
function pulseScaleFor(level: Level) {
|
||||
return pulseState.level === level ? pulseState.scale : 1;
|
||||
function getFocusId(level: Level) {
|
||||
if (level === "year") return "focus-year";
|
||||
if (level === "month") return `focus-month-${selectedMonth.value}`;
|
||||
if (level === "week") return `focus-week-${selectedWeek.value}`;
|
||||
return `focus-day-${selectedDay.value}`;
|
||||
}
|
||||
|
||||
function nextLevelOf(level: Level) {
|
||||
return NEXT_LEVEL[level];
|
||||
function findFocusElement(level: Level) {
|
||||
const scene = sceneRef.value;
|
||||
if (!scene) return null;
|
||||
const id = getFocusId(level);
|
||||
return scene.querySelector<HTMLElement>(`[data-focus-id="${id}"]`);
|
||||
}
|
||||
|
||||
function prevLevelOf(level: Level) {
|
||||
return PREV_LEVEL[level];
|
||||
}
|
||||
|
||||
function levelByIndex(index: number): Level {
|
||||
return LEVELS[Math.max(0, Math.min(LEVELS.length - 1, index))] ?? "year";
|
||||
}
|
||||
|
||||
function isNodeVisible(level: Level) {
|
||||
const currentIndex = LEVELS.indexOf(currentLevel.value);
|
||||
const targetIndex = transitionTarget.value ? LEVELS.indexOf(transitionTarget.value) : currentIndex;
|
||||
const maxIndex = Math.max(currentIndex, targetIndex);
|
||||
return LEVELS.indexOf(level) <= Math.min(maxIndex + 1, LEVELS.length - 1);
|
||||
}
|
||||
|
||||
function showLevelContent(level: Level) {
|
||||
if (isAnimating.value) return false;
|
||||
return currentLevel.value === level;
|
||||
}
|
||||
|
||||
function updateCameraForLevel(level: Level, animate: boolean) {
|
||||
function applyCameraToElement(element: HTMLElement, animate: boolean) {
|
||||
const viewport = viewportRef.value;
|
||||
if (!viewport) return;
|
||||
const scene = sceneRef.value;
|
||||
if (!viewport || !scene) return;
|
||||
|
||||
const rect = WORLD_RECT_BY_LEVEL[level];
|
||||
const viewportWidth = Math.max(1, viewport.clientWidth);
|
||||
const viewportHeight = Math.max(1, viewport.clientHeight);
|
||||
const safeWidth = Math.max(1, viewportWidth - WORLD_PADDING * 2);
|
||||
const safeHeight = Math.max(1, viewportHeight - WORLD_PADDING * 2);
|
||||
const safeWidth = Math.max(1, viewportWidth - VIEWPORT_PADDING * 2);
|
||||
const safeHeight = Math.max(1, viewportHeight - VIEWPORT_PADDING * 2);
|
||||
|
||||
const scaleX = safeWidth / rect.width;
|
||||
const scaleY = safeHeight / rect.height;
|
||||
const sceneRect = scene.getBoundingClientRect();
|
||||
const elementRect = element.getBoundingClientRect();
|
||||
|
||||
const x = WORLD_PADDING - rect.x * scaleX;
|
||||
const y = WORLD_PADDING - rect.y * scaleY;
|
||||
const localX = elementRect.left - sceneRect.left;
|
||||
const localY = elementRect.top - sceneRect.top;
|
||||
|
||||
const scaleX = safeWidth / Math.max(1, elementRect.width);
|
||||
const scaleY = safeHeight / Math.max(1, elementRect.height);
|
||||
|
||||
useTransition.value = animate;
|
||||
camera.x = x;
|
||||
camera.y = y;
|
||||
camera.scaleX = scaleX;
|
||||
camera.scaleY = scaleY;
|
||||
cameraScaleX.value = scaleX;
|
||||
cameraScaleY.value = scaleY;
|
||||
cameraX.value = VIEWPORT_PADDING - localX * scaleX;
|
||||
cameraY.value = VIEWPORT_PADDING - localY * scaleY;
|
||||
}
|
||||
|
||||
async function ensureGraphqlPayload(level: Level) {
|
||||
const state = levelState[level];
|
||||
if (state.loaded || state.loading) return;
|
||||
state.loading = true;
|
||||
|
||||
if (loadTimer) {
|
||||
clearTimeout(loadTimer);
|
||||
loadTimer = null;
|
||||
}
|
||||
|
||||
await new Promise<void>((resolve) => {
|
||||
loadTimer = setTimeout(() => {
|
||||
state.loading = false;
|
||||
state.loaded = true;
|
||||
resolve();
|
||||
}, 540);
|
||||
});
|
||||
function applyCameraToLevel(level: Level, animate: boolean) {
|
||||
const element = findFocusElement(level);
|
||||
if (!element) return;
|
||||
applyCameraToElement(element, animate);
|
||||
}
|
||||
|
||||
function startPulse(level: Level) {
|
||||
function startPrime(focusId: string) {
|
||||
if (primeTimer) {
|
||||
clearTimeout(primeTimer);
|
||||
primeTimer = null;
|
||||
}
|
||||
|
||||
pulseState.level = level;
|
||||
pulseState.scale = ZOOM_PRIME_SCALE;
|
||||
|
||||
primeFocusId.value = focusId;
|
||||
primeTimer = setTimeout(() => {
|
||||
pulseState.scale = 1;
|
||||
pulseState.level = "";
|
||||
primeFocusId.value = "";
|
||||
}, 170);
|
||||
}
|
||||
|
||||
function resetWheelPrime() {
|
||||
wheelPrime.direction = "";
|
||||
wheelPrime.ticks = 0;
|
||||
wheelPrimeDirection.value = "";
|
||||
wheelPrimeTicks.value = 0;
|
||||
}
|
||||
|
||||
async function runZoomTo(target: Level) {
|
||||
function nextLevel(level: Level): Level | null {
|
||||
const idx = LEVELS.indexOf(level);
|
||||
if (idx < 0 || idx >= LEVELS.length - 1) return null;
|
||||
return LEVELS[idx + 1] ?? null;
|
||||
}
|
||||
|
||||
function prevLevel(level: Level): Level | null {
|
||||
const idx = LEVELS.indexOf(level);
|
||||
if (idx <= 0) return null;
|
||||
return LEVELS[idx - 1] ?? null;
|
||||
}
|
||||
|
||||
function prepareZoomTarget(direction: Direction): { level: Level; focusId: string } | null {
|
||||
if (direction === "in") {
|
||||
if (currentLevel.value === "year") {
|
||||
selectedMonth.value = hoveredMonth.value;
|
||||
selectedWeek.value = 0;
|
||||
selectedDay.value = 0;
|
||||
const level = nextLevel(currentLevel.value);
|
||||
if (!level) return null;
|
||||
return { level, focusId: getFocusId(level) };
|
||||
}
|
||||
|
||||
if (currentLevel.value === "month") {
|
||||
selectedWeek.value = hoveredWeek.value;
|
||||
selectedDay.value = 0;
|
||||
const level = nextLevel(currentLevel.value);
|
||||
if (!level) return null;
|
||||
return { level, focusId: getFocusId(level) };
|
||||
}
|
||||
|
||||
if (currentLevel.value === "week") {
|
||||
selectedDay.value = hoveredDay.value;
|
||||
const level = nextLevel(currentLevel.value);
|
||||
if (!level) return null;
|
||||
return { level, focusId: getFocusId(level) };
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const level = prevLevel(currentLevel.value);
|
||||
if (!level) return null;
|
||||
return { level, focusId: getFocusId(level) };
|
||||
}
|
||||
|
||||
async function animateToLevel(level: Level) {
|
||||
if (isAnimating.value) return;
|
||||
if (target === currentLevel.value) return;
|
||||
|
||||
isAnimating.value = true;
|
||||
transitionTarget.value = target;
|
||||
transitionTarget.value = level;
|
||||
|
||||
await nextTick();
|
||||
updateCameraForLevel(target, true);
|
||||
applyCameraToLevel(level, true);
|
||||
|
||||
if (animationTimer) {
|
||||
clearTimeout(animationTimer);
|
||||
animationTimer = null;
|
||||
}
|
||||
|
||||
animationTimer = setTimeout(async () => {
|
||||
useTransition.value = false;
|
||||
currentLevel.value = target;
|
||||
transitionTarget.value = null;
|
||||
isAnimating.value = false;
|
||||
hoveredLevel.value = nextLevelOf(target) ?? target;
|
||||
await ensureGraphqlPayload(target);
|
||||
}, ZOOM_ANIMATION_MS + 30);
|
||||
await new Promise<void>((resolve) => {
|
||||
animationTimer = setTimeout(() => {
|
||||
useTransition.value = false;
|
||||
currentLevel.value = level;
|
||||
transitionTarget.value = null;
|
||||
isAnimating.value = false;
|
||||
resolve();
|
||||
}, ZOOM_ANIMATION_MS + 40);
|
||||
});
|
||||
}
|
||||
|
||||
async function zoom(direction: Direction) {
|
||||
if (isAnimating.value) return false;
|
||||
|
||||
const target = prepareZoomTarget(direction);
|
||||
if (!target) return false;
|
||||
|
||||
await animateToLevel(target.level);
|
||||
return true;
|
||||
}
|
||||
|
||||
function onWheel(event: WheelEvent) {
|
||||
if (isAnimating.value) return;
|
||||
|
||||
const direction: "in" | "out" = event.deltaY > 0 ? "in" : "out";
|
||||
const nextLevel = direction === "in" ? nextLevelOf(currentLevel.value) : prevLevelOf(currentLevel.value);
|
||||
if (!nextLevel) return;
|
||||
const direction: Direction = event.deltaY > 0 ? "in" : "out";
|
||||
const target = prepareZoomTarget(direction);
|
||||
if (!target) return;
|
||||
|
||||
if (wheelPrime.direction !== direction) {
|
||||
wheelPrime.direction = direction;
|
||||
wheelPrime.ticks = 0;
|
||||
if (wheelPrimeDirection.value !== direction) {
|
||||
wheelPrimeDirection.value = direction;
|
||||
wheelPrimeTicks.value = 0;
|
||||
}
|
||||
|
||||
const pulseTarget = direction === "in" ? (hoveredLevel.value === nextLevel ? hoveredLevel.value : nextLevel) : currentLevel.value;
|
||||
if (wheelPrime.ticks < ZOOM_PRIME_STEPS) {
|
||||
wheelPrime.ticks += 1;
|
||||
startPulse(pulseTarget);
|
||||
if (wheelPrimeTicks.value < ZOOM_PRIME_STEPS) {
|
||||
wheelPrimeTicks.value += 1;
|
||||
startPrime(target.focusId);
|
||||
return;
|
||||
}
|
||||
|
||||
resetWheelPrime();
|
||||
void runZoomTo(nextLevel);
|
||||
void animateToLevel(target.level);
|
||||
}
|
||||
|
||||
function onSliderInput(event: Event) {
|
||||
async function onSliderInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement | null;
|
||||
if (!target) return;
|
||||
if (!target || isAnimating.value) return;
|
||||
|
||||
const next = levelByIndex(Number(target.value));
|
||||
resetWheelPrime();
|
||||
void runZoomTo(next);
|
||||
|
||||
const targetIndex = Number(target.value);
|
||||
const safeTargetIndex = Math.max(0, Math.min(LEVELS.length - 1, targetIndex));
|
||||
|
||||
while (!isAnimating.value && currentLevelIndex.value < safeTargetIndex) {
|
||||
const moved = await zoom("in");
|
||||
if (!moved) break;
|
||||
}
|
||||
|
||||
while (!isAnimating.value && currentLevelIndex.value > safeTargetIndex) {
|
||||
const moved = await zoom("out");
|
||||
if (!moved) break;
|
||||
}
|
||||
}
|
||||
|
||||
function onZoomInClick() {
|
||||
const next = nextLevelOf(currentLevel.value);
|
||||
if (!next) return;
|
||||
resetWheelPrime();
|
||||
void runZoomTo(next);
|
||||
function isPrime(id: string) {
|
||||
return primeFocusId.value === id;
|
||||
}
|
||||
|
||||
function onZoomOutClick() {
|
||||
const prev = prevLevelOf(currentLevel.value);
|
||||
if (!prev) return;
|
||||
resetWheelPrime();
|
||||
void runZoomTo(prev);
|
||||
function isMonthSelected(index: number) {
|
||||
return selectedMonth.value === index;
|
||||
}
|
||||
|
||||
function isWeekSelected(index: number) {
|
||||
return selectedWeek.value === index;
|
||||
}
|
||||
|
||||
function isDaySelected(index: number) {
|
||||
return selectedDay.value === index;
|
||||
}
|
||||
|
||||
function showMonthContent(index: number) {
|
||||
return isMonthSelected(index) && currentLevel.value !== "year";
|
||||
}
|
||||
|
||||
function showWeekContent(index: number) {
|
||||
return isWeekSelected(index) && (currentLevel.value === "week" || currentLevel.value === "day");
|
||||
}
|
||||
|
||||
function showDayContent(index: number) {
|
||||
return isDaySelected(index) && currentLevel.value === "day";
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
updateCameraForLevel(currentLevel.value, false);
|
||||
hoveredLevel.value = nextLevelOf(currentLevel.value) ?? currentLevel.value;
|
||||
applyCameraToLevel("year", false);
|
||||
|
||||
resizeObserver.value = new ResizeObserver(() => {
|
||||
updateCameraForLevel(displayLevel.value, false);
|
||||
applyCameraToLevel(displayLevel.value, false);
|
||||
});
|
||||
|
||||
if (viewportRef.value) {
|
||||
@@ -270,7 +295,6 @@ onMounted(async () => {
|
||||
onBeforeUnmount(() => {
|
||||
if (animationTimer) clearTimeout(animationTimer);
|
||||
if (primeTimer) clearTimeout(primeTimer);
|
||||
if (loadTimer) clearTimeout(loadTimer);
|
||||
resizeObserver.value?.disconnect();
|
||||
});
|
||||
</script>
|
||||
@@ -278,11 +302,9 @@ onBeforeUnmount(() => {
|
||||
<template>
|
||||
<section class="calendar-lab-root">
|
||||
<header class="calendar-lab-toolbar">
|
||||
<div class="calendar-lab-toolbar-left">
|
||||
<button class="btn btn-xs" :disabled="!canZoomOut" @click="onZoomOutClick">-</button>
|
||||
<button class="btn btn-xs" :disabled="!canZoomIn" @click="onZoomInClick">+</button>
|
||||
<span class="calendar-lab-level-text">Current: {{ LEVEL_LABELS[currentLevel] }}</span>
|
||||
</div>
|
||||
<p class="calendar-lab-level-text">
|
||||
Current level: {{ LEVEL_LABELS[currentLevel] }}
|
||||
</p>
|
||||
|
||||
<div class="calendar-zoom-inline" @click.stop>
|
||||
<input
|
||||
@@ -291,7 +313,7 @@ onBeforeUnmount(() => {
|
||||
min="0"
|
||||
max="3"
|
||||
step="1"
|
||||
:value="displayIndex"
|
||||
:value="displayLevelIndex"
|
||||
aria-label="Calendar zoom level"
|
||||
@input="onSliderInput"
|
||||
>
|
||||
@@ -300,7 +322,7 @@ onBeforeUnmount(() => {
|
||||
v-for="index in 4"
|
||||
:key="`calendar-lab-zoom-mark-${index}`"
|
||||
class="calendar-zoom-mark"
|
||||
:class="displayIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
|
||||
:class="displayLevelIndex === index - 1 ? 'calendar-zoom-mark-active' : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -312,87 +334,73 @@ onBeforeUnmount(() => {
|
||||
:class="canZoomIn ? 'cursor-zoom-in' : 'cursor-zoom-out'"
|
||||
@wheel.prevent="onWheel"
|
||||
>
|
||||
<div class="calendar-lab-scene" :style="sceneStyle">
|
||||
<div class="calendar-lab-world">
|
||||
<div
|
||||
v-show="isNodeVisible('year')"
|
||||
class="calendar-lab-node calendar-lab-node-year"
|
||||
:class="[
|
||||
currentLevel === 'year' ? 'calendar-lab-node-active' : '',
|
||||
hoveredLevel === 'year' ? 'calendar-lab-node-hover' : '',
|
||||
transitionTarget === 'year' ? 'calendar-lab-node-target' : '',
|
||||
]"
|
||||
@mouseenter="hoveredLevel = 'year'"
|
||||
>
|
||||
<CrmCalendarLabYearRect
|
||||
:is-active="currentLevel === 'year'"
|
||||
:is-loading="levelState.year.loading"
|
||||
:is-loaded="levelState.year.loaded"
|
||||
:show-content="showLevelContent('year')"
|
||||
:next-label="LEVEL_LABELS.month"
|
||||
:pulse-scale="pulseScaleFor('year')"
|
||||
/>
|
||||
|
||||
<div ref="sceneRef" class="calendar-lab-scene" :style="sceneStyle">
|
||||
<article class="calendar-year" data-focus-id="focus-year">
|
||||
<div class="calendar-year-grid">
|
||||
<div
|
||||
v-show="isNodeVisible('month')"
|
||||
class="calendar-lab-node calendar-lab-node-month"
|
||||
v-for="(label, monthIndex) in MONTH_LABELS"
|
||||
:key="`month-${label}`"
|
||||
class="calendar-month-card"
|
||||
:class="[
|
||||
currentLevel === 'month' ? 'calendar-lab-node-active' : '',
|
||||
hoveredLevel === 'month' ? 'calendar-lab-node-hover' : '',
|
||||
transitionTarget === 'month' ? 'calendar-lab-node-target' : '',
|
||||
isMonthSelected(monthIndex) ? 'calendar-month-card-selected' : '',
|
||||
currentLevel === 'year' && hoveredMonth === monthIndex ? 'calendar-hover-target' : '',
|
||||
isPrime(`focus-month-${monthIndex}`) ? 'calendar-prime-target' : '',
|
||||
]"
|
||||
@mouseenter="hoveredLevel = 'month'"
|
||||
:data-focus-id="`focus-month-${monthIndex}`"
|
||||
@mouseenter="currentLevel === 'year' ? (hoveredMonth = monthIndex) : undefined"
|
||||
>
|
||||
<CrmCalendarLabMonthRect
|
||||
:is-active="currentLevel === 'month'"
|
||||
:is-loading="levelState.month.loading"
|
||||
:is-loaded="levelState.month.loaded"
|
||||
:show-content="showLevelContent('month')"
|
||||
:next-label="LEVEL_LABELS.week"
|
||||
:pulse-scale="pulseScaleFor('month')"
|
||||
/>
|
||||
<p class="calendar-card-label">{{ label }}</p>
|
||||
|
||||
<div
|
||||
v-show="isNodeVisible('week')"
|
||||
class="calendar-lab-node calendar-lab-node-week"
|
||||
:class="[
|
||||
currentLevel === 'week' ? 'calendar-lab-node-active' : '',
|
||||
hoveredLevel === 'week' ? 'calendar-lab-node-hover' : '',
|
||||
transitionTarget === 'week' ? 'calendar-lab-node-target' : '',
|
||||
]"
|
||||
@mouseenter="hoveredLevel = 'week'"
|
||||
>
|
||||
<CrmCalendarLabWeekRect
|
||||
:is-active="currentLevel === 'week'"
|
||||
:is-loading="levelState.week.loading"
|
||||
:is-loaded="levelState.week.loaded"
|
||||
:show-content="showLevelContent('week')"
|
||||
:next-label="LEVEL_LABELS.day"
|
||||
:pulse-scale="pulseScaleFor('week')"
|
||||
/>
|
||||
<div v-if="showMonthContent(monthIndex)" class="calendar-week-grid-wrap">
|
||||
<div class="calendar-week-grid">
|
||||
<div
|
||||
v-for="weekIndex in 6"
|
||||
:key="`week-${weekIndex - 1}`"
|
||||
class="calendar-week-card"
|
||||
:class="[
|
||||
isWeekSelected(weekIndex - 1) ? 'calendar-week-card-selected' : '',
|
||||
currentLevel === 'month' && hoveredWeek === weekIndex - 1 ? 'calendar-hover-target' : '',
|
||||
isPrime(`focus-week-${weekIndex - 1}`) ? 'calendar-prime-target' : '',
|
||||
]"
|
||||
:data-focus-id="`focus-week-${weekIndex - 1}`"
|
||||
@mouseenter="currentLevel === 'month' ? (hoveredWeek = weekIndex - 1) : undefined"
|
||||
>
|
||||
<p class="calendar-card-label">Week {{ weekIndex }}</p>
|
||||
|
||||
<div
|
||||
v-show="isNodeVisible('day')"
|
||||
class="calendar-lab-node calendar-lab-node-day"
|
||||
:class="[
|
||||
currentLevel === 'day' ? 'calendar-lab-node-active' : '',
|
||||
hoveredLevel === 'day' ? 'calendar-lab-node-hover' : '',
|
||||
transitionTarget === 'day' ? 'calendar-lab-node-target' : '',
|
||||
]"
|
||||
@mouseenter="hoveredLevel = 'day'"
|
||||
>
|
||||
<CrmCalendarLabDayRect
|
||||
:is-active="currentLevel === 'day'"
|
||||
:is-loading="levelState.day.loading"
|
||||
:is-loaded="levelState.day.loaded"
|
||||
:show-content="showLevelContent('day')"
|
||||
:pulse-scale="pulseScaleFor('day')"
|
||||
/>
|
||||
<div v-if="showWeekContent(weekIndex - 1)" class="calendar-day-grid-wrap">
|
||||
<div class="calendar-day-grid">
|
||||
<div
|
||||
v-for="dayIndex in 7"
|
||||
:key="`day-${dayIndex - 1}`"
|
||||
class="calendar-day-card"
|
||||
:class="[
|
||||
isDaySelected(dayIndex - 1) ? 'calendar-day-card-selected' : '',
|
||||
currentLevel === 'week' && hoveredDay === dayIndex - 1 ? 'calendar-hover-target' : '',
|
||||
isPrime(`focus-day-${dayIndex - 1}`) ? 'calendar-prime-target' : '',
|
||||
]"
|
||||
:data-focus-id="`focus-day-${dayIndex - 1}`"
|
||||
@mouseenter="currentLevel === 'week' ? (hoveredDay = dayIndex - 1) : undefined"
|
||||
>
|
||||
<p class="calendar-card-label">Day {{ dayIndex }}</p>
|
||||
|
||||
<div v-if="showDayContent(dayIndex - 1)" class="calendar-slot-grid-wrap">
|
||||
<div class="calendar-slot-grid">
|
||||
<span
|
||||
v-for="slot in 12"
|
||||
:key="`slot-${slot}`"
|
||||
class="calendar-slot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -415,12 +423,6 @@ onBeforeUnmount(() => {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.calendar-lab-toolbar-left {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.calendar-lab-level-text {
|
||||
font-size: 0.78rem;
|
||||
color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
|
||||
@@ -444,180 +446,98 @@ onBeforeUnmount(() => {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.calendar-lab-world {
|
||||
width: 1400px;
|
||||
height: 900px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-lab-node {
|
||||
.calendar-year {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.calendar-lab-node-year {
|
||||
left: 80px;
|
||||
top: 50px;
|
||||
width: 1240px;
|
||||
height: 760px;
|
||||
}
|
||||
|
||||
.calendar-lab-node-month {
|
||||
left: 250px;
|
||||
top: 145px;
|
||||
width: 740px;
|
||||
height: 430px;
|
||||
}
|
||||
|
||||
.calendar-lab-node-week {
|
||||
left: 140px;
|
||||
top: 80px;
|
||||
width: 460px;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.calendar-lab-node-day {
|
||||
left: 90px;
|
||||
top: 55px;
|
||||
width: 280px;
|
||||
height: 165px;
|
||||
}
|
||||
|
||||
.calendar-lab-node-active :deep(.calendar-lab-rect),
|
||||
.calendar-lab-node-target :deep(.calendar-lab-rect) {
|
||||
border-color: color-mix(in oklab, var(--color-primary) 85%, transparent);
|
||||
box-shadow:
|
||||
0 0 0 2px color-mix(in oklab, var(--color-primary) 45%, transparent),
|
||||
0 16px 36px color-mix(in oklab, var(--color-base-content) 10%, transparent);
|
||||
}
|
||||
|
||||
.calendar-lab-node-hover :deep(.calendar-lab-rect) {
|
||||
border-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-rect) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 14px;
|
||||
border: 1px solid color-mix(in oklab, var(--color-base-content) 24%, transparent);
|
||||
background: color-mix(in oklab, var(--color-base-100) 96%, transparent);
|
||||
padding: 12px;
|
||||
transform-origin: center center;
|
||||
transition:
|
||||
transform 200ms ease,
|
||||
border-color 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background-color 180ms ease;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-header) {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
.calendar-year-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-title) {
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
.calendar-month-card,
|
||||
.calendar-week-card,
|
||||
.calendar-day-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid color-mix(in oklab, var(--color-base-content) 18%, transparent);
|
||||
background: color-mix(in oklab, var(--color-base-200) 72%, transparent);
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-subtitle) {
|
||||
font-size: 0.7rem;
|
||||
color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
|
||||
.calendar-month-card-selected,
|
||||
.calendar-week-card-selected,
|
||||
.calendar-day-card-selected {
|
||||
border-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-loading),
|
||||
:deep(.calendar-lab-meta),
|
||||
:deep(.calendar-lab-hint) {
|
||||
margin-bottom: 8px;
|
||||
.calendar-card-label {
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-loading) {
|
||||
color: color-mix(in oklab, var(--color-warning) 85%, var(--color-base-content));
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-meta) {
|
||||
color: color-mix(in oklab, var(--color-success) 86%, var(--color-base-content));
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-hint) {
|
||||
color: color-mix(in oklab, var(--color-base-content) 68%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-grid-year) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-chip),
|
||||
:deep(.calendar-lab-row),
|
||||
:deep(.calendar-lab-day),
|
||||
:deep(.calendar-lab-event) {
|
||||
border-radius: 9px;
|
||||
border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
|
||||
background: color-mix(in oklab, var(--color-base-200) 78%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-chip) {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 600;
|
||||
color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-grid-month) {
|
||||
.calendar-week-grid-wrap,
|
||||
.calendar-day-grid-wrap,
|
||||
.calendar-slot-grid-wrap {
|
||||
width: 100%;
|
||||
height: calc(100% - 20px);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.calendar-week-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-row) {
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-grid-week) {
|
||||
.calendar-day-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-day) {
|
||||
min-height: 70px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-timeline) {
|
||||
.calendar-slot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
gap: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-event) {
|
||||
min-height: 44px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.72rem;
|
||||
.calendar-slot {
|
||||
border-radius: 8px;
|
||||
border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
|
||||
background: color-mix(in oklab, var(--color-base-100) 88%, transparent);
|
||||
}
|
||||
|
||||
:deep(.calendar-lab-event span) {
|
||||
font-weight: 700;
|
||||
min-width: 50px;
|
||||
.calendar-hover-target {
|
||||
border-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 36%, transparent) inset;
|
||||
}
|
||||
|
||||
.calendar-prime-target {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.calendar-zoom-inline {
|
||||
|
||||
Reference in New Issue
Block a user