mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:01:08 +02:00
feat(calendar): implement UnifiedBar — replace standalone bottom bars with layered system
Replaces individual QuickInputBar, DateStrip, DateStripFab, CalendarToolbar, and ViewsBar with a single UnifiedBar component. Layers stack via flexbox, child positioning overridden to relative. Overlay menu allows toggling layer visibility. View switcher integrated into toolbar layer. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
a336728e68
commit
debd55ffcf
3 changed files with 519 additions and 754 deletions
|
|
@ -1,114 +1,70 @@
|
|||
<script lang="ts">
|
||||
import { setContext, onMount } from 'svelte';
|
||||
import type { Snippet } from 'svelte';
|
||||
import { QuickInputBar } from '@manacore/shared-ui';
|
||||
import type { QuickInputItem } from '@manacore/shared-ui';
|
||||
import { unifiedBarStore } from '$lib/stores/unified-bar.svelte';
|
||||
import DateStrip from './DateStrip.svelte';
|
||||
import TagStrip from './TagStrip.svelte';
|
||||
import CalendarToolbarContent from './CalendarToolbarContent.svelte';
|
||||
import { viewStore } from '$lib/stores/view.svelte';
|
||||
import type { CalendarViewType } from '@calendar/shared';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly, slide } from 'svelte/transition';
|
||||
|
||||
// Components (not yet integrated — using placeholders)
|
||||
// import DateStrip from './DateStrip.svelte';
|
||||
// import TagStrip from './TagStrip.svelte';
|
||||
// import CalendarToolbar from './CalendarToolbar.svelte';
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
// QuickInputBar props
|
||||
onSearch?: (query: string) => void;
|
||||
onSelect?: (result: any) => void;
|
||||
onSearchChange?: (query: string) => void;
|
||||
onCreate?: (data: any) => void;
|
||||
onSearch: (query: string) => Promise<QuickInputItem[]>;
|
||||
onSelect: (item: QuickInputItem) => void;
|
||||
onSearchChange?: (query: string, results: QuickInputItem[]) => void;
|
||||
placeholder?: string;
|
||||
emptyText?: string;
|
||||
searchingText?: string;
|
||||
createText?: string;
|
||||
appIcon?: string;
|
||||
bottomOffset?: string;
|
||||
hasFabRight?: boolean;
|
||||
hasFabLeft?: boolean;
|
||||
defaultOptions?: any[];
|
||||
|
||||
// DateStrip props
|
||||
selectedDate?: Date;
|
||||
onDateSelect?: (date: Date) => void;
|
||||
|
||||
// Responsive
|
||||
defaultOptions?: { id: string; label: string }[];
|
||||
selectedDefaultId?: string;
|
||||
defaultOptionLabel?: string;
|
||||
onDefaultChange?: (id: string) => void;
|
||||
onShowShortcuts?: () => void;
|
||||
onShowSyntaxHelp?: () => void;
|
||||
leftAction?: Snippet;
|
||||
/** Show calendar-specific layers (DateStrip, TagStrip, Toolbar) */
|
||||
showCalendarLayers?: boolean;
|
||||
isMobile?: boolean;
|
||||
|
||||
// Calendar toolbar visibility
|
||||
showCalendarToolbar?: boolean;
|
||||
onToolbarCollapsedChange?: (collapsed: boolean) => void;
|
||||
/** Hide the entire bar (e.g. immersive mode) */
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
// QuickInputBar props
|
||||
onSearch = () => {},
|
||||
onSelect = () => {},
|
||||
onSearchChange = () => {},
|
||||
onCreate = () => {},
|
||||
onSearch,
|
||||
onSelect,
|
||||
onSearchChange,
|
||||
placeholder = 'Neuer Termin oder suchen...',
|
||||
emptyText = 'Keine Termine gefunden',
|
||||
searchingText = 'Suche...',
|
||||
createText = 'Erstellen',
|
||||
appIcon = 'calendar',
|
||||
bottomOffset = '70px',
|
||||
hasFabRight = false,
|
||||
hasFabLeft = false,
|
||||
defaultOptions = [],
|
||||
|
||||
// DateStrip props
|
||||
onDateSelect = () => {},
|
||||
|
||||
// Responsive
|
||||
defaultOptions,
|
||||
selectedDefaultId,
|
||||
defaultOptionLabel,
|
||||
onDefaultChange,
|
||||
onShowShortcuts,
|
||||
onShowSyntaxHelp,
|
||||
leftAction,
|
||||
showCalendarLayers = false,
|
||||
isMobile = false,
|
||||
|
||||
// Calendar toolbar
|
||||
showCalendarToolbar = false,
|
||||
onToolbarCollapsedChange = () => {},
|
||||
hidden = false,
|
||||
}: Props = $props();
|
||||
|
||||
// Local state for transitions
|
||||
let isTransitioning = $state(false);
|
||||
let previousMode = $state(unifiedBarStore.mode);
|
||||
const flyConfig = { duration: 250, easing: quintOut, y: 40 };
|
||||
|
||||
// Computed values
|
||||
let layerZIndices = $derived({
|
||||
input: 80,
|
||||
date: 85,
|
||||
tag: 90,
|
||||
toolbar: 95,
|
||||
overlay: 110,
|
||||
});
|
||||
// View switcher
|
||||
const views: { id: CalendarViewType; label: string; title: string }[] = [
|
||||
{ id: 'week', label: '7', title: 'Wochenansicht' },
|
||||
{ id: 'month', label: 'M', title: 'Monatsansicht' },
|
||||
{ id: 'agenda', label: 'L', title: 'Agenda' },
|
||||
];
|
||||
|
||||
let activeLayers = $derived(() => {
|
||||
const layers = [];
|
||||
if (unifiedBarStore.showQuickInput) layers.push('input');
|
||||
if (unifiedBarStore.showDateStrip) layers.push('date');
|
||||
if (unifiedBarStore.showTagStrip) layers.push('tag');
|
||||
if (unifiedBarStore.showCalendarToolbar) layers.push('toolbar');
|
||||
return layers;
|
||||
});
|
||||
|
||||
// Simplified bottom offsets (using fixed values for now)
|
||||
let layerBottomOffsets = $derived({
|
||||
input: '0px',
|
||||
date: '70px',
|
||||
tag: '140px',
|
||||
toolbar: '280px',
|
||||
});
|
||||
|
||||
// Handle mode transitions
|
||||
$effect(() => {
|
||||
const currentMode = unifiedBarStore.mode;
|
||||
if (currentMode !== previousMode) {
|
||||
isTransitioning = true;
|
||||
setTimeout(() => {
|
||||
isTransitioning = false;
|
||||
}, unifiedBarStore.settings.barAnimationDuration);
|
||||
previousMode = currentMode;
|
||||
}
|
||||
});
|
||||
|
||||
// Overlay menu handlers
|
||||
function handleOverlayToggle() {
|
||||
function toggleOverlay() {
|
||||
unifiedBarStore.toggleOverlay();
|
||||
}
|
||||
|
||||
|
|
@ -127,276 +83,388 @@
|
|||
unifiedBarStore.collapseAll();
|
||||
break;
|
||||
}
|
||||
|
||||
// Close overlay after action
|
||||
unifiedBarStore.set('overlayMenuOpen', false);
|
||||
}
|
||||
|
||||
// Layer activation
|
||||
function handleLayerClick(layer: string) {
|
||||
unifiedBarStore.setActiveLayer(layer as any);
|
||||
if (unifiedBarStore.mode === 'collapsed') {
|
||||
unifiedBarStore.setMode('expanded');
|
||||
}
|
||||
}
|
||||
|
||||
// Context for child components
|
||||
onMount(() => {
|
||||
setContext('unifiedBarStore', unifiedBarStore);
|
||||
setContext('isMobile', isMobile);
|
||||
});
|
||||
|
||||
// Transition configurations
|
||||
const slideConfig = {
|
||||
duration: unifiedBarStore.settings.barAnimationDuration,
|
||||
easing: quintOut,
|
||||
y: 20,
|
||||
};
|
||||
|
||||
const flyConfig = {
|
||||
duration: unifiedBarStore.settings.barAnimationDuration,
|
||||
easing: quintOut,
|
||||
opacity: 0.8,
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- UnifiedBar Container -->
|
||||
<div
|
||||
class="unified-bar-container"
|
||||
class:transitioning={isTransitioning}
|
||||
style="--animation-duration: {unifiedBarStore.settings.barAnimationDuration}ms;"
|
||||
>
|
||||
<!-- Layer 3: CalendarToolbar -->
|
||||
{#if unifiedBarStore.showCalendarToolbar}
|
||||
<div class="unified-bar" class:hidden>
|
||||
<!-- Layer 3: Toolbar (view switcher + calendar options) -->
|
||||
{#if showCalendarLayers && unifiedBarStore.showCalendarToolbar}
|
||||
<div
|
||||
class="unified-bar-layer toolbar-layer"
|
||||
style="z-index: {layerZIndices.toolbar}; bottom: {layerBottomOffsets.toolbar};"
|
||||
class:active={unifiedBarStore.activeLayer === 'toolbar'}
|
||||
transition:fly={{ ...flyConfig, y: 100 }}
|
||||
transition:fly={flyConfig}
|
||||
role="toolbar"
|
||||
aria-label="Calendar toolbar"
|
||||
onclick={() => handleLayerClick('toolbar')}
|
||||
aria-label="Kalender-Toolbar"
|
||||
>
|
||||
<!-- CalendarToolbar placeholder -->
|
||||
<div class="toolbar-placeholder">CalendarToolbar Component</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Layer 2: TagStrip -->
|
||||
{#if unifiedBarStore.showTagStrip}
|
||||
<div
|
||||
class="unified-bar-layer tag-strip-layer"
|
||||
style="z-index: {layerZIndices.tag}; bottom: {layerBottomOffsets.tag};"
|
||||
class:active={unifiedBarStore.activeLayer === 'tag'}
|
||||
transition:fly={{ ...flyConfig, y: 50 }}
|
||||
role="toolbar"
|
||||
aria-label="Tag filter bar"
|
||||
onclick={() => handleLayerClick('tag')}
|
||||
>
|
||||
<!-- TagStrip placeholder -->
|
||||
<div class="tag-strip-placeholder">TagStrip Component</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Layer 1: DateStrip -->
|
||||
{#if unifiedBarStore.showDateStrip}
|
||||
<div
|
||||
class="unified-bar-layer date-strip-layer"
|
||||
style="z-index: {layerZIndices.date}; bottom: {layerBottomOffsets.date};"
|
||||
class:active={unifiedBarStore.activeLayer === 'date'}
|
||||
transition:fly={{ ...flyConfig, y: 30 }}
|
||||
role="toolbar"
|
||||
aria-label="Date strip"
|
||||
onclick={() => handleLayerClick('date')}
|
||||
>
|
||||
<div class="date-strip-placeholder">DateStrip Component</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Layer 0: QuickInputBar -->
|
||||
{#if unifiedBarStore.showQuickInput}
|
||||
<div
|
||||
class="unified-bar-layer input-layer"
|
||||
style="z-index: {layerZIndices.input}; bottom: {layerBottomOffsets.input};"
|
||||
class:active={unifiedBarStore.activeLayer === 'input'}
|
||||
transition:slide={slideConfig}
|
||||
role="toolbar"
|
||||
aria-label="Quick input"
|
||||
onclick={() => handleLayerClick('input')}
|
||||
>
|
||||
<div class="input-bar-wrapper">
|
||||
<div class="input-bar-row">
|
||||
<!-- QuickInputBar placeholder - will be implemented with actual component -->
|
||||
<div class="quick-input-placeholder">
|
||||
QuickInputBar Component
|
||||
<button onmousedown={handleOverlayToggle}>
|
||||
{unifiedBarStore.isOverlayOpen ? 'X' : 'Menu'}
|
||||
<div class="toolbar-inner">
|
||||
<div class="view-switcher">
|
||||
{#each views as view}
|
||||
<button
|
||||
class="view-btn"
|
||||
class:active={viewStore.viewType === view.id}
|
||||
onclick={() => viewStore.setViewType(view.id)}
|
||||
title={view.title}
|
||||
>
|
||||
{view.label}
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<span class="toolbar-sep"></span>
|
||||
<CalendarToolbarContent />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Overlay Menu -->
|
||||
{#if unifiedBarStore.isOverlayOpen}
|
||||
<div
|
||||
class="unified-bar-overlay"
|
||||
style="z-index: {layerZIndices.overlay};"
|
||||
transition:fly={{ ...flyConfig, y: 100 }}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<div class="overlay-backdrop" onclick={handleOverlayToggle} />
|
||||
<div class="overlay-content">
|
||||
<div class="overlay-header">
|
||||
<h3>Menü</h3>
|
||||
<button class="close-btn" onmousedown={handleOverlayToggle}>
|
||||
<span class="icon-x"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overlay-actions">
|
||||
<!-- Layer Toggles -->
|
||||
<div class="action-group">
|
||||
<h4>Ansichten</h4>
|
||||
<button
|
||||
class="action-btn"
|
||||
class:active={unifiedBarStore.showDateStrip}
|
||||
onmousedown={() => handleOverlayAction('toggle-date-strip')}
|
||||
>
|
||||
<span class="icon-calendar"></span>
|
||||
Datum-Leiste
|
||||
<span class="status">{unifiedBarStore.showDateStrip ? '✓' : ''}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="action-btn"
|
||||
class:active={unifiedBarStore.showTagStrip}
|
||||
onmousedown={() => handleOverlayAction('toggle-tag-strip')}
|
||||
>
|
||||
<span class="icon-tag"></span>
|
||||
Tag-Filter
|
||||
<span class="status">{unifiedBarStore.showTagStrip ? '✓' : ''}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="action-btn"
|
||||
class:active={unifiedBarStore.showCalendarToolbar}
|
||||
onmousedown={() => handleOverlayAction('toggle-toolbar')}
|
||||
>
|
||||
<span class="icon-toolbox"></span>
|
||||
Kalender-Toolbar
|
||||
<span class="status">{unifiedBarStore.showCalendarToolbar ? '✓' : ''}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="action-group">
|
||||
<h4>Schnellaktionen</h4>
|
||||
<button class="action-btn" onmousedown={() => handleOverlayAction('collapse-all')}>
|
||||
<span class="icon-minimize"></span>
|
||||
Alle einklappen
|
||||
</button>
|
||||
|
||||
<button class="action-btn" onmousedown={() => handleOverlayAction('new-event')}>
|
||||
<span class="icon-plus"></span>
|
||||
Neuer Termin
|
||||
</button>
|
||||
|
||||
<button class="action-btn" onmousedown={() => handleOverlayAction('today')}>
|
||||
<span class="icon-navigation"></span>
|
||||
Heute
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Layer 2: Tag Filter Strip -->
|
||||
{#if showCalendarLayers && unifiedBarStore.showTagStrip}
|
||||
<div class="unified-bar-layer tag-layer" transition:fly={flyConfig}>
|
||||
<TagStrip />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Layer 1: Date Strip -->
|
||||
{#if showCalendarLayers && unifiedBarStore.showDateStrip}
|
||||
<div class="unified-bar-layer date-layer" transition:fly={flyConfig}>
|
||||
<DateStrip />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Layer 0: Input Bar (always visible) -->
|
||||
<div class="unified-bar-layer input-layer">
|
||||
<QuickInputBar
|
||||
{onSearch}
|
||||
{onSelect}
|
||||
{onSearchChange}
|
||||
{placeholder}
|
||||
{emptyText}
|
||||
{searchingText}
|
||||
{createText}
|
||||
{appIcon}
|
||||
bottomOffset="0px"
|
||||
hasFabRight={showCalendarLayers}
|
||||
{defaultOptions}
|
||||
{selectedDefaultId}
|
||||
{defaultOptionLabel}
|
||||
{onDefaultChange}
|
||||
{onShowShortcuts}
|
||||
{onShowSyntaxHelp}
|
||||
{leftAction}
|
||||
/>
|
||||
|
||||
<!-- Layers Menu FAB (only on calendar main page) -->
|
||||
{#if showCalendarLayers}
|
||||
<button class="layers-fab" onclick={toggleOverlay} title="Leisten anpassen">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12 2L2 7l10 5 10-5-10-5z" />
|
||||
<path d="M2 17l10 5 10-5" />
|
||||
<path d="M2 12l10 5 10-5" />
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overlay Menu (outside container for proper z-index stacking) -->
|
||||
{#if unifiedBarStore.isOverlayOpen}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="unified-overlay" transition:fly={{ duration: 250, easing: quintOut, y: 100 }}>
|
||||
<div class="overlay-backdrop" onclick={toggleOverlay} role="presentation"></div>
|
||||
<div class="overlay-sheet" role="dialog" aria-label="Leisten-Menü">
|
||||
<div class="overlay-header">
|
||||
<h3>Leisten</h3>
|
||||
<button class="overlay-close-btn" onclick={toggleOverlay} aria-label="Schließen">
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="overlay-items">
|
||||
<button
|
||||
class="overlay-item"
|
||||
class:active={unifiedBarStore.showDateStrip}
|
||||
onclick={() => handleOverlayAction('toggle-date-strip')}
|
||||
>
|
||||
<span class="item-icon">📅</span>
|
||||
<span class="item-label">Datum-Leiste</span>
|
||||
{#if unifiedBarStore.showDateStrip}<span class="item-check">✓</span>{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="overlay-item"
|
||||
class:active={unifiedBarStore.showTagStrip}
|
||||
onclick={() => handleOverlayAction('toggle-tag-strip')}
|
||||
>
|
||||
<span class="item-icon">🏷️</span>
|
||||
<span class="item-label">Tag-Filter</span>
|
||||
{#if unifiedBarStore.showTagStrip}<span class="item-check">✓</span>{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="overlay-item"
|
||||
class:active={unifiedBarStore.showCalendarToolbar}
|
||||
onclick={() => handleOverlayAction('toggle-toolbar')}
|
||||
>
|
||||
<span class="item-icon">⚙️</span>
|
||||
<span class="item-label">Kalender-Toolbar</span>
|
||||
{#if unifiedBarStore.showCalendarToolbar}<span class="item-check">✓</span>{/if}
|
||||
</button>
|
||||
|
||||
<div class="overlay-sep"></div>
|
||||
|
||||
<button class="overlay-item" onclick={() => handleOverlayAction('collapse-all')}>
|
||||
<span class="item-icon">↓</span>
|
||||
<span class="item-label">Alle einklappen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.unified-bar-container {
|
||||
/* ===== Container ===== */
|
||||
.unified-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
z-index: 80;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.unified-bar-container.transitioning {
|
||||
transition: all var(--animation-duration) ease;
|
||||
.unified-bar.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none !important;
|
||||
transform: translateY(100%);
|
||||
transition:
|
||||
opacity 0.3s ease,
|
||||
transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* ===== Layers ===== */
|
||||
.unified-bar-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: auto;
|
||||
background: color-mix(in srgb, var(--color-surface) 95%, transparent);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
|
||||
transition: all var(--animation-duration) ease;
|
||||
}
|
||||
|
||||
.unified-bar-layer.active {
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
||||
z-index: calc(var(--z-index) + 5) !important;
|
||||
}
|
||||
|
||||
.unified-bar-layer:hover {
|
||||
background: color-mix(in srgb, var(--color-surface) 98%, transparent);
|
||||
}
|
||||
|
||||
.input-layer {
|
||||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.input-bar-wrapper {
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
|
||||
.input-bar-row {
|
||||
/* ===== Position overrides for embedded components ===== */
|
||||
.input-layer :global(.quick-input-bar) {
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
.date-layer :global(.date-strip-wrapper) {
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
/* Remove toolbar-expanded offset since UnifiedBar handles stacking */
|
||||
.date-layer :global(.date-strip-wrapper.toolbar-expanded) {
|
||||
bottom: auto !important;
|
||||
}
|
||||
|
||||
.tag-layer :global(.tag-strip-wrapper) {
|
||||
position: relative !important;
|
||||
bottom: auto !important;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
/* ===== Input layer: FAB width constraints ===== */
|
||||
.input-layer :global(.quick-input-bar.has-fab-right .input-container),
|
||||
.input-layer :global(.quick-input-bar.has-fab-left .input-container) {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.input-layer :global(.quick-input-bar.has-fab-right .input-container) {
|
||||
max-width: calc(100% - 140px);
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.input-layer :global(.quick-input-bar.has-fab-right .input-container) {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.input-layer :global(.quick-input-bar.has-fab-right) {
|
||||
padding-left: 1rem;
|
||||
padding-right: calc(54px + 1rem + 8px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Layers FAB ===== */
|
||||
.input-layer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layers-fab {
|
||||
position: absolute;
|
||||
/* Right of centered InputBar (450px max-width centered) */
|
||||
left: calc(50% + 225px + 8px);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
z-index: 91;
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow: 0 2px 8px hsl(var(--color-foreground) / 0.08);
|
||||
color: hsl(var(--color-foreground));
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Overlay Styles */
|
||||
.unified-bar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.layers-fab:hover {
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
box-shadow: 0 4px 12px hsl(var(--color-foreground) / 0.15);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.layers-fab {
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Toolbar Layer ===== */
|
||||
.toolbar-layer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.toolbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: hsl(var(--color-surface) / 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 9999px;
|
||||
box-shadow:
|
||||
0 4px 6px -1px hsl(var(--color-foreground) / 0.1),
|
||||
0 2px 4px -1px hsl(var(--color-foreground) / 0.06);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background: hsl(var(--color-muted) / 0.5);
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: hsl(var(--color-primary) / 0.15);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.toolbar-sep {
|
||||
width: 1px;
|
||||
height: 24px;
|
||||
background: hsl(var(--color-border));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.toolbar-inner {
|
||||
border-radius: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Overlay ===== */
|
||||
.unified-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.overlay-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
.overlay-sheet {
|
||||
position: relative;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface, #fff);
|
||||
border: 1px solid var(--color-border, #e5e7eb);
|
||||
border-bottom: none;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
padding: var(--spacing-lg);
|
||||
max-width: 100%;
|
||||
width: 500px;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -406,154 +474,94 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border, #e5e7eb);
|
||||
}
|
||||
|
||||
.overlay-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
color: var(--color-foreground, #1f2937);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
.overlay-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-muted-foreground);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: var(--color-muted);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
.overlay-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.action-group h4 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-muted-foreground);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
width: 100%;
|
||||
padding: var(--spacing-md);
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-foreground);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: var(--color-muted);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.action-btn.active {
|
||||
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.action-btn .status {
|
||||
margin-left: auto;
|
||||
font-weight: 600;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
/* Icons (placeholder - replace with actual icon component) */
|
||||
.icon-x::before {
|
||||
content: '×';
|
||||
}
|
||||
.icon-calendar::before {
|
||||
content: '📅';
|
||||
}
|
||||
.icon-tag::before {
|
||||
content: '🏷️';
|
||||
}
|
||||
.icon-toolbox::before {
|
||||
content: '🔧';
|
||||
}
|
||||
.icon-minimize::before {
|
||||
content: '⬇️';
|
||||
}
|
||||
.icon-plus::before {
|
||||
content: '+';
|
||||
}
|
||||
.icon-navigation::before {
|
||||
content: '🧭';
|
||||
}
|
||||
|
||||
/* Placeholder styles */
|
||||
.quick-input-placeholder,
|
||||
.tag-strip-placeholder,
|
||||
.date-strip-placeholder,
|
||||
.toolbar-placeholder {
|
||||
padding: 0.375rem;
|
||||
border-radius: 0.5rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
transition: all 0.15s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-lg);
|
||||
background: var(--color-background);
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.quick-input-placeholder button {
|
||||
margin-left: var(--spacing-sm);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
.overlay-close-btn:hover {
|
||||
background: hsl(var(--color-muted));
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.overlay-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.overlay-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-background, #f9fafb);
|
||||
border: 1px solid var(--color-border, #e5e7eb);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.15s ease;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-foreground, #1f2937);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.overlay-content {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
}
|
||||
.overlay-item:hover {
|
||||
background: hsl(var(--color-muted));
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: var(--spacing-lg);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.overlay-item.active {
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
border-color: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.quick-input-placeholder,
|
||||
.tag-strip-placeholder,
|
||||
.date-strip-placeholder,
|
||||
.toolbar-placeholder {
|
||||
min-height: 50px;
|
||||
font-size: 0.75rem;
|
||||
.item-icon {
|
||||
font-size: 1.125rem;
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.item-check {
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-success, 142 76% 36%));
|
||||
}
|
||||
|
||||
.overlay-sep {
|
||||
height: 1px;
|
||||
background: var(--color-border, #e5e7eb);
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.overlay-sheet {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,7 @@
|
|||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { locale } from 'svelte-i18n';
|
||||
import {
|
||||
PillNavigation,
|
||||
QuickInputBar,
|
||||
InputBarHelpModal,
|
||||
ImmersiveModeToggle,
|
||||
} from '@manacore/shared-ui';
|
||||
import { PillNavigation, InputBarHelpModal, ImmersiveModeToggle } from '@manacore/shared-ui';
|
||||
import {
|
||||
SplitPaneContainer,
|
||||
setSplitPanelContext,
|
||||
|
|
@ -39,7 +34,6 @@
|
|||
} from '@manacore/shared-theme';
|
||||
import type { ThemeVariant } from '@manacore/shared-theme';
|
||||
import { filterHiddenNavItems } from '@manacore/shared-theme';
|
||||
import { isToolbarCollapsed as toolbarCollapsedStore } from '$lib/stores/navigation';
|
||||
import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
|
||||
import { getPillAppItems } from '@manacore/shared-branding';
|
||||
import { setLocale, supportedLocales } from '$lib/i18n';
|
||||
|
|
@ -47,11 +41,7 @@
|
|||
import { searchStore } from '$lib/stores/search.svelte';
|
||||
import { format } from 'date-fns';
|
||||
import { de } from 'date-fns/locale';
|
||||
import CalendarToolbar from '$lib/components/calendar/CalendarToolbar.svelte';
|
||||
import CalendarToolbarContent from '$lib/components/calendar/CalendarToolbarContent.svelte';
|
||||
import DateStrip from '$lib/components/calendar/DateStrip.svelte';
|
||||
import DateStripFab from '$lib/components/calendar/DateStripFab.svelte';
|
||||
import ViewsBar from '$lib/components/calendar/ViewsBar.svelte';
|
||||
import UnifiedBar from '$lib/components/calendar/UnifiedBar.svelte';
|
||||
import SettingsModal from '$lib/components/settings/SettingsModal.svelte';
|
||||
import VoiceRecordButton from '$lib/components/voice/VoiceRecordButton.svelte';
|
||||
import VoiceRecordingModal from '$lib/components/voice/VoiceRecordingModal.svelte';
|
||||
|
|
@ -100,8 +90,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
let isToolbarCollapsed = $state(true); // Default to collapsed - FAB next to InputBar
|
||||
|
||||
// Mobile detection for responsive layout
|
||||
let isMobile = $state(false);
|
||||
|
||||
|
|
@ -345,14 +333,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function handleToolbarCollapsedChange(collapsed: boolean) {
|
||||
isToolbarCollapsed = collapsed;
|
||||
toolbarCollapsedStore?.set(collapsed);
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('calendar-toolbar-collapsed', String(collapsed));
|
||||
}
|
||||
}
|
||||
|
||||
function handleToggleTheme() {
|
||||
theme.toggleMode();
|
||||
}
|
||||
|
|
@ -421,13 +401,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Initialize toolbar collapsed state from localStorage (default is now collapsed)
|
||||
const savedToolbarCollapsed = localStorage.getItem('calendar-toolbar-collapsed');
|
||||
if (savedToolbarCollapsed === 'false') {
|
||||
isToolbarCollapsed = false;
|
||||
toolbarCollapsedStore?.set(false);
|
||||
}
|
||||
|
||||
// Initialize mobile state
|
||||
updateMobileState();
|
||||
});
|
||||
|
|
@ -477,74 +450,34 @@
|
|||
onOpenInPanel={handleOpenInPanel}
|
||||
ariaLabel="Hauptnavigation"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Date strip (only on main calendar page) -->
|
||||
{#if showCalendarToolbar}
|
||||
{#if settingsStore.dateStripCollapsed}
|
||||
<DateStripFab isToolbarExpanded={!isToolbarCollapsed} {isMobile} />
|
||||
{:else}
|
||||
<DateStrip isToolbarExpanded={!isToolbarCollapsed} />
|
||||
<!-- Unified Bar: QuickInputBar + DateStrip + TagStrip + CalendarToolbar -->
|
||||
<UnifiedBar
|
||||
onSearch={handleSearch}
|
||||
onSelect={handleSelect}
|
||||
onSearchChange={handleSearchChange}
|
||||
placeholder="Neuer Termin oder suchen..."
|
||||
emptyText="Keine Termine gefunden"
|
||||
searchingText="Suche..."
|
||||
createText="Erstellen"
|
||||
appIcon="calendar"
|
||||
defaultOptions={calendarOptions}
|
||||
selectedDefaultId={selectedDefaultCalendarId}
|
||||
defaultOptionLabel="Standard-Kalender"
|
||||
onDefaultChange={handleDefaultCalendarChange}
|
||||
onShowShortcuts={handleShowShortcuts}
|
||||
onShowSyntaxHelp={handleShowSyntaxHelp}
|
||||
showCalendarLayers={showCalendarToolbar}
|
||||
{isMobile}
|
||||
hidden={settingsStore.immersiveModeEnabled}
|
||||
>
|
||||
{#snippet leftAction()}
|
||||
{#if voiceRecordingStore.isSupported}
|
||||
<VoiceRecordButton onResult={handleVoiceResult} size={32} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Calendar toolbar (only on main calendar page) -->
|
||||
{#if showCalendarToolbar}
|
||||
<CalendarToolbar
|
||||
isCollapsed={isToolbarCollapsed}
|
||||
{isMobile}
|
||||
bottomOffset="70px"
|
||||
onCollapsedChange={handleToolbarCollapsedChange}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Views Bar (only on main calendar page, hidden in immersive mode) -->
|
||||
{#if showCalendarToolbar && !settingsStore.immersiveModeEnabled}
|
||||
<ViewsBar
|
||||
bottomOffset={isMobile
|
||||
? '70px'
|
||||
: showCalendarToolbar && !isToolbarCollapsed
|
||||
? '140px'
|
||||
: '70px'}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Global Input Bar with Voice Button (hidden via CSS in immersive mode to prevent re-mount focus) -->
|
||||
<div class="input-bar-wrapper" class:hidden={settingsStore.immersiveModeEnabled}>
|
||||
<div class="input-bar-row">
|
||||
<QuickInputBar
|
||||
onSearch={handleSearch}
|
||||
onSelect={handleSelect}
|
||||
onSearchChange={handleSearchChange}
|
||||
placeholder="Neuer Termin oder suchen..."
|
||||
emptyText="Keine Termine gefunden"
|
||||
searchingText="Suche..."
|
||||
createText="Erstellen"
|
||||
appIcon="calendar"
|
||||
bottomOffset={isMobile
|
||||
? showCalendarToolbar
|
||||
? 'calc(70px + 72px)'
|
||||
: '70px'
|
||||
: showCalendarToolbar && !isToolbarCollapsed
|
||||
? '140px'
|
||||
: '70px'}
|
||||
hasFabRight={showCalendarToolbar}
|
||||
hasFabLeft={!isMobile && showCalendarToolbar && settingsStore.dateStripCollapsed}
|
||||
defaultOptions={calendarOptions}
|
||||
selectedDefaultId={selectedDefaultCalendarId}
|
||||
defaultOptionLabel="Standard-Kalender"
|
||||
onDefaultChange={handleDefaultCalendarChange}
|
||||
onShowShortcuts={handleShowShortcuts}
|
||||
onShowSyntaxHelp={handleShowSyntaxHelp}
|
||||
>
|
||||
{#snippet leftAction()}
|
||||
{#if voiceRecordingStore.isSupported}
|
||||
<VoiceRecordButton onResult={handleVoiceResult} size={32} />
|
||||
{/if}
|
||||
{/snippet}
|
||||
</QuickInputBar>
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</UnifiedBar>
|
||||
|
||||
<!-- Voice Recording Modal -->
|
||||
<VoiceRecordingModal onResult={handleVoiceResult} />
|
||||
|
|
@ -612,11 +545,9 @@
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Extra padding when DateStrip is at bottom (toolbar is now a FAB) */
|
||||
/* Extra padding for UnifiedBar layers (PillNav + InputBar + DateStrip) */
|
||||
.main-content.has-toolbar {
|
||||
padding-bottom: calc(
|
||||
220px + env(safe-area-inset-bottom)
|
||||
); /* DateStrip + PillNav + QuickInputBar */
|
||||
padding-bottom: calc(220px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -716,46 +647,4 @@
|
|||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
/* Adjust InputBar when FABs are visible (toolbar FAB on right, DateStripFab on left) */
|
||||
/* For a centered InputBar with max-width 450px, left edge is at 50% - 225px */
|
||||
/* DateStripFab is positioned at: 50% - 225px - 8px gap - 54px fab width */
|
||||
:global(.quick-input-bar.has-fab-right .input-container),
|
||||
:global(.quick-input-bar.has-fab-left .input-container) {
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
/* On smaller screens (<900px), FABs move to fixed positions (left: 1rem, right: 1rem) */
|
||||
@media (max-width: 900px) {
|
||||
:global(.quick-input-bar.has-fab-right .input-container) {
|
||||
max-width: calc(100% - 140px); /* 54px FAB + padding */
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
:global(.quick-input-bar.has-fab-left .input-container) {
|
||||
max-width: calc(100% - 140px); /* 54px FAB + padding */
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
:global(.quick-input-bar.has-fab-right.has-fab-left .input-container) {
|
||||
max-width: calc(100% - 200px); /* Both FABs */
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: InputBar in its own row (above PillNav), Settings FAB stays next to InputBar */
|
||||
@media (max-width: 640px) {
|
||||
/* InputBar takes all available space up to the FAB */
|
||||
:global(.quick-input-bar.has-fab-right .input-container) {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:global(.quick-input-bar.has-fab-right) {
|
||||
padding-left: 1rem;
|
||||
padding-right: calc(54px + 1rem + 8px); /* FAB width + margin + gap */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,21 @@
|
|||
<script lang="ts">
|
||||
import UnifiedBar from '$lib/components/calendar/UnifiedBar.svelte';
|
||||
import UnifiedBarControls from '$lib/components/calendar/UnifiedBarControls.svelte';
|
||||
import { unifiedBarStore } from '$lib/stores/unified-bar.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import type { QuickInputItem } from '@manacore/shared-ui';
|
||||
|
||||
// Demo handlers
|
||||
function handleSearch(query: string) {
|
||||
async function handleSearch(query: string): Promise<QuickInputItem[]> {
|
||||
console.log('Search:', query);
|
||||
return [{ id: '1', title: `Ergebnis für "${query}"`, subtitle: 'Demo-Termin' }];
|
||||
}
|
||||
|
||||
function handleSelect(result: any) {
|
||||
console.log('Select:', result);
|
||||
function handleSelect(item: QuickInputItem) {
|
||||
console.log('Select:', item);
|
||||
}
|
||||
|
||||
function handleSearchChange(query: string) {
|
||||
console.log('Search change:', query);
|
||||
}
|
||||
|
||||
function handleCreate(data: any) {
|
||||
console.log('Create:', data);
|
||||
}
|
||||
|
||||
function handleDateSelect(date: Date) {
|
||||
console.log('Date select:', date);
|
||||
}
|
||||
|
||||
function handleOverlayToggle(event: CustomEvent) {
|
||||
console.log('Overlay toggle:', event.detail);
|
||||
}
|
||||
|
||||
function handleOverlayAction(event: CustomEvent) {
|
||||
console.log('Overlay action:', event.detail);
|
||||
}
|
||||
|
||||
function handleModeChange(mode: string) {
|
||||
console.log('Mode change:', mode);
|
||||
}
|
||||
|
||||
function handleLayerChange(layer: string) {
|
||||
console.log('Layer change:', layer);
|
||||
}
|
||||
|
||||
function handleQuickAction(event: CustomEvent) {
|
||||
console.log('Quick action:', event.detail);
|
||||
}
|
||||
|
||||
function handleToolbarCollapsedChange(collapsed: boolean) {
|
||||
console.log('Toolbar collapsed:', collapsed);
|
||||
function handleSearchChange(query: string, results: QuickInputItem[]) {
|
||||
console.log('Search change:', query, results);
|
||||
}
|
||||
|
||||
// Initialize store on mount
|
||||
|
|
@ -62,15 +31,9 @@
|
|||
<main class="demo-container">
|
||||
<header class="demo-header">
|
||||
<h1>UnifiedBar Demo</h1>
|
||||
<p>Demonstration der neuen unified bottom bar Architektur</p>
|
||||
<p>Demonstration der unified bottom bar Architektur</p>
|
||||
</header>
|
||||
|
||||
<!-- Controls for testing -->
|
||||
<section class="controls-section">
|
||||
<h2>UnifiedBar Controls</h2>
|
||||
<UnifiedBarControls onModeChange={handleModeChange} onLayerChange={handleLayerChange} />
|
||||
</section>
|
||||
|
||||
<!-- Main content area -->
|
||||
<section class="content-section">
|
||||
<div class="content-placeholder">
|
||||
|
|
@ -78,23 +41,13 @@
|
|||
<p>Dies ist der Hauptinhaltbereich, in dem die Kalender-Ansichten angezeigt werden.</p>
|
||||
|
||||
<div class="info-cards">
|
||||
<div class="info-card">
|
||||
<h3>Aktueller Modus</h3>
|
||||
<p><strong>{unifiedBarStore.mode}</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>Aktiver Layer</h3>
|
||||
<p><strong>{unifiedBarStore.activeLayer}</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<h3>Sichtbare Layers</h3>
|
||||
<ul>
|
||||
{#if unifiedBarStore.showQuickInput}<li>✓ QuickInput</li>{/if}
|
||||
{#if unifiedBarStore.showDateStrip}<li>✓ DateStrip</li>{/if}
|
||||
{#if unifiedBarStore.showTagStrip}<li>✓ TagStrip</li>{/if}
|
||||
{#if unifiedBarStore.showCalendarToolbar}<li>✓ CalendarToolbar</li>{/if}
|
||||
{#if unifiedBarStore.showQuickInput}<li>QuickInput</li>{/if}
|
||||
{#if unifiedBarStore.showDateStrip}<li>DateStrip</li>{/if}
|
||||
{#if unifiedBarStore.showTagStrip}<li>TagStrip</li>{/if}
|
||||
{#if unifiedBarStore.showCalendarToolbar}<li>CalendarToolbar</li>{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
|
@ -105,10 +58,14 @@
|
|||
</div>
|
||||
|
||||
<div class="demo-actions">
|
||||
<button onmousedown={() => unifiedBarStore.setMode('collapsed')}> Zusammengklappt </button>
|
||||
<button onmousedown={() => unifiedBarStore.setMode('expanded')}> Erweitert </button>
|
||||
<button onmousedown={() => unifiedBarStore.toggleOverlay()}> Overlay Toggle </button>
|
||||
<button onmousedown={() => unifiedBarStore.expandToLayer('date')}> zum Datum-Layer </button>
|
||||
<button onmousedown={() => unifiedBarStore.expandToLayer('date')}>
|
||||
DateStrip zeigen
|
||||
</button>
|
||||
<button onmousedown={() => unifiedBarStore.expandToLayer('tag')}> TagStrip zeigen </button>
|
||||
<button onmousedown={() => unifiedBarStore.expandToLayer('toolbar')}>
|
||||
Toolbar zeigen
|
||||
</button>
|
||||
<button onmousedown={() => unifiedBarStore.collapseAll()}> Alle einklappen </button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -119,67 +76,45 @@
|
|||
onSearch={handleSearch}
|
||||
onSelect={handleSelect}
|
||||
onSearchChange={handleSearchChange}
|
||||
onCreate={handleCreate}
|
||||
onDateSelect={handleDateSelect}
|
||||
onToolbarCollapsedChange={handleToolbarCollapsedChange}
|
||||
placeholder="Neuer Termin oder suchen..."
|
||||
emptyText="Keine Termine gefunden"
|
||||
searchingText="Suche..."
|
||||
createText="Erstellen"
|
||||
appIcon="calendar"
|
||||
isMobile={false}
|
||||
showCalendarToolbar={true}
|
||||
showCalendarLayers={true}
|
||||
/>
|
||||
|
||||
<!-- Footer with info -->
|
||||
<footer class="demo-footer">
|
||||
<p>UnifiedBar Demo - Calendar App</p>
|
||||
<p>Scrollen Sie, um zu sehen wie die Bars fixiert bleiben</p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.demo-container {
|
||||
min-height: 100vh;
|
||||
padding-bottom: 400px; /* Space for UnifiedBar */
|
||||
padding-bottom: 300px;
|
||||
background: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border, #e5e7eb);
|
||||
background: var(--color-surface, #fff);
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
margin: 0;
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.controls-section {
|
||||
padding: var(--spacing-lg);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: color-mix(in srgb, var(--color-surface) 50%, transparent);
|
||||
}
|
||||
|
||||
.controls-section h2 {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.content-section {
|
||||
padding: var(--spacing-lg);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.content-placeholder {
|
||||
|
|
@ -188,53 +123,39 @@
|
|||
}
|
||||
|
||||
.content-placeholder h2 {
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-placeholder p {
|
||||
margin: 0 0 var(--spacing-xl) 0;
|
||||
color: var(--color-muted-foreground);
|
||||
line-height: 1.6;
|
||||
margin: 0 0 2rem 0;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.info-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
background: var(--color-surface, #fff);
|
||||
border: 1px solid var(--color-border, #e5e7eb);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-muted-foreground);
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -242,82 +163,29 @@
|
|||
}
|
||||
|
||||
.info-card li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--color-success);
|
||||
padding: 0.25rem 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.demo-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-xl);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-actions button {
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-primary-foreground);
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 100%));
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all var(--transition-base);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.demo-actions button:hover {
|
||||
filter: brightness(0.9);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.demo-footer {
|
||||
position: fixed;
|
||||
bottom: 350px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
background: color-mix(in srgb, var(--color-surface) 80%, transparent);
|
||||
border-top: 1px solid var(--color-border);
|
||||
color: var(--color-muted-foreground);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.demo-footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.demo-container {
|
||||
padding-bottom: 500px;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
padding: var(--spacing-lg) var(--spacing-md);
|
||||
}
|
||||
|
||||
.demo-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.controls-section,
|
||||
.content-section {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.demo-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.demo-footer {
|
||||
bottom: 450px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue