vicrodh
2bf6feaa6d
Port the Playlist Manager: header/toolbar (search/filter/sort/folder-flat toggle/view-mode/new-folder/counter), FOLDERS card grid (accent icon, count, edit), PLAYLISTS grid/list/tree, folder CRUD (FolderEditModal), move-to- folder, per-card actions, and arrow-button reorder (custom sort). Reached from the sidebar "Manage playlists" item; backend 100% reused via QbzCore/library.db (no new commands). Pointer-event drag-and-drop and gradient folder colors are deferred follow-ups. This commit also carries the cross-cutting wiring the session's features all share — state.slint globals/structs, NavEntry variants, main.rs dispatch + action wiring, artwork targets, app.slint exports, AppShell mounts — so HEAD is the verified-green tree (cargo check + release build clean). 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: (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: #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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
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: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
save-ta := TouchArea {
|
|
mouse-cursor: (FolderEditState.name != "" && !FolderEditState.busy)
|
|
? pointer : default;
|
|
clicked => {
|
|
if (FolderEditState.name != "" && !FolderEditState.busy) {
|
|
FolderEditActions.save();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|