Cordy/Cairn

Fork 0

Details pane visual polish pass (OpenCloud side-by-side) #621

New issue

Closed

opened 2026-09-18 17:23:22 +00:00 by Cordy · 2 comments

Cordy commented

2026-09-18 17:23:22 +00:00

Owner

Method: side-by-side against the OpenCloud demo pane (demo.opencloud.eu, same file selected), whole-page mockup first per house rules, then one styling one-shot. We diverge where we have more (Activity/Tags gates, peering) but the visual rhythm should match theirs.

Observed roughness on the dogfood (2026-09-18 screenshot, files-bao):

Thumbnail placeholder is a large flat grey block dominating the pane; OpenCloud uses a tighter preview area with more breathing room.
kv grid: label/value contrast and vertical rhythm are flat; truncated values ("DOCX doc...", "2026-09-...", "/home/Ne...") truncate too eagerly for the available width.
TAGS heading style (uppercase, tracking) doesn't match the rest of the pane's typography; the Add-tag pill floats without visual anchor when there are no chips.
Shares/Activity drill rows read as plain bordered rows; OpenCloud gives them clearer affordance (icon + chevron alignment, hover state).
Overall spacing: sections run together; needs consistent section gaps and a hierarchy pass.

Not before #541 lands (Versions row changes the drill list one more time).

Fourth slice of #530, deliberately LAST: the pane's functionality landed piecewise (#538 shell, #615 preview merge, #539 Activity, #540 Tags, #541 Versions to come) and Nikola's verdict on the v0.6.222 dogfood is "works, doesn't look good yet" — polish once, after #541, instead of re-styling after every slice. Method: side-by-side against the OpenCloud demo pane (demo.opencloud.eu, same file selected), whole-page mockup first per house rules, then one styling one-shot. We diverge where we have more (Activity/Tags gates, peering) but the visual rhythm should match theirs. Observed roughness on the dogfood (2026-09-18 screenshot, files-bao): - Thumbnail placeholder is a large flat grey block dominating the pane; OpenCloud uses a tighter preview area with more breathing room. - kv grid: label/value contrast and vertical rhythm are flat; truncated values ("DOCX doc...", "2026-09-...", "/home/Ne...") truncate too eagerly for the available width. - TAGS heading style (uppercase, tracking) doesn't match the rest of the pane's typography; the Add-tag pill floats without visual anchor when there are no chips. - Shares/Activity drill rows read as plain bordered rows; OpenCloud gives them clearer affordance (icon + chevron alignment, hover state). - Overall spacing: sections run together; needs consistent section gaps and a hierarchy pass. Not before #541 lands (Versions row changes the drill list one more time).

Cordy added this to the v0.7 — Closed beta (dogfood + hardening) milestone

2026-09-18 17:24:35 +00:00

Cordy commented

2026-09-18 18:39:04 +00:00

Author

Owner

Rev-1 mockup handed to Nikola (pane-polish-621-mockup.html in the design folder). Whole page + three pane states, real tokens only (all four themes follow). Changes proposed, numbered against the issue list:

Preview block shrinks to 88px with a lighter fill and glacier-tinted icon (140px cover thumb for images); click-to-preview stays.
File identity (icon + name) moves into the pane header, so the body opens with information instead of the grey slab.
kv grid: 84px label column, muted 12px labels, 13px medium values that wrap instead of truncating; the path becomes a quiet 12px line.
Tags joins the kv rhythm (same label column, bordered pill chips, dashed "+ Add tag" ghost pill) — no more uppercase tracking header.
Drill rows: 44px with leading icons (share/history/pulse), right-aligned context (Shared·Link bits, version count), hover state.
Uniform 16px section gaps, one hairline before the drill section.

One open question flagged on the mockup: the Versions "3" count in the drill row needs a lazy per-pane-open request — approve with or without counts. Build follows on approval.

Rev-1 mockup handed to Nikola (`pane-polish-621-mockup.html` in the design folder). Whole page + three pane states, real tokens only (all four themes follow). Changes proposed, numbered against the issue list: 1. Preview block shrinks to 88px with a lighter fill and glacier-tinted icon (140px cover thumb for images); click-to-preview stays. 2. File identity (icon + name) moves into the pane header, so the body opens with information instead of the grey slab. 3. kv grid: 84px label column, muted 12px labels, 13px medium values that wrap instead of truncating; the path becomes a quiet 12px line. 4. Tags joins the kv rhythm (same label column, bordered pill chips, dashed "+ Add tag" ghost pill) — no more uppercase tracking header. 5. Drill rows: 44px with leading icons (share/history/pulse), right-aligned context (Shared·Link bits, version count), hover state. 6. Uniform 16px section gaps, one hairline before the drill section. One open question flagged on the mockup: the Versions "3" count in the drill row needs a lazy per-pane-open request — approve with or without counts. Build follows on approval.

forgejo-actions referenced this issue from a commit

2026-09-18 18:48:31 +00:00

#621: details pane visual polish per approved mockup

forgejo-actions referenced this issue from a commit

2026-09-18 18:49:59 +00:00

changelog: v0.6.224 (#621)

Cordy referenced this issue

2026-09-18 18:50:48 +00:00

#621: details pane visual polish #623

Cordy referenced this issue from a commit

2026-09-18 18:54:09 +00:00

Merge pull request '#621: details pane visual polish' (#623) from fix-621 into main

Cordy commented

2026-09-18 19:01:00 +00:00

Author

Owner

Shipped in v0.6.224 (PR #623, tag on 5fa0ef1), live on both dogfoods. Built exactly to the approved rev-1 mockup, drill-row counts included per the second approval:

File icon in the pane header; 88px preview card (140px cover for images), glacier-tinted 34px icon.
kv: 84px labels, wrapping values, quiet path line.
Tags in the kv rhythm: bordered chips + dashed "+ Add tag" ghost pill.
Drill rows: 44px, share/history/pulse icons, hover, share bits + lazy version count (one request per pane open, files only).
16px section gaps, hairline before the drill card; Versions/Activity panel rows stacked two-line.

Styling-only splice (plus the approved count fetch); no Go, no pure-block changes; all themes follow via tokens. Closing — reopen with a screenshot if anything reads off against the mockup on the live pane.

Shipped in **v0.6.224** (PR #623, tag on 5fa0ef1), live on both dogfoods. Built exactly to the approved rev-1 mockup, drill-row counts included per the second approval: - File icon in the pane header; 88px preview card (140px cover for images), glacier-tinted 34px icon. - kv: 84px labels, wrapping values, quiet path line. - Tags in the kv rhythm: bordered chips + dashed "+ Add tag" ghost pill. - Drill rows: 44px, share/history/pulse icons, hover, share bits + lazy version count (one request per pane open, files only). - 16px section gaps, hairline before the drill card; Versions/Activity panel rows stacked two-line. Styling-only splice (plus the approved count fetch); no Go, no pure-block changes; all themes follow via tokens. Closing — reopen with a screenshot if anything reads off against the mockup on the live pane.

Cordy closed this issue

2026-09-18 19:01:05 +00:00

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: Cordy/Cairn#621

No description provided.

Rows
Columns