mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-18 21:01:23 +02:00
fix(visibility): promote picker to labeled rows across remaining modules
Pattern established in fix(calendar, 8c43c119e) — the picker reads as
a first-class property when it sits in its own row with a 'Sichtbarkeit'
label instead of being tucked behind a compact icon. Applying the same
treatment everywhere the picker was still using the compact variant.
Changes:
- library/views/DetailView: move the picker out of the meta-top-row
(kind-pill + picker cluster) and into the existing <dl class="details">
block as a first dt/dd pair. Keeps the kind-pill standalone and gives
visibility equal weight to the other structured details. Removes the
now-orphaned .meta-top-row CSS rule
- wardrobe/views/DetailOutfitView: remove the compact picker from the
header action cluster (it was competing with favourite/edit buttons);
replace with a 'Sichtbarkeit' label + full picker in its own flex row
directly below the header, above description
- calendar/components/EventDetailModal: remove the compact picker from
the modal-actions row (copy/edit/delete chevron area). Add a new
detail-row at the top of event-details with a 'Sichtbarkeit' label
(new .detail-label CSS rule, mirrors .detail-icon layout for visual
consistency with Time/Location/etc rows)
Picture board detail stays as-is: the picker already renders with its
label visible (non-compact) in the header flex, and the Board-Detail
page has no prop-row-style content list to slot it into — inline in
the header is the right spot there.
Verified:
- pnpm check (web): 7520 files, 0 errors, 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
f2275f752d
commit
90915b7879
3 changed files with 31 additions and 18 deletions
|
|
@ -211,7 +211,6 @@
|
|||
</div>
|
||||
<div class="modal-actions">
|
||||
{#if !isEditing}
|
||||
<VisibilityPicker level={event.visibility} onChange={handleVisibilityChange} compact />
|
||||
<button class="btn btn-ghost" onclick={copyToClipboard} title="Kopieren">
|
||||
{#if copied}<Check size={16} />{:else}<Copy size={16} />{/if}
|
||||
</button>
|
||||
|
|
@ -243,6 +242,14 @@
|
|||
/>
|
||||
{:else}
|
||||
<div class="event-details">
|
||||
<!-- Visibility -->
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">Sichtbarkeit</span>
|
||||
<div class="detail-content">
|
||||
<VisibilityPicker level={event.visibility} onChange={handleVisibilityChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time -->
|
||||
<div class="detail-row">
|
||||
<span class="detail-icon"><Clock size={18} /></span>
|
||||
|
|
@ -496,6 +503,14 @@
|
|||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
min-width: 5rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -80,12 +80,9 @@
|
|||
</div>
|
||||
|
||||
<div class="meta-col">
|
||||
<div class="meta-top-row">
|
||||
<div class="kind-pill">
|
||||
{KIND_LABELS[entry.kind].emoji}
|
||||
{KIND_LABELS[entry.kind].de}
|
||||
</div>
|
||||
<VisibilityPicker level={entry.visibility} onChange={onVisibilityChange} />
|
||||
<div class="kind-pill">
|
||||
{KIND_LABELS[entry.kind].emoji}
|
||||
{KIND_LABELS[entry.kind].de}
|
||||
</div>
|
||||
<h1>{entry.title}</h1>
|
||||
{#if entry.originalTitle && entry.originalTitle !== entry.title}
|
||||
|
|
@ -141,6 +138,10 @@
|
|||
{/if}
|
||||
|
||||
<dl class="details">
|
||||
<dt>Sichtbarkeit</dt>
|
||||
<dd>
|
||||
<VisibilityPicker level={entry.visibility} onChange={onVisibilityChange} />
|
||||
</dd>
|
||||
{#if entry.details.kind === 'book'}
|
||||
{#if entry.details.pages}
|
||||
<dt>Seiten</dt>
|
||||
|
|
@ -279,12 +280,6 @@
|
|||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.meta-top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.kind-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -179,11 +179,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<VisibilityPicker
|
||||
level={outfit.visibility ?? 'private'}
|
||||
onChange={handleVisibilityChange}
|
||||
compact
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleToggleFavorite}
|
||||
|
|
@ -206,6 +201,14 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span class="text-xs text-muted-foreground">Sichtbarkeit</span>
|
||||
<VisibilityPicker
|
||||
level={outfit.visibility ?? 'private'}
|
||||
onChange={handleVisibilityChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if outfit.description}
|
||||
<p class="whitespace-pre-wrap text-sm text-foreground">{outfit.description}</p>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue