feat(qbz-slint): drop content borders, add Cider-style carousel fades

- Removes the hairline borders around the content region; the chrome
  and content surface colors already delineate the regions cleanly.
- Carousels gain edge-fade gradients: clipped cards dissolve into the
  content background at the left and right edges, shown only when there
  is more to page in that direction — like Cider's row edges.

cc
This commit is contained in:
vicrodh committed 2026-05-18 15:27:37 -06:00
1 parent b9be2dc0d9
commit ece878ed49
2 files changed
+20 -13

No files matched your search

@@ -121,5 +121,22 @@ export component Carousel inherits VerticalLayout {
}
}
}
// Cider-style edge fades — clipped cards dissolve into the
// content background instead of being hard-cut.
Rectangle {
x: 0px;
width: 56px;
background: @linear-gradient(90deg, Theme.surface-main 0%, transparent 100%);
opacity: root.current-page > 0 ? 1.0 : 0.0;
animate opacity { duration: 150ms; }
}
Rectangle {
x: parent.width - self.width;
width: 56px;
background: @linear-gradient(90deg, transparent 0%, Theme.surface-main 100%);
opacity: root.current-page < root.page-count - 1 ? 1.0 : 0.0;
animate opacity { duration: 150ms; }
}
}
}
+3 -13
View File
@@ -1,9 +1,11 @@
// App shell — the post-login frame: header bar, sidebar, content
// region, and player bar. The content region shows either the Discover
// Home view or the Album detail view, driven by NavState.
//
// Regions are delineated by their surface colors (chrome over the darker
// content well); no hairline borders.
import { Theme } from "../foundation/semantic-colors.slint";
import { Layout } from "../foundation/layout.slint";
import { NavState } from "../state.slint";
import { Sidebar } from "Sidebar.slint";
import { HeaderBar } from "HeaderBar.slint";
@@ -29,20 +31,12 @@ export component AppShell inherits Rectangle {
root.close-app();
}
}
Rectangle {
height: Layout.hairline;
background: Theme.border-subtle;
}
HorizontalLayout {
vertical-stretch: 1;
spacing: 0px;
Sidebar { }
Rectangle {
width: Layout.hairline;
background: Theme.border-subtle;
}
// Content region — Home or Album detail.
Rectangle {
@@ -58,10 +52,6 @@ export component AppShell inherits Rectangle {
}
}
Rectangle {
height: Layout.hairline;
background: Theme.border-subtle;
}
PlayerBar { }
}
}