cjw/Oxicloud
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

refactor(search): adapt UI to use ResourceList

Browse Source
This commit is contained in:
Edouard Vanbelle
2026-07-26 16:38:49 +02:00
parent c22741bc7f
commit c946cf4333
11 changed files with 739 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/styles/ported/resourceList.css
+108 -28
View File
@@ -197,13 +197,33 @@
.list-header-checkbox input[type="checkbox"],
.file-item .checkbox-cell input[type="checkbox"] {
width: 17px;
height: 17px;
/* Bumped from 17px to 20px so the row-selection checkbox reads at
a similar visual weight to the 28x28 action buttons that sit at
the other end of the row (Ed's 2026-07-26 UX note). 20px is the
upper end of the browser-native checkbox range — beyond that
platforms start rendering an oversized-and-blurry glyph. */
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--color-accent);
border-radius: var(--radius-sm);
}
/* Orange outline on hover for the row-selection checkbox (Ed's UX ask
2026-07-26). `outline` (not `border`) because native checkboxes in
list view honor `accent-color` but their border rendering is
platform-inconsistent — `outline` is drawn OUTSIDE the box and
doesn't reflow the layout. Grid view uses a custom-drawn checkbox
(see `.files-grid-view … input[type="checkbox"]` below) which
accepts real border styling; its hover override lives with that
block and beats this via specificity. Matches the "everything
hovers to accent" convention shared with row-action buttons. */
.list-header-checkbox input[type="checkbox"]:hover,
.file-item .checkbox-cell input[type="checkbox"]:hover {
outline: 2px solid var(--color-accent);
outline-offset: 1px;
}
.list-header.selection-mode {
grid-template-columns: 36px 1fr;
background-color: var(--color-multiselect-bg);
@@ -496,7 +516,26 @@
.files-list-view .file-item .action-cell button:not(.btn-action):hover {
background: var(--color-border-subtle);
color: var(--color-text-dark);
/* Accent-orange hover — matches the grid view's `.file-actions:hover`
and the shared `.btn-action:hover` rule. Semantic overrides on
`.favorite-star:hover` / `.shared-button:hover` (gold / blue) take
precedence via more-specific selectors below. */
color: var(--color-accent);
}
/* List-view resting/active state colors for favorite (gold) and shared
(blue). Hover is intentionally NOT overridden here — the generic
`.action-cell button:not(.btn-action):hover → --color-accent` rule
above owns the orange hover for every button (kebab / favorite /
shared) per Ed's 2026-07-26 spec. This block only paints the
at-rest state on `.active` rows so the star / shared chip stays
discoverable on a quiet row. */
.files-list-view .file-item .action-cell button.favorite-star.active {
color: var(--color-star-text-hover);
}
.files-list-view .file-item .action-cell button.shared-button.active {
color: var(--color-badge-blue-text);
}
/* Fav-star + shared-button share the same visibility rule: hidden on
@@ -668,8 +707,11 @@
position: absolute;
top: calc(var(--space-3) + 8px);
left: calc(var(--space-3) + 8px);
width: 26px;
height: 26px;
/* 30x30 matches the action-cell chip pills (`.file-actions`, star,
shared, `.btn-action`) so the checkbox and the corner-cluster
buttons read as siblings of one visual size (Ed 2026-07-26). */
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: var(--color-scrim-control);
backdrop-filter: blur(6px);
@@ -699,8 +741,10 @@
.files-grid-view .file-item .checkbox-cell input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
/* Custom-drawn glyph sized proportionally to the 30x30 chip pill —
bumped from 18x18 to match the list-view checkbox's 20x20. */
width: 20px;
height: 20px;
margin: 0;
border: 2px solid var(--color-border-medium);
border-radius: var(--radius-sm);
@@ -713,6 +757,17 @@
border-color var(--motion-fast) var(--ease-standard);
}
/* Grid view uses a custom-drawn checkbox (`appearance: none`) so we can
swap the real border color on hover — cleaner than the list-view
`outline` trick, and no double-ring on this variant. Specificity
(0,4,1 + 0,0,1) beats the shared `input[type="checkbox"]:hover`
outline rule above so the grid-view chip doesn't get both a border
AND an outline. */
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]:hover {
border-color: var(--color-accent);
outline: none;
}
.files-grid-view .file-item .checkbox-cell input[type="checkbox"]::after {
content: "";
width: 5px;
@@ -783,9 +838,11 @@
markup still has shared, favorite, itemActions, kebab in that
sequence so list-view's inline right-aligned flow is unchanged. */
.files-grid-view .file-item .action-cell:has(.shared-button, .favorite-star) {
/* Start right after the checkbox column (26px chip + inline gap)
so the left group aligns visually with the checkbox row. */
left: calc(var(--space-3) + 8px + 26px + var(--space-2));
/* Start right after the checkbox column (30px chip + inline gap)
so the left group aligns visually with the checkbox row. Kept in
sync with `.checkbox-cell` width above — the two share this
constant. */
left: calc(var(--space-3) + 8px + 30px + var(--space-2));
right: calc(var(--space-3) + 8px);
display: flex;
align-items: center;
@@ -875,7 +932,23 @@
opacity: 1;
}
.files-grid-view .file-item .action-cell .file-actions:hover {
/* Unified row-action hover: every button in the grid-view corner cluster
(kebab, star, shared, btn-action*) turns accent-orange on hover.
Semantic states are conveyed by the `.active` class, not by hover
color, so favorite = gold when starred, shared = blue when shared,
both regardless of pointer position (see `.active` rules below).
Ed's 2026-07-26 UX call: "orange for mouse over on all buttons;
blue only for active shared."
Selector specificity (0,4,1 + 0,0,1 = high) beats the chip-visual
base rule at ~line 852 (`.files-grid-view .file-item .action-cell
.btn-action { color: var(--color-text) }`, 0,4,0), which is why the
simpler `.btn-action:hover` didn't take effect inside the corner
cluster. */
.files-grid-view .file-item .action-cell .file-actions:hover,
.files-grid-view .file-item .action-cell .btn-action:hover,
.files-grid-view .file-item .action-cell .favorite-star:hover,
.files-grid-view .file-item .action-cell .shared-button:hover {
color: var(--color-accent);
}
@@ -884,13 +957,20 @@
border: 2px dashed var(--color-warning-border);
}
/* Favorite star + shared button — visual overrides only. Position,
hover-reveal, chip geometry all come from the shared corner-cluster
rule on `.files-grid-view .file-item .action-cell`. What's left
here is just the per-state colour: subtle at rest, saturated when
the item's flag is set. `.active` on either button also bumps the
parent cluster's opacity (via `:has()` above) so an unhovered card
still shows its favorited/shared state. */
/* Favorite star + shared button — resting/active state colors only.
HOVER color for both lives in the unified `.action-cell button:hover
→ --color-accent` rule above; the per-state palette here only fires
when the button is NOT hovered. Convention (Ed 2026-07-26):
• hover → orange (accent) — every row action
• star.active (not hover) → gold
• shared.active (not hover) → blue
`.active` retains its color even on hover for `favorite-star` (star
users expect gold-on-gold on the currently-starred item; losing the
glyph mid-click reads as broken) but yields to orange for `shared`
per Ed's explicit "blue only for active shared" — pointer-over on
an already-shared row should still communicate "you're about to
toggle something." */
.files-grid-view .file-item button.favorite-star,
.files-grid-view .file-item button.shared-button {
color: var(--color-text-subtle);
@@ -898,19 +978,10 @@
line-height: var(--leading-none);
}
.files-grid-view .file-item button.favorite-star:hover {
color: var(--color-star-text);
}
.files-grid-view .file-item button.favorite-star.active {
color: var(--color-star-text-hover);
}
.files-grid-view .file-item button.favorite-star.active:hover {
color: var(--color-star-active);
}
.files-grid-view .file-item button.shared-button:hover,
.files-grid-view .file-item button.shared-button.active {
color: var(--color-badge-blue-text);
}
@@ -1274,7 +1345,16 @@
.btn-action:hover {
background: var(--color-border-subtle);
color: var(--color-text-dark);
/* Accent (orange) hover matches `.file-actions` (kebab) and the
favorite / shared button semantics — the pre-refactor grey-only
tint left `/recent`'s broom, `/trash`'s restore and `/search`'s
"open parent" reading as inert on hover next to the accented
kebab. Ed's 2026-07-26 UX ask: "all row buttons should change
color on hover, not just kebab and favorite." Section-specific
variants (`.btn-action--delete` in trash, `--on` in ShareDialog)
still win via more-specific selectors so red / etc. semantics
are preserved. */
color: var(--color-accent);
}
/* Opt-in modifier: hide the button until the row is hovered / focused.