till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 19:01:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(calendar): add minimize button to DateStrip

Browse source 
Add a transparent minimize button at the left edge of the DateStrip that
allows quick collapsing to FAB without needing the context menu.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-14 21:17:22 +01:00
parent 5bf275d9d0
commit e0ef15276d
1 changed files with 54 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

54
apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
View file

@ -26,6 +26,10 @@
contextMenu?.show(e.clientX, e.clientY);
}
function handleMinimize() {
settingsStore.set('dateStripCollapsed', true);
}
interface Props {
isSidebarMode?: boolean;
isToolbarExpanded?: boolean;
@ -248,6 +252,13 @@
class:toolbar-expanded={isToolbarExpanded}
class:compact={settingsStore.dateStripCompact}
>
<!-- Minimize button at left edge -->
<button class="minimize-btn" onclick={handleMinimize} title="Datumsleiste minimieren">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="20" height="20">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="date-strip-container" oncontextmenu={handleContextMenu}>
<!-- Month label -->
@ -714,4 +725,47 @@
.date-strip-wrapper.compact .today-date {
font-size: 0.625rem;
}
/* Minimize button */
.minimize-btn {
position: absolute;
left: 0.5rem;
bottom: 34%;
transform: translateY(50%);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: hsl(var(--color-muted-foreground));
pointer-events: auto;
transition: all 0.15s ease;
z-index: 10;
}
.minimize-btn:hover {
background: hsl(var(--color-muted) / 0.8);
color: hsl(var(--color-foreground));
}
.minimize-btn:active {
transform: translateY(50%) scale(0.95);
}
@media (max-width: 640px) {
.minimize-btn {
left: 0.25rem;
width: 32px;
height: 32px;
}
.minimize-btn svg {
width: 18px;
height: 18px;
}
}
</style>