vicrodh
de826bf560
Polish + consistency:
- Compact playlist header (cover 150px; nav->header spacing
homologated with AlbumView); description truncated to ~2 lines +
"Read more" modal; custom-artwork buttons only on cover hover.
- New Typography.section (18px) token for hero/section titles,
applied across Album / Artist / Mix / Playlist + Home carousels.
- Shorter track rows app-wide (50px row, 36px artwork, -1 fonts);
+3px column-header/divider gap; wider track-number column.
- Reusable ExpandableSearch (the JumpNavBar page-search pattern:
magnifier -> opens left -> X to close) in the playlist action row.
- Custom ListScrollbar (thicker, min thumb height, own gutter) since
Slint's ListView scrollbar can't be styled.
Sort:
- Default / Title / Artist / Album / Duration with asc/desc per
field, plus Custom (manual order persisted in library.db with
up/down reorder). Client-side search + sort combined.
WIP: track drag-and-drop onto sidebar playlists
- DragState/DragActions globals, drag source on the shared TrackRow,
follow-cursor DragGhost, sidebar playlist rows self-detect the drop
via absolute-position, multi-select group drag, add_tracks_to_playlist
on drop, Flickables freeze scroll during a drag.
- KNOWN ISSUE: the ghost is offset from the cursor (the row
absolute-position + pointer mapping is off, esp. inside Flickables).
Diagnostic logging is left in (TrackRow debug() + a start log) to
pin down the wrong term before the generic fix.
cc
66 lines
2.3 KiB
Plaintext
66 lines
2.3 KiB
Plaintext
// Custom vertical scrollbar for a ListView — Slint's built-in one is
|
|
// too thin and its thumb has no minimum size, so on a thousands-row
|
|
// list it shrinks to a sliver. This sits in its own gutter (not over
|
|
// the rows), is thicker, keeps a minimum thumb height, and is
|
|
// draggable. Bind `viewport-y` two-way to the ListView and feed it the
|
|
// list's viewport/visible heights.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
|
|
export component ListScrollbar inherits Rectangle {
|
|
in property <length> viewport-height;
|
|
in property <length> visible-height;
|
|
in-out property <length> viewport-y;
|
|
|
|
// Only meaningful when the content overflows.
|
|
property <length> max-scroll: max(0px, root.viewport-height - root.visible-height);
|
|
property <length> thumb-h:
|
|
root.viewport-height > 0px
|
|
? max(48px, root.visible-height / root.viewport-height * root.height)
|
|
: root.height;
|
|
property <length> travel: max(0px, root.height - root.thumb-h);
|
|
|
|
width: 14px;
|
|
visible: root.max-scroll > 0px;
|
|
|
|
// Track.
|
|
Rectangle {
|
|
width: 6px;
|
|
x: (parent.width - self.width) / 2;
|
|
height: 100%;
|
|
background: #ffffff12;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
// Thumb.
|
|
thumb := Rectangle {
|
|
width: bar-ta.has-hover || bar-ta.pressed ? 10px : 8px;
|
|
x: (parent.width - self.width) / 2;
|
|
height: root.thumb-h;
|
|
y: root.max-scroll > 0px
|
|
? (-root.viewport-y / root.max-scroll) * root.travel
|
|
: 0px;
|
|
border-radius: 5px;
|
|
background: bar-ta.has-hover || bar-ta.pressed ? #ffffff77 : #ffffff44;
|
|
animate width { duration: 100ms; }
|
|
}
|
|
|
|
// Drag / click-to-position over the whole gutter — centers the
|
|
// thumb on the pointer.
|
|
bar-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
moved => {
|
|
if (bar-ta.pressed && root.travel > 0px) {
|
|
root.viewport-y = -min(root.max-scroll, max(0px,
|
|
(bar-ta.mouse-y - root.thumb-h / 2) / root.travel * root.max-scroll));
|
|
}
|
|
}
|
|
pointer-event(e) => {
|
|
if (e.kind == PointerEventKind.down && root.travel > 0px) {
|
|
root.viewport-y = -min(root.max-scroll, max(0px,
|
|
(bar-ta.mouse-y - root.thumb-h / 2) / root.travel * root.max-scroll));
|
|
}
|
|
}
|
|
}
|
|
}
|