Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(slint): album view detail parity

Browse Source 
Bring the album view closer to 1:1 with the Tauri original.

- Track list: favorite and offline-cache columns, and the context-menu
  button now always shows in the muted column color (it brightens on
  hover) instead of being hidden until hover
- Toolbar above the track list: a QualityBadgeFull port of the Tauri
  QualityBadgeStatic (icon + tier + exact bit-depth/sample-rate), plus
  a track search box
- Editorial album description, truncated, with a Read more link that
  opens the full text in a modal
- Label/awards sidebar: drop the resting card background; awards use
  the Tauri laurels SVG
- Control buttons on both album and artist views are ghost circles
  (translucent fill, faint ring) instead of solid fills

cc
This commit is contained in:
vicrodh committed 2026-05-18 19:25:33 -06:00
1 parent 9af170db66
commit b51ec1509e
7 files changed
+358 -20
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-slint/ui/album/AlbumPageView.slint
+216 -14
View File
@@ -13,6 +13,7 @@ import { AlbumState, AlbumTrackItem, NavState, ContentView } from "../state.slin
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { ContextMenu } from "../primitives/ContextMenu.slint";
import { ContextMenuItem } from "../primitives/ContextMenuItem.slint";
import { QualityBadgeFull } from "../primitives/QualityBadgeFull.slint";
component CircleAction inherits Rectangle {
in property <image> icon;
@@ -23,17 +24,19 @@ component CircleAction inherits Rectangle {
width: root.diameter;
height: root.diameter;
border-radius: root.diameter / 2;
background: root.primary
? (ta.has-hover ? Theme.accent-hover : Theme.accent)
: (ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
// Ghost circle — translucent fill with a faint ring, never a solid
// accent fill (mirrors the Tauri transport controls).
background: ta.has-hover ? Theme.surface-hover : transparent;
border-width: 1px;
border-color: ta.has-hover ? Theme.text-disabled : Theme.border-subtle;
QbzIcon {
source: root.icon;
width: 17px;
height: 17px;
width: root.primary ? 19px : 17px;
height: root.primary ? 19px : 17px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: root.primary ? Theme.accent-text : Theme.text-secondary;
tint: ta.has-hover ? Theme.text-primary : Theme.text-secondary;
}
ta := TouchArea {
@@ -134,17 +137,39 @@ component TrackRow inherits Rectangle {
vertical-alignment: center;
}
// More button — a 32px square hit area, vertically centered.
// Visible while the row OR the button itself is hovered (the
// button steals has-hover from the row, so the states are ORed).
// Favorite column (visual).
Rectangle {
width: 28px;
QbzIcon {
source: @image-url("../assets/icons/heart.svg");
width: 16px;
height: 16px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: Theme.text-muted;
}
}
// Offline-cache column (visual).
Rectangle {
width: 28px;
QbzIcon {
source: @image-url("../assets/icons/cloud-download.svg");
width: 16px;
height: 16px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: Theme.text-muted;
}
}
// Context-menu button — always visible in the muted column color,
// a 32px square hit area that brightens on hover.
VerticalLayout {
alignment: center;
Rectangle {
width: 32px;
height: 32px;
border-radius: Radius.sm;
opacity: (ta.has-hover || more-ta.has-hover) ? 1.0 : 0.0;
animate opacity { duration: 120ms; }
background: more-ta.has-hover ? Theme.surface-elevated : transparent;
QbzIcon {
source: @image-url("../assets/icons/ellipsis.svg");
@@ -152,7 +177,7 @@ component TrackRow inherits Rectangle {
height: 16px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: more-ta.has-hover ? Theme.text-primary : Theme.text-secondary;
tint: more-ta.has-hover ? Theme.text-primary : Theme.text-muted;
}
more-ta := TouchArea {
mouse-cursor: pointer;
@@ -205,7 +230,7 @@ component SidebarCard inherits Rectangle {
height: 56px;
border-radius: Radius.sm;
background: ta.has-hover ? Theme.surface-hover : Theme.surface-card;
background: ta.has-hover ? Theme.surface-hover : transparent;
HorizontalLayout {
padding: 8px;
@@ -259,6 +284,9 @@ export component AlbumPageView inherits Rectangle {
callback open-artist(string);
callback media-action(string, string, string);
// Whether the full-description modal is open.
property <bool> show-description: false;
background: Theme.surface-main;
Flickable {
@@ -273,6 +301,7 @@ export component AlbumPageView inherits Rectangle {
height: 340px;
background: @linear-gradient(180deg,
AlbumState.header-color 0%,
AlbumState.header-color 16%,
transparent 100%);
}
@@ -377,6 +406,37 @@ export component AlbumPageView inherits Rectangle {
font-size: Typography.body;
overflow: elide;
}
// Editorial description — truncated, with a Read more
// link that opens the full text in a modal.
if AlbumState.description != "": Rectangle { height: 10px; }
if AlbumState.description != "": Text {
text: AlbumState.description;
color: Theme.text-secondary;
font-size: Typography.legal;
wrap: word-wrap;
height: 34px;
overflow: elide;
}
if AlbumState.description != "": read-more := TouchArea {
width: read-more-row.preferred-width;
height: 22px;
mouse-cursor: pointer;
clicked => {
root.show-description = true;
}
read-more-row := HorizontalLayout {
Text {
text: @tr("Read more");
color: read-more.has-hover
? Theme.accent-hover
: Theme.accent;
font-size: Typography.legal;
vertical-alignment: center;
}
}
}
Rectangle { height: 20px; }
HorizontalLayout {
alignment: start;
@@ -453,6 +513,52 @@ export component AlbumPageView inherits Rectangle {
font-size: Typography.body;
}
// Toolbar — album quality badge and track search.
HorizontalLayout {
height: 52px;
spacing: 16px;
VerticalLayout {
alignment: center;
QualityBadgeFull {
tier: AlbumState.quality-tier;
detail: AlbumState.quality-detail;
}
}
Rectangle { horizontal-stretch: 1; }
VerticalLayout {
alignment: center;
Rectangle {
width: 280px;
height: 34px;
border-radius: 6px;
border-width: 1px;
border-color: Theme.border-subtle;
background: Theme.surface-elevated;
HorizontalLayout {
padding-left: 10px;
padding-right: 10px;
spacing: 7px;
VerticalLayout {
alignment: center;
QbzIcon {
source: @image-url("../assets/icons/search.svg");
width: 14px;
height: 14px;
tint: Theme.text-muted;
}
}
Text {
text: @tr("Search tracks...");
color: Theme.text-muted;
font-size: 13px;
vertical-alignment: center;
horizontal-stretch: 1;
}
}
}
}
}
// Column header.
HorizontalLayout {
height: 40px;
@@ -493,6 +599,29 @@ export component AlbumPageView inherits Rectangle {
horizontal-alignment: center;
vertical-alignment: center;
}
// Favorite / offline-cache column headers.
Rectangle {
width: 28px;
QbzIcon {
source: @image-url("../assets/icons/heart.svg");
width: 14px;
height: 14px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: Theme.text-muted;
}
}
Rectangle {
width: 28px;
QbzIcon {
source: @image-url("../assets/icons/cloud-download.svg");
width: 14px;
height: 14px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: Theme.text-muted;
}
}
// Aligns with the per-row more-button slot.
Rectangle { width: 32px; }
}
@@ -526,7 +655,7 @@ export component AlbumPageView inherits Rectangle {
spacing: 8px;
SidebarHeading { text: @tr("AWARDS"); }
for award in AlbumState.awards: SidebarCard {
icon: @image-url("../assets/icons/award.svg");
icon: @image-url("../assets/laurels.svg");
name: award;
avatar-bg: @linear-gradient(135deg, #b45309 0%, #eab308 100%);
}
@@ -535,4 +664,77 @@ export component AlbumPageView inherits Rectangle {
}
}
}
// --- Full-description modal --------------------------------------------
if root.show-description: Rectangle {
background: #000000bf;
// Scrim — a click anywhere outside the panel dismisses.
TouchArea {
mouse-cursor: default;
clicked => {
root.show-description = false;
}
}
Rectangle {
width: Math.min(root.width - 80px, 560px);
height: Math.min(root.height - 120px, 460px);
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
border-radius: Radius.md;
background: Theme.surface-card;
border-width: 1px;
border-color: Theme.border-subtle;
drop-shadow-blur: 32px;
drop-shadow-color: Theme.card-shadow;
// Swallow clicks so they do not reach the scrim.
TouchArea { }
VerticalLayout {
padding: 24px;
spacing: 14px;
HorizontalLayout {
Text {
text: @tr("About this album");
color: Theme.text-primary;
font-size: Typography.heading;
font-weight: Typography.semibold;
horizontal-stretch: 1;
vertical-alignment: center;
}
close-x := TouchArea {
width: 28px;
height: 28px;
mouse-cursor: pointer;
clicked => {
root.show-description = false;
}
QbzIcon {
source: @image-url("../assets/icons/x.svg");
width: 18px;
height: 18px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
}
}
}
Flickable {
viewport-width: self.width;
viewport-height: desc-text.preferred-height;
desc-text := Text {
width: parent.width;
text: AlbumState.description;
color: Theme.text-secondary;
font-size: Typography.body;
wrap: word-wrap;
}
}
}
}
}
}