ux updates
This commit is contained in:
parent
46047ca543
commit
6818c469f6
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
interface Props {
|
||||
context: AgendaContext;
|
||||
mode: 'prep' | 'meeting';
|
||||
onmodechange: (mode: 'prep' | 'meeting') => void;
|
||||
mode?: 'prep' | 'meeting';
|
||||
onmodechange?: (mode: 'prep' | 'meeting') => void;
|
||||
}
|
||||
let { context, mode, onmodechange }: Props = $props();
|
||||
|
||||
const showModeSwitch = $derived(context.type === 'meeting' && context.id !== 'daily-log');
|
||||
const showModeSwitch = $derived(!!onmodechange && context.type === 'meeting' && context.id !== 'daily-log');
|
||||
const canRename = $derived(context.id !== 'daily-log');
|
||||
let editing = $state(false);
|
||||
let nameInput = $state('');
|
||||
|
|
@ -71,13 +71,13 @@
|
|||
<div class="flex gap-1 rounded-full bg-[#333] p-1">
|
||||
<button
|
||||
class="rounded-full border-none px-4 py-2 font-bold transition-all {mode === 'prep' ? 'bg-accent text-white shadow-md' : 'bg-transparent text-[#aaa] cursor-pointer'}"
|
||||
onclick={() => onmodechange('prep')}
|
||||
onclick={() => onmodechange?.('prep')}
|
||||
>
|
||||
Vorbereitung
|
||||
</button>
|
||||
<button
|
||||
class="rounded-full border-none px-4 py-2 font-bold transition-all {mode === 'meeting' ? 'bg-warning text-[#222] shadow-md' : 'bg-transparent text-[#aaa] cursor-pointer'}"
|
||||
onclick={() => onmodechange('meeting')}
|
||||
onclick={() => onmodechange?.('meeting')}
|
||||
>
|
||||
Meeting
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,10 @@
|
|||
let { contextId }: Props = $props();
|
||||
|
||||
const context = liveQuery(() => db.contexts.get(contextId));
|
||||
const isDailyLog = $derived(contextId === 'daily-log');
|
||||
|
||||
let mode = $state<'prep' | 'meeting'>(contextId === 'daily-log' ? 'meeting' : 'prep');
|
||||
let activeView = $state('agenda');
|
||||
let activeView = $state('journal');
|
||||
let compact = $state(false);
|
||||
|
||||
// Rating modal state
|
||||
|
|
@ -30,7 +31,7 @@
|
|||
// Default view based on context type
|
||||
$effect(() => {
|
||||
if ($context) {
|
||||
if (contextId === 'daily-log') {
|
||||
if (isDailyLog) {
|
||||
activeView = 'journal';
|
||||
} else if ($context.type === 'meeting') {
|
||||
activeView = 'agenda';
|
||||
|
|
@ -81,8 +82,13 @@
|
|||
|
||||
<div bind:this={containerEl}>
|
||||
{#if $context}
|
||||
<ContextHeader context={$context} {mode} onmodechange={handleModeChange} />
|
||||
<ViewTabs context={$context} {activeView} {compact} onviewchange={handleViewChange} ontogglecompact={toggleCompact} />
|
||||
{#if isDailyLog}
|
||||
<ContextHeader context={$context} />
|
||||
<ViewTabs context={$context} {activeView} onviewchange={handleViewChange} />
|
||||
{:else}
|
||||
<ContextHeader context={$context} {mode} onmodechange={handleModeChange} />
|
||||
<ViewTabs context={$context} {activeView} {compact} onviewchange={handleViewChange} ontogglecompact={toggleCompact} />
|
||||
{/if}
|
||||
|
||||
{#if activeView === 'agenda'}
|
||||
<AgendaView {contextId} {mode} />
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@
|
|||
class="self-start rounded bg-accent px-4 py-2 font-bold text-white hover:brightness-110"
|
||||
onclick={handleAddEntry}
|
||||
>
|
||||
+ Eintrag hinzufügen
|
||||
+ {selectedLinkedContextId ? 'Thema hinzufügen' : 'Notiz hinzufügen'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<script lang="ts">
|
||||
import type { AgendaContext, PersonMeta } from '@ka-note/shared';
|
||||
import { settings } from '$lib/stores/settings';
|
||||
|
||||
interface Props {
|
||||
context: AgendaContext;
|
||||
activeView: string;
|
||||
compact: boolean;
|
||||
compact?: boolean;
|
||||
onviewchange: (view: string) => void;
|
||||
ontogglecompact: () => void;
|
||||
ontogglecompact?: () => void;
|
||||
}
|
||||
let { context, activeView, compact, onviewchange, ontogglecompact }: Props = $props();
|
||||
|
||||
|
|
@ -21,16 +20,13 @@
|
|||
const isCompany = $derived(context.type === 'company');
|
||||
const isEmployee = $derived(isPerson && ((context.meta as PersonMeta | null)?.personSubType ?? 'contact') === 'employee');
|
||||
|
||||
const showAgenda = $derived(!isDailyLog || $settings.showAgendaTab);
|
||||
const showSnoozed = $derived(!isDailyLog || $settings.showSnoozedTab);
|
||||
|
||||
const tabs = $derived<Tab[]>(
|
||||
isMeeting
|
||||
? [
|
||||
...(showAgenda ? [{ id: 'agenda', label: 'Agenda / Eingabe' }] : []),
|
||||
...(isDailyLog ? [] : [{ id: 'agenda', label: 'Agenda / Eingabe' }]),
|
||||
{ id: 'journal', label: 'Journal / Historie' },
|
||||
{ id: 'persons', label: 'Personen (All)' },
|
||||
...(showSnoozed ? [{ id: 'snoozed', label: 'Verschoben' }] : [])
|
||||
...(isDailyLog ? [] : [{ id: 'snoozed', label: 'Verschoben' }])
|
||||
]
|
||||
: [
|
||||
{ id: 'dashboard', label: `Dashboard: ${context.name.replace(/^(Project |Person |Firma )/, '')}` },
|
||||
|
|
@ -50,7 +46,7 @@
|
|||
</button>
|
||||
{/each}
|
||||
|
||||
{#if isMeeting && activeView === 'agenda'}
|
||||
{#if isMeeting && activeView === 'agenda' && ontogglecompact}
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
class="rounded border border-[#555] bg-transparent px-2.5 py-1 text-sm text-[#ccc] hover:bg-[#333]"
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import { writable } from 'svelte/store';
|
||||
|
||||
export interface AppSettings {
|
||||
showAgendaTab: boolean;
|
||||
showSnoozedTab: boolean;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'ka-note-settings';
|
||||
|
||||
const defaults: AppSettings = {
|
||||
showAgendaTab: false,
|
||||
showSnoozedTab: true
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,3 @@
|
|||
<script lang="ts">
|
||||
import { settings } from '$lib/stores/settings';
|
||||
</script>
|
||||
|
||||
<h1 class="mb-6 text-2xl font-bold text-accent">Einstellungen</h1>
|
||||
|
||||
<div class="rounded-lg border border-border bg-sidebar p-5">
|
||||
<h2 class="mb-4 text-lg font-bold text-white">Daily Log Tabs</h2>
|
||||
|
||||
<label class="mb-3 flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 accent-accent"
|
||||
checked={$settings.showAgendaTab}
|
||||
onchange={(e) => settings.patch({ showAgendaTab: e.currentTarget.checked })}
|
||||
/>
|
||||
<span class="text-[#ccc]">Agenda-Tab anzeigen</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="h-4 w-4 accent-accent"
|
||||
checked={$settings.showSnoozedTab}
|
||||
onchange={(e) => settings.patch({ showSnoozedTab: e.currentTarget.checked })}
|
||||
/>
|
||||
<span class="text-[#ccc]">Verschoben-Tab anzeigen</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-muted">Keine Einstellungen vorhanden.</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue