lashman/driftwood
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Implement UI/UX overhaul - cards, list, tabbed detail, context menu

Browse Source 
Card view: 200px cards with 72px icons, .title-3 names, version+size
combined line, single priority badge, libadwaita .card class replacing
custom .app-card CSS.

List view: 48px rounded icons, .rich-list class, structured two-line
subtitle (description + version/size), single priority badge.

Detail view: restructured into ViewStack/ViewSwitcher with 4 tabs
(Overview, System, Security, Storage). 96px hero banner with gradient
background. Rows distributed logically across tabs.

Context menu: right-click (GestureClick button 3) and long-press on
cards and list rows. Menu items: Launch, Check for Updates, Scan for
Vulnerabilities, Integrate/Remove Integration, Open Containing Folder,
Copy Path. All backed by parameterized window actions.

CSS: removed custom .app-card rules (replaced by .card), added
.icon-rounded for list icons, .detail-banner gradient, and
.detail-view-switcher positioning.
This commit is contained in:
lashman
2026-02-27 11:10:23 +02:00
parent 4f7d8560f1
commit 33cc8a757a
7 changed files with 2630 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
data/resources/style.css
View File

@@ -66,30 +66,18 @@
color: @window_fg_color;
}
/* ===== App Cards (Grid View) ===== */
.app-card {
padding: 14px;
border-radius: 14px;
background: @card_bg_color;
border: 1px solid alpha(@window_fg_color, 0.08);
transition: all 150ms ease;
}
.app-card:hover {
background: mix(@card_bg_color, @window_fg_color, 0.04);
box-shadow: 0 2px 8px alpha(black, 0.06);
}
.app-card:active {
background: mix(@card_bg_color, @window_fg_color, 0.08);
}
/* Focus indicator for grid cards */
flowboxchild:focus-visible .app-card {
/* ===== Card View (using libadwaita .card) ===== */
flowboxchild:focus-visible .card {
outline: 2px solid @accent_bg_color;
outline-offset: 3px;
}
/* Rounded icon clipping for list view */
.icon-rounded {
border-radius: 8px;
overflow: hidden;
}
/* ===== WCAG AAA Focus Indicators ===== */
button:focus-visible,
togglebutton:focus-visible,
@@ -132,7 +120,20 @@ row:focus-visible {
/* ===== Detail View Banner ===== */
.detail-banner {
padding: 12px 0;
padding: 18px 0;
background-image: linear-gradient(
to bottom,
alpha(@accent_bg_color, 0.08),
transparent
);
border-radius: 12px;
margin-bottom: 6px;
}
/* Inline ViewSwitcher positioning */
.detail-view-switcher {
margin-top: 6px;
margin-bottom: 6px;
}
/* ===== Quick Action Pills ===== */
@@ -151,15 +152,6 @@ row:focus-visible {
/* ===== Dark Mode Differentiation ===== */
@media (prefers-color-scheme: dark) {
.app-card {
border: 1px solid alpha(@window_fg_color, 0.12);
}
.app-card:hover {
box-shadow: 0 2px 8px alpha(black, 0.15);
background: mix(@card_bg_color, @window_fg_color, 0.06);
}
.compat-warning-banner {
background: alpha(@warning_bg_color, 0.1);
border: 1px solid alpha(@warning_bg_color, 0.2);
@@ -168,11 +160,7 @@ row:focus-visible {
/* ===== High Contrast Mode (WCAG AAA 1.4.6) ===== */
@media (prefers-contrast: more) {
.app-card {
border: 2px solid @window_fg_color;
}
flowboxchild:focus-visible .app-card {
flowboxchild:focus-visible .card {
outline-width: 3px;
}