vicrodh
82129cff35
Ephemeral folders: open / browse / play a folder without indexing it — album-grouped pane, CUE seek fast-path (no full re-decode per virtual track), folder-path persistence + rehydrate, "already playing" add-vs-replace choice dialog (ephemeral-only), and now-playing / queue / menu gating so an ephemeral track exposes no persistence actions. Folders tree brought 1:1 with Tauri: - Rail header: select-mode, collapse-all, open-ephemeral, tree search. - Resizable rail (default ~20% narrower; drag handle, min 50% default / max 50% of the content area). - Subfolder cover grid + grid/list toggle, recursive track count, name search; compact icon bulk bar (folder-check / play-next / queue / playlist / clear). - Tree is the default mode; circular checkboxes homologated with TrackRow; compact rows (smaller type + icon, no ambiguous trailing count). - Flat/Tree icon toggle (disc-album / folder-tree), floated right. Per-source TrackRow context menu (logic, not a blanket trim): Qobuz/offline = full; local = play/next/queue + add-to-playlist; plex/ephemeral = play/next/ queue only. App-wide standard: Math.round pixel-snap on icon centering across the UI to kill sub-pixel blur (CircleAction, header back/forward/collapse, and the rest). NowPlayingBar context icon -> turntable (frees disc-album for the Folders toggle). New assets: folder-check, folder-tree, turntable. cc
273 lines
13 KiB
Plaintext
273 lines
13 KiB
Plaintext
// Folder editor modal — create + edit a playlist folder (Tauri's
|
|
// FolderEditModal). Name field, an icon-preset grid, a solid-color swatch
|
|
// grid (gradients intentionally omitted — Slint has no gradient brush in a
|
|
// struct), a custom-image picker, a hidden toggle, and save/delete.
|
|
//
|
|
// Driven by FolderEditState/FolderEditActions. The icon-preset + color
|
|
// grids are built once by the Rust controller and pushed as models.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import { FolderEditState, FolderEditActions, PmIconPreset, PmColorSwatch } from "../state.slint";
|
|
import { QbzIcon } from "QbzIcon.slint";
|
|
import { QbzToggle } from "QbzToggle.slint";
|
|
import { LineEdit } from "std-widgets.slint";
|
|
|
|
export component FolderEditModal inherits Rectangle {
|
|
visible: FolderEditState.open;
|
|
|
|
if FolderEditState.open: Rectangle {
|
|
background: #000000bf;
|
|
TouchArea {
|
|
mouse-cursor: default;
|
|
clicked => { FolderEditActions.close(); }
|
|
}
|
|
Rectangle {
|
|
width: Math.min(root.width - 80px, 480px);
|
|
height: panel.preferred-height;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
border-radius: Radius.md;
|
|
background: Theme.surface-card;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
drop-shadow-blur: 32px;
|
|
drop-shadow-color: #00000080;
|
|
TouchArea { }
|
|
|
|
panel := VerticalLayout {
|
|
padding: 20px;
|
|
spacing: 16px;
|
|
|
|
// Title + close.
|
|
HorizontalLayout {
|
|
Text {
|
|
text: FolderEditState.id == "" ? @tr("New folder") : @tr("Edit folder");
|
|
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 => { FolderEditActions.close(); }
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/x.svg");
|
|
width: 17px;
|
|
height: 17px;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Name.
|
|
VerticalLayout {
|
|
spacing: 6px;
|
|
Text {
|
|
text: @tr("Folder name");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
}
|
|
name-input := LineEdit {
|
|
placeholder-text: @tr("Enter folder name");
|
|
text <=> FolderEditState.name;
|
|
accepted => { FolderEditActions.save(); }
|
|
}
|
|
}
|
|
|
|
// Icon preset grid.
|
|
VerticalLayout {
|
|
spacing: 6px;
|
|
Text {
|
|
text: @tr("Icon");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
}
|
|
HorizontalLayout {
|
|
spacing: 8px;
|
|
for preset[i] in FolderEditState.icon-presets: Rectangle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
property <bool> active: FolderEditState.custom-image-path == ""
|
|
&& FolderEditState.icon-preset == preset.id;
|
|
background: self.active ? Theme.accent
|
|
: (preset-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
|
|
QbzIcon {
|
|
source:
|
|
preset.id == "heart" ? @image-url("../assets/icons/heart.svg")
|
|
: preset.id == "star" ? @image-url("../assets/icons/star.svg")
|
|
: preset.id == "music" ? @image-url("../assets/icons/music.svg")
|
|
: preset.id == "disc" ? @image-url("../assets/icons/disc.svg")
|
|
: preset.id == "library" ? @image-url("../assets/icons/library.svg")
|
|
: preset.id == "headphones" ? @image-url("../assets/icons/audio-lines.svg")
|
|
: @image-url("../assets/icons/folder.svg");
|
|
width: 17px;
|
|
height: 17px;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: parent.active ? #ffffff : Theme.text-secondary;
|
|
}
|
|
preset-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { FolderEditActions.select-preset(preset.id); }
|
|
}
|
|
}
|
|
// Custom image picker.
|
|
Rectangle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
property <bool> active: FolderEditState.custom-image-path != "";
|
|
background: self.active ? Theme.accent
|
|
: (img-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
|
|
clip: true;
|
|
if FolderEditState.custom-image-path != "": Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: FolderEditState.custom-image;
|
|
image-fit: cover;
|
|
}
|
|
if FolderEditState.custom-image-path == "": QbzIcon {
|
|
source: @image-url("../assets/icons/image-plus.svg");
|
|
width: 17px;
|
|
height: 17px;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: Theme.text-secondary;
|
|
}
|
|
img-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { FolderEditActions.pick-image(); }
|
|
}
|
|
}
|
|
Rectangle { horizontal-stretch: 1; }
|
|
}
|
|
}
|
|
|
|
// Color swatches.
|
|
VerticalLayout {
|
|
spacing: 6px;
|
|
Text {
|
|
text: @tr("Color");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
}
|
|
// Two rows of swatches, wrapped manually via a grid.
|
|
swatch-grid := Rectangle {
|
|
property <int> columns: 11;
|
|
property <length> sw: 28px;
|
|
property <length> gap: 8px;
|
|
property <int> rows: Math.ceil(FolderEditState.color-swatches.length / self.columns);
|
|
height: self.rows * self.sw + Math.max(0, self.rows - 1) * self.gap;
|
|
for sw[i] in FolderEditState.color-swatches: Rectangle {
|
|
x: Math.mod(i, swatch-grid.columns) * (swatch-grid.sw + swatch-grid.gap);
|
|
y: Math.floor(i / swatch-grid.columns) * (swatch-grid.sw + swatch-grid.gap);
|
|
width: swatch-grid.sw;
|
|
height: swatch-grid.sw;
|
|
border-radius: 14px;
|
|
property <bool> active: FolderEditState.icon-color == sw.value;
|
|
background: sw.is-accent ? Theme.accent : sw.color;
|
|
border-width: self.active ? 2px : 0px;
|
|
border-color: #ffffff;
|
|
if self.active: QbzIcon {
|
|
source: @image-url("../assets/icons/check.svg");
|
|
width: 14px;
|
|
height: 14px;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
tint: #ffffff;
|
|
}
|
|
sw-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => { FolderEditActions.select-color(sw.value); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hidden toggle.
|
|
HorizontalLayout {
|
|
spacing: 10px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
horizontal-stretch: 1;
|
|
Text {
|
|
text: @tr("Hide from sidebar");
|
|
color: Theme.text-secondary;
|
|
font-size: Typography.body;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzToggle {
|
|
checked: FolderEditState.is-hidden;
|
|
toggled => { FolderEditActions.toggle-hidden(); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Buttons.
|
|
HorizontalLayout {
|
|
spacing: 10px;
|
|
// Delete (edit mode only).
|
|
if FolderEditState.id != "": Rectangle {
|
|
width: del-label.preferred-width + 28px;
|
|
height: 36px;
|
|
border-radius: Radius.sm;
|
|
background: del-ta.has-hover ? #ef444433 : transparent;
|
|
border-width: 1px;
|
|
border-color: #ef4444;
|
|
del-label := Text {
|
|
text: @tr("Delete");
|
|
color: #ef4444;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.medium;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
}
|
|
del-ta := TouchArea {
|
|
mouse-cursor: FolderEditState.busy ? default : pointer;
|
|
clicked => {
|
|
if (!FolderEditState.busy) { FolderEditActions.delete(); }
|
|
}
|
|
}
|
|
}
|
|
Rectangle { horizontal-stretch: 1; }
|
|
// Save.
|
|
Rectangle {
|
|
width: save-label.preferred-width + 36px;
|
|
height: 36px;
|
|
border-radius: Radius.sm;
|
|
opacity: (FolderEditState.name != "" && !FolderEditState.busy) ? 1.0 : 0.5;
|
|
background: save-ta.has-hover ? #ffffffd6 : Theme.accent;
|
|
save-label := Text {
|
|
text: @tr("Save");
|
|
color: #ffffff;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.semibold;
|
|
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
|
|
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
|
|
}
|
|
save-ta := TouchArea {
|
|
mouse-cursor: (FolderEditState.name != "" && !FolderEditState.busy)
|
|
? pointer : default;
|
|
clicked => {
|
|
if (FolderEditState.name != "" && !FolderEditState.busy) {
|
|
FolderEditActions.save();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|