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

Swipe up in develop for the photo roll

Browse Source 
Develop opens one photograph. The grid handed over a path and nothing
else, so `index` and `total` were pinned to "1 of 1" on the way in and the
only route to the next frame was back to the library, find your place,
tap again. Fine once; intolerable through a set of forty, which is the
situation the develop view exists for.

The roll is the grid's already-loaded window along the foot of the
canvas. Swipe up to bring it out, swipe down to put it away — the sheet
gesture, already in the hands of anyone who has used a phone — and a
handle is drawn at the edge so the gesture is discoverable rather than
folklore, and so a pointer, which has no swipe to make, has a way in.

`SwipeGestureHandler` wraps the strip rather than sitting over or under
it, which is what it is built for: it delays a press the way a Flickable
does, forwards it to the children if no swipe develops and claims it once
one does, so a tap reaches the thumbnail and a drag does not. It covers
only the band along the bottom — above that, a drag still belongs to the
photograph, for panning and for the crop.

Picking goes through the same path a cell click does, so the outgoing
edit is persisted before the next image loads. The strip marks what is
open and scrolls to keep the mark in view.

The position readout now says where in the *library* the open photograph
sits rather than "1 of 1". Set after the open rather than before, since
the generic open path resets it — and given as the library ordinal, not
the row in the loaded window, which is an artefact of how much has been
paged in and would jump about as the window moves.
This commit is contained in:
dtourolle
2026-08-21 21:10:44 +02:00
parent c72f197880
commit 6ae0af3f72
3 changed files with 252 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dr-ui/ui/library.slint
+176
View File
@@ -263,6 +263,182 @@ export struct LibraryCell {
flag: int,
}
// The photo roll: the grid's loaded window along the foot of the develop view.
//
// # Why this exists
//
// Develop opens *one* photograph. `index` and `total` are pinned to "1 of 1"
// on the way in, because the grid hands over a path and nothing else, so the
// only way to reach the next frame was to go back to the library, find where
// you were, and tap again. That is fine once and intolerable through a set of
// forty — which is precisely the situation the develop view exists for.
//
// # The gesture
//
// A swipe up from the bottom edge brings it out, a swipe down puts it away:
// the sheet gesture, already in the hands of anyone who has used a phone.
// A gesture with no visible counterpart is a feature only its author knows
// about (FR-UI-4), so a handle is drawn at the edge and is a button in its own
// right — which is also what gives a pointer, with no swipe to make, a way in.
//
// The handler wraps the strip rather than sitting over or under it. That is
// what `SwipeGestureHandler` is built for: it delays a press the way a
// Flickable does, forwards it to the children if no swipe develops, and claims
// it once one does. A tap therefore reaches the thumbnail and a drag does not.
//
// It covers only the band along the bottom, never the whole canvas — above
// that band a drag belongs to the photograph, for panning and for the crop.
export component PhotoRoll inherits Rectangle {
in property <[LibraryCell]> cells;
/// Which row of the loaded window is open, so it can be marked. `-1` when
/// the open photograph is not in the window at all, which is the honest
/// answer after a scrub — the roll shows where you are, and sometimes the
/// answer is "not here".
in property <int> current: -1;
in-out property <bool> open: false;
/// A thumbnail was chosen. The row within the loaded window, matching what
/// a cell click reports.
callback pick(int);
property <length> strip-height: 108px;
/// The band of canvas left grabbable when the roll is away. A thumb's
/// worth, and no more: it is taken off the bottom of the photograph.
property <length> reach: 28px;
property <length> thumb: 92px;
property <length> pad: 6px;
background: transparent;
swipe := SwipeGestureHandler {
width: 100%;
height: root.strip-height + root.reach;
y: parent.height - self.height;
handle-swipe-up: !root.open;
handle-swipe-down: root.open;
// Direction decides, not distance: the handler has already applied its
// own threshold by the time this fires, and re-testing the travel here
// would mean a swipe that qualified as a swipe still did nothing.
swiped => {
root.open = self.current-position.y < self.pressed-position.y;
}
// --- the strip ------------------------------------------------
//
// Slid out of view rather than removed. An `if` would have it appear
// fully formed at the bottom of the screen instead of arriving from
// the edge, and would leave nothing for the animation to act on.
strip := Rectangle {
width: 100%;
height: root.strip-height;
y: root.open ? root.reach : parent.height;
animate y { duration: 180ms; easing: ease-out; }
background: Theme.surface;
clip: true;
Rectangle {
width: 100%;
height: 1px;
background: Theme.rule;
}
roll := Flickable {
width: 100%;
height: 100%;
viewport-height: self.height;
viewport-width:
max(self.width,
root.cells.length * (root.thumb + root.pad) + root.pad);
// Bring the open photograph into view — on opening, and when
// the roll itself moves the selection along. Without it a pick
// near the end of the window scrolls back to the start on the
// next reveal, and the mark the strip exists to show is off
// the edge of it.
function reveal() {
if (root.current < 0) {
return;
}
let left = root.pad + root.current * (root.thumb + root.pad);
let shown = -self.viewport-x;
let right = max(0px, self.viewport-width - self.width);
if (left < shown) {
self.viewport-x = -min(right, left);
} else if (left + root.thumb > shown + self.width) {
self.viewport-x =
-min(right, left + root.thumb - self.width);
}
}
property <int> mark: root.current;
changed mark => { self.reveal(); }
property <bool> shown: root.open;
changed shown => {
if (self.shown) { self.reveal(); }
}
for cell[i] in root.cells: Rectangle {
x: root.pad + i * (root.thumb + root.pad);
y: root.pad;
width: root.thumb;
height: parent.height - 2 * root.pad;
background: Theme.ground;
border-radius: Theme.radius;
// The one that is open, marked the way the grid marks a
// selection so the two read as the same idea.
border-width: i == root.current ? 2px : 0px;
border-color: Theme.selected-ring;
clip: true;
Image {
width: 100%;
height: 100%;
source: cell.thumbnail;
image-fit: contain;
visible: cell.has-thumb;
}
TouchArea {
mouse-cursor: pointer;
clicked => { root.pick(i); }
}
}
}
}
// --- the handle -----------------------------------------------
//
// Rides on the strip's top edge, so it is in the same place relative to
// the roll whether it is in or out, and it is the affordance that stops
// the swipe being folklore.
Rectangle {
width: 84px;
height: root.reach;
x: (parent.width - self.width) / 2;
y: strip.y - self.height;
animate y { duration: 180ms; easing: ease-out; }
background: Theme.surface;
border-radius: Theme.radius;
Rectangle {
width: 32px;
height: 3px;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
background: Theme.ink-dim;
border-radius: 2px;
}
TouchArea {
mouse-cursor: pointer;
clicked => { root.open = !root.open; }
}
}
}
}
// A row of five stars, readable at a glance and clickable to set a rating.
//
// **Filled versus empty carries the meaning, not colour.** NFR-A11Y-3 forbids