dtourolle/DarkRoom
1
0
Fork 0
Code Issues 39 Pull Requests Actions Packages Projects Releases 21 Wiki Activity

File presets in folders that open and close, as collections do

Browse Source 
The presets menu and sheet listed every preset under flat section
headings, seventy rows to scroll past. They now list folders, closed
until opened, with how many presets each holds; opening one shows what
is inside it, folders and presets indented beneath.

A category is spelled in the name: "Portraits/Warm skin" is Warm skin
in a Portraits folder under Yours. The file format does not change, so
an older build lists the whole path as the name; renaming a preset is
how it moves, and saving or renaming into a folder opens the way to it.
A Lightroom import names what it reads after the folders below the one
chosen, and a "/" in a displayed name becomes "∕" so it files nothing.
The shipped film sections become Film › Colour, Cinema and Black and
white.

The tree is built and flattened in Rust (PresetTree), each row carrying
its depth, and which folders are open is remembered for the session.

A PopupWindow keeps the size it was shown at, so a folder opened in the
menu pushed its contents under "Save or manage…"; the menu is shown
again after each toggle to take its new height. That is a function on
the rail because Slint 1.17 generates Rust that does not compile for a
popup's close() reached from inside the popup. The sheet's list takes a
preferred height of up to 400px, since a Flickable reports next to
nothing and an opened folder showed three rows.

