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

fix(calendar): promote visibility picker to a labeled prop-row

Browse source 
User feedback: the picker tucked behind the compact icon in the title
row was easy to miss. The other prop-rows carry an icon + field so a
full row reads as "this is an editable property".

Moves the picker into its own prop-row with a "Sichtbarkeit" label,
matching the pattern todo + places already use. Uses the non-compact
variant so the current level (lock / users / link / globe + word) is
readable at a glance.

prop-row--labeled modifier carries the label-text style (muted, fixed
5rem min-width so the picker aligns with the other rows).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-24 15:52:59 +02:00
parent 98a68afc74
commit 8c43c119ea
1 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

38
apps/mana/apps/web/src/lib/modules/calendar/views/DetailView.svelte
View file

@ -118,22 +118,20 @@
onConfirmDelete={deleteEvent}
>
{#snippet body(event)}
<div class="title-row">
<input
class="title-input"
bind:value={editTitle}
onfocus={detail.focus}
onblur={saveField}
placeholder="Titel..."
/>
<VisibilityPicker
level={event.visibility ?? 'private'}
onChange={handleVisibilityChange}
compact
/>
</div>
<input
class="title-input"
bind:value={editTitle}
onfocus={detail.focus}
onblur={saveField}
placeholder="Titel..."
/>
<div class="properties">
<div class="prop-row prop-row--labeled">
<span class="prop-label">Sichtbarkeit</span>
<VisibilityPicker level={event.visibility ?? 'private'} onChange={handleVisibilityChange} />
</div>
<div class="prop-row">
<span class="prop-icon"><Clock size={14} /></span>
<div class="time-fields">
@ -234,14 +232,16 @@
</DetailViewShell>
<style>
.title-row {
.prop-row--labeled {
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
}
.title-row :global(.title-input) {
flex: 1 1 auto;
min-width: 0;
.prop-row--labeled .prop-label {
font-size: 0.8125rem;
color: hsl(var(--color-muted-foreground));
min-width: 5rem;
flex-shrink: 0;
}
.prop-icon {
display: flex;