vicrodh
1662b3824e
Add a compact "slim" card variant and a 4-column grid section that
renders it, used for the Popular albums row on Discover Home.
- SlimCard: 60px row with optional rank, 44px thumbnail, title/subtitle
- GridSection: 4-column grid; cards absolutely positioned since Slint
GridLayout cannot host a `for`
- state.slint: SlimItem struct and HomeState.popular model
- home.rs: load_home now returns HomeData { sections, popular };
map_slim maps the discover most-streamed container
- artwork pipeline: ArtworkTarget enum routes decoded covers to either
a section card or a popular card
cc
51 lines
1.6 KiB
Plaintext
51 lines
1.6 KiB
Plaintext
// A Discover section that lays slim cards in a fixed 4-column grid
|
|
// (Popular albums, Recently Played). Non-paginated for now.
|
|
//
|
|
// GridLayout cannot host a `for`, so cards are absolutely positioned
|
|
// inside a Rectangle whose height is derived from the row count.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { SlimItem } from "../state.slint";
|
|
import { SlimCard } from "SlimCard.slint";
|
|
|
|
export component GridSection inherits VerticalLayout {
|
|
in property <string> title;
|
|
in property <[SlimItem]> items;
|
|
callback item-clicked(string);
|
|
|
|
property <int> columns: 4;
|
|
property <length> gap: 8px;
|
|
property <length> row-height: 60px;
|
|
property <int> rows: Math.ceil(root.items.length / root.columns);
|
|
|
|
spacing: 12px;
|
|
|
|
Text {
|
|
text: root.title;
|
|
color: Theme.text-primary;
|
|
font-size: 18px;
|
|
font-weight: Typography.semibold;
|
|
}
|
|
|
|
grid := Rectangle {
|
|
property <length> cell-width:
|
|
(self.width - (root.columns - 1) * root.gap) / root.columns;
|
|
|
|
height: root.rows > 0
|
|
? root.rows * root.row-height + (root.rows - 1) * root.gap
|
|
: 0px;
|
|
|
|
for item[i] in root.items: SlimCard {
|
|
width: grid.cell-width;
|
|
height: root.row-height;
|
|
x: Math.mod(i, root.columns) * (grid.cell-width + root.gap);
|
|
y: Math.floor(i / root.columns) * (root.row-height + root.gap);
|
|
item: item;
|
|
clicked(id) => {
|
|
root.item-clicked(id);
|
|
}
|
|
}
|
|
}
|
|
}
|