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:
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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 { }
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user