The manual describes the folders and naming. Its pictures show the menu
with Film › Colour open, and a black-and-white stock applied from Film
› Black and white; the scenes aim popup rows from the rail's entry, and
pick the menu's "Film" over the develop column's film chooser.
This commit is contained in:
dtourolle
2026-09-27 18:37:56 -04:00
parent 89b464db0c
commit 31bcc3a462
14 changed files with 680 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dr-ui/ui/app.slint
+4
View File
@@ -521,6 +521,8 @@ export component AppWindow inherits Window {
callback rename-preset(string, string);
callback delete-preset(string);
callback preset-name-edited(string);
/// A category folder in the preset menu or sheet was opened or closed.
callback toggle-preset-folder(string);
/// TRACES: FR-DEV-6
/// Which kinds of edit a copy, paste or preset carries.
@@ -1798,6 +1800,7 @@ in property <bool> panel-visible: true;
root.apply-preset(name);
}
manage-presets => { Transfer.open-presets(); }
folder-toggled(key) => { root.toggle-preset-folder(key); }
}
// The canvas: compute output composited directly. No CPU
@@ -3454,6 +3457,7 @@ in property <bool> panel-visible: true;
remove(name) => { root.delete-preset(name); }
name-edited(text) => { root.preset-name-edited(text); }
dismiss => { root.presets-open = false; }
folder-toggled(key) => { root.toggle-preset-folder(key); }
}
// TRACES: FR-EXP-7 | FR-UI-5
ui/dr-ui/ui/presets.slint
+99 -15
View File
@@ -1,7 +1,8 @@
import { Theme } from "theme.slint";
import { Button, Field, Caption, PanelHeading } from "widgets.slint";
import { Button, Field, Caption, PanelHeading, Label } from "widgets.slint";
import { ChoiceChip } from "controls.slint";
import { Pickers } from "pickers.slint";
import { Icon } from "icons.slint";
// TRACES: FR-DEV-6
// One kind of edit, and whether a copy carries it.
@@ -30,18 +31,86 @@ export enum PresetOrigin {
}
// TRACES: FR-DEV-6
// One row of the preset sheet: a section heading, or a preset.
// One row of the preset tree: a category folder, or a preset inside one.
//
// One flat list with the headings in it rather than a list of sections, for
// the reason the rows are placed by index below: a nested `for` inside a
// `Flickable` has no layout to size it, and the arithmetic stays one line.
// One flat list with the folders in it rather than a tree, for the reason the
// rows are placed by index below: a nested `for` inside a `Flickable` has no
// layout to size it, and the arithmetic stays one line. Rust flattens the
// tree (`PresetTree` in `presets.rs`) and leaves out whatever is inside a
// closed folder, exactly as the collections tree arrives.
export struct PresetRow {
// Non-empty on a heading row, which names no preset.
heading: string,
// A category folder rather than a preset.
folder: bool,
// The folder's identity, handed back when it is opened or closed. Empty
// on a preset.
key: string,
// What the row says: the folder's name, or the preset's name without the
// categories it is filed in.
label: string,
// How many folders deep, from 0 for the top level.
depth: int,
// Whether a folder is open.
expanded: bool,
// How many presets a folder holds, however deep.
count: int,
// The preset's whole name — categories and all — which is what applying,
// renaming and deleting it are asked for by. Empty on a folder.
name: string,
origin: PresetOrigin,
}
// TRACES: FR-DEV-6
// A category folder: the disclosure arrow, its name and how many presets it
// holds. The whole row opens and closes it — unlike a collection, a folder
// here is nothing to select, so there is no second target to keep apart.
export component PresetFolderRow inherits TouchArea {
in property <PresetRow> entry;
in property <length> indent: Theme.indent;
mouse-cursor: pointer;
accessible-role: button;
accessible-label: root.entry.label;
accessible-description: root.entry.count + " presets";
accessible-expandable: true;
accessible-expanded: root.entry.expanded;
Rectangle {
border-radius: Theme.radius;
background: root.pressed ? Theme.pressed
: (root.has-hover ? Theme.hover : transparent);
}
HorizontalLayout {
padding-left: Theme.gap-sm + root.entry.depth * root.indent;
padding-right: Theme.gap;
spacing: Theme.gap-sm;
Rectangle {
width: 14px;
Icon {
name: root.entry.expanded ? "chevron-down" : "chevron-right";
ink: Theme.ink-faint;
size: 10px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
}
}
Label {
text: root.entry.label;
emphasised: true;
horizontal-stretch: 1;
vertical-alignment: center;
overflow: elide;
}
Caption {
text: root.entry.count;
vertical-alignment: center;
}
}
}
// TRACES: FR-DEV-6 | FR-UI-2
// Which kinds of edit travel: a multi-select block of chips that wraps.
//
@@ -125,6 +194,8 @@ export component PresetSheet inherits Rectangle {
callback rename(string, string);
callback remove(string);
callback dismiss();
/// A category folder was opened or closed, by its key.
callback folder-toggled(string);
/// Every keystroke in the name field, so the shell can clear a refusal the
/// user has started correcting.
callback name-edited(string);
@@ -191,8 +262,10 @@ export component PresetSheet inherits Rectangle {
if root.can-save: VerticalLayout {
spacing: Theme.gap-sm;
// A `/` files it: "Portraits/Warm skin" goes in a folder
// called Portraits, under Yours.
name := Field {
placeholder: "Name this edit and press return";
placeholder: "Name this edit, or Folder/Name, and press return";
accepted(text) => {
root.save(text);
// Cleared only once the shell has accepted it. A
@@ -226,6 +299,11 @@ export component PresetSheet inherits Rectangle {
// A floor, so the list is not squeezed out of existence by the
// field and the button around it on a short window.
min-height: 120px;
// As tall as the rows, up to a limit: the card is sized from
// what it holds, and a Flickable reports next to nothing, so
// without this an opened folder showed three rows and hid the
// rest behind a scroll.
preferred-height: min(root.rows.length * (Theme.touch-target + 2px), 400px);
viewport-height: root.rows.length * (Theme.touch-target + 2px);
for entry[i] in root.rows: Rectangle {
@@ -233,15 +311,18 @@ export component PresetSheet inherits Rectangle {
width: parent.width;
height: Theme.touch-target;
if entry.heading != "": PanelHeading {
text: entry.heading;
if entry.folder: PresetFolderRow {
entry: entry;
width: parent.width;
height: parent.height;
vertical-alignment: bottom;
clicked => { root.folder-toggled(entry.key); }
}
if entry.heading == "" && root.renaming != entry.name: HorizontalLayout {
if !entry.folder && root.renaming != entry.name: HorizontalLayout {
spacing: Theme.gap-sm;
// Under its folder's name, as the collections tree
// indents a child.
padding-left: Theme.gap-sm + entry.depth * Theme.indent;
// The name is the apply button rather than a label
// beside one. Applying is what this list is for, and a
@@ -249,8 +330,8 @@ export component PresetSheet inherits Rectangle {
// gets pressed by accident and then distrusted.
Button {
text: entry.origin == PresetOrigin.changed
? entry.name + " · changed"
: entry.name;
? entry.label + " · changed"
: entry.label;
horizontal-stretch: 1;
clicked => { root.apply(entry.name); }
}
@@ -276,8 +357,11 @@ export component PresetSheet inherits Rectangle {
// Renaming in place rather than in a second sheet: a
// dialogue over a dialogue is where a user loses track of
// which one Escape closes.
if entry.heading == "" && root.renaming == entry.name: HorizontalLayout {
// The whole name, categories and all: renaming is how a
// preset moves to another folder.
if !entry.folder && root.renaming == entry.name: HorizontalLayout {
spacing: Theme.gap-sm;
padding-left: Theme.gap-sm + entry.depth * Theme.indent;
rename-field := Field {
text: entry.name;
ui/dr-ui/ui/toolrail.slint
+34 -11
View File
@@ -53,8 +53,8 @@
import { Theme } from "theme.slint";
import { Icon } from "icons.slint";
import { ViewMode } from "session.slint";
import { PresetRow, PresetOrigin } from "presets.slint";
import { PanelHeading, Label, ScrollBar } from "widgets.slint";
import { PresetRow, PresetOrigin, PresetFolderRow } from "presets.slint";
import { Label, ScrollBar } from "widgets.slint";
// One tool. A struct rather than four parallel arrays so a row cannot be
// half-added — the compiler will not let a new entry omit its icon.
@@ -137,6 +137,8 @@ export component ToolRail inherits Rectangle {
in property <[PresetRow]> presets;
callback preset-picked(string);
callback manage-presets();
/// A category folder in the menu was opened or closed, by its key.
callback folder-toggled(string);
/// The groups this rail actually draws.
///
@@ -217,6 +219,15 @@ export component ToolRail inherits Rectangle {
// scrolls.
private property <length> foot-height: Theme.rail-entry-height + 1px;
// Show the presets menu again, so it takes the height its rows now want.
// A function on the rail rather than the two calls in the row that needs
// them: Slint 1.17 generates Rust that does not compile for a popup's
// `close()` reached from an element nested inside that popup.
function remeasure-menu() {
preset-menu.close();
preset-menu.show();
}
// One row of the presets menu. Shorter than a touch target for the reason
// the film list gives: a row's neighbours are other rows.
private property <length> menu-row-height: 32px;
@@ -540,15 +551,24 @@ export component ToolRail inherits Rectangle {
width: parent.width;
height: root.menu-row-height;
if entry.heading != "": PanelHeading {
x: Theme.gap;
width: parent.width - 2 * Theme.gap;
// Opening a folder rebuilds the rows, and so the
// height the menu wants. A PopupWindow takes its
// geometry once, when shown — a folder opened in
// place stayed the old size and pushed what it
// held under "Save or manage…" — so the menu is
// shown again, measured afresh, its foot still on
// the entry and growing upward.
if entry.folder: PresetFolderRow {
entry: entry;
width: parent.width;
height: parent.height;
text: entry.heading;
vertical-alignment: bottom;
clicked => {
root.folder-toggled(entry.key);
root.remeasure-menu();
}
}
if entry.heading == "": row := TouchArea {
if !entry.folder: row := TouchArea {
mouse-cursor: pointer;
clicked => {
root.preset-picked(entry.name);
@@ -567,12 +587,15 @@ export component ToolRail inherits Rectangle {
: (row.has-hover ? Theme.hover : transparent);
HorizontalLayout {
padding-left: Theme.gap;
// Past the folder's arrow, so a preset
// lines up with its folder's name.
padding-left: Theme.gap-sm + 14px + Theme.gap-sm
+ (entry.depth - 1) * Theme.indent;
padding-right: Theme.gap;
Label {
text: entry.origin == PresetOrigin.changed
? entry.name + " · changed"
: entry.name;
? entry.label + " · changed"
: entry.label;
emphasised: row.has-hover;
vertical-alignment: center;
overflow: elide;