vicrodh
b2004e6867
CHECKPOINT — this batch is NOT yet acceptable; substantial feedback is pending. Committed so the work is preserved for rework next session, after a max-effort Tauri code review. Areas: TrackRow favorite toggle/state + clickable artist/album (TrackItem gains is-favorite/artist-id/album-id + fav_cache, populated across all builders); PlaylistView header buttons + cover-art hover overlay; LabelView full AlbumCard + grid/list toggle; vertical scrollbar moved to the right gutter across ~12 views. cc
260 lines
9.9 KiB
Plaintext
260 lines
9.9 KiB
Plaintext
// LabelReleasesView — opened from the artist network sidebar's
|
|
// Labels section. Mirrors Tauri's LabelReleasesView.svelte core:
|
|
// a label header (image + name + album count) over a wrapping
|
|
// album grid with load-more pagination. The sort / filter /
|
|
// group-by-artist controls from the Tauri view are deferred.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import { LabelState, LabelActions, AlbumCardItem } from "../state.slint";
|
|
import { AlbumCard } from "../discover/AlbumCard.slint";
|
|
import { AlbumListRow, AlbumListHeader } from "../primitives/AlbumListRow.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
|
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
|
import { NavButtons } from "../shell/NavButtons.slint";
|
|
|
|
// One half of the grid/list segmented toggle — identical to
|
|
// DiscoverBrowseView's ToggleButton so the two views read the same.
|
|
component ToggleButton inherits Rectangle {
|
|
in property <image> icon;
|
|
in property <bool> active: false;
|
|
callback clicked();
|
|
|
|
width: 34px;
|
|
height: 34px;
|
|
background: root.active
|
|
? Theme.surface-hover
|
|
: (ta.has-hover ? Theme.surface-elevated : transparent);
|
|
|
|
QbzIcon {
|
|
source: root.icon;
|
|
width: 17px;
|
|
height: 17px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: root.active ? Theme.text-primary : Theme.text-muted;
|
|
}
|
|
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked();
|
|
}
|
|
}
|
|
}
|
|
|
|
export component LabelReleasesView inherits Rectangle {
|
|
callback open-album(string);
|
|
callback open-artist(string);
|
|
callback media-action(string, string, string);
|
|
|
|
property <length> card-width: 220px;
|
|
property <length> card-height: 266px;
|
|
property <length> card-gap: 24px;
|
|
property <length> list-row-gap: 4px;
|
|
|
|
background: Theme.surface-main;
|
|
|
|
flick := Flickable {
|
|
viewport-width: self.width;
|
|
viewport-height: page.preferred-height;
|
|
|
|
page := VerticalLayout {
|
|
width: parent.width;
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 11px;
|
|
padding-bottom: 100px;
|
|
spacing: 0px;
|
|
alignment: start;
|
|
|
|
HorizontalLayout {
|
|
alignment: start;
|
|
NavButtons { }
|
|
}
|
|
|
|
Rectangle { height: 22px; }
|
|
|
|
// --- Label header ------------------------------------------
|
|
HorizontalLayout {
|
|
spacing: 24px;
|
|
alignment: start;
|
|
Rectangle {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: Radius.md;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: LabelState.image;
|
|
image-fit: cover;
|
|
}
|
|
if LabelState.image-url == "": QbzIcon {
|
|
source: @image-url("../assets/icons/disc-3.svg");
|
|
width: 44px;
|
|
height: 44px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: Theme.text-muted;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 6px;
|
|
horizontal-stretch: 1;
|
|
Text {
|
|
text: @tr("LABEL");
|
|
color: Theme.text-muted;
|
|
font-size: 10px;
|
|
font-weight: Typography.semibold;
|
|
letter-spacing: 1.5px;
|
|
}
|
|
Text {
|
|
text: LabelState.name;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.title;
|
|
font-weight: Typography.bold;
|
|
}
|
|
if LabelState.total > 0: Text {
|
|
text: LabelState.total + " " + @tr("releases");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
}
|
|
|
|
// Grid/list segmented toggle — floats right of the header,
|
|
// same widget + behavior as DiscoverBrowseView.
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: 68px;
|
|
height: 34px;
|
|
border-radius: 6px;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
HorizontalLayout {
|
|
ToggleButton {
|
|
icon: @image-url("../assets/icons/layout-grid.svg");
|
|
active: LabelState.view-mode == "grid";
|
|
clicked => {
|
|
LabelState.view-mode = "grid";
|
|
}
|
|
}
|
|
ToggleButton {
|
|
icon: @image-url("../assets/icons/list.svg");
|
|
active: LabelState.view-mode == "list";
|
|
clicked => {
|
|
LabelState.view-mode = "list";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 32px; }
|
|
|
|
if LabelState.loading && LabelState.albums.length == 0: HorizontalLayout {
|
|
alignment: center;
|
|
LoadingSpinner { size: 36px; }
|
|
}
|
|
|
|
// --- Album grid --------------------------------------------
|
|
if LabelState.albums.length > 0
|
|
&& LabelState.view-mode == "grid": grid := Rectangle {
|
|
property <int> columns: Math.max(
|
|
1,
|
|
Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
|
|
property <int> rows: Math.ceil(LabelState.albums.length / self.columns);
|
|
height: self.rows > 0
|
|
? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
|
|
: 0px;
|
|
for album[i] in LabelState.albums: AlbumCard {
|
|
x: Math.mod(i, grid.columns) * (root.card-width + root.card-gap);
|
|
y: Math.floor(i / grid.columns) * (root.card-height + root.card-gap);
|
|
width: root.card-width;
|
|
height: root.card-height;
|
|
album: album;
|
|
clicked(id) => {
|
|
root.open-album(id);
|
|
}
|
|
media-action(kind, id, action) => {
|
|
if (kind == "artist") {
|
|
root.open-artist(id);
|
|
} else {
|
|
root.media-action(kind, id, action);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Album list --------------------------------------------
|
|
// Reusable AlbumListRow; SOURCE column hidden (single-source
|
|
// Qobuz catalog). Header labels the columns.
|
|
if LabelState.albums.length > 0
|
|
&& LabelState.view-mode == "list": VerticalLayout {
|
|
spacing: root.list-row-gap;
|
|
AlbumListHeader {
|
|
show-source: false;
|
|
}
|
|
for album[i] in LabelState.albums: AlbumListRow {
|
|
album: album;
|
|
index: i;
|
|
show-source: false;
|
|
clicked(id) => {
|
|
root.open-album(id);
|
|
}
|
|
media-action(kind, id, action) => {
|
|
if (kind == "artist") {
|
|
root.open-artist(id);
|
|
} else {
|
|
root.media-action(kind, id, action);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if LabelState.albums.length > 0
|
|
&& LabelState.albums.length < LabelState.total: HorizontalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: load-more-text.preferred-width + 24px;
|
|
height: 32px;
|
|
load-more-text := Text {
|
|
text: LabelState.load-more-loading
|
|
? @tr("Loading…")
|
|
: @tr("Load more");
|
|
color: load-more-ta.has-hover
|
|
? Theme.text-primary
|
|
: Theme.text-secondary;
|
|
font-size: 13px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
load-more-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
enabled: !LabelState.load-more-loading;
|
|
clicked => {
|
|
LabelActions.load-more();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Shared scrollbar in the right gutter (homologated cross-view).
|
|
ListScrollbar {
|
|
x: parent.width - self.width - 4px;
|
|
width: 14px;
|
|
height: 100%;
|
|
viewport-height: flick.viewport-height;
|
|
visible-height: flick.height;
|
|
viewport-y <=> flick.viewport-y;
|
|
}
|
|
}
|