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

Put the range's ends where a tablet can see them

Browse Source 
"Limit to range" looked broken a second time, for a second reason. The ends
were added to the filter chip row, and that row scrolls: its own comment
records that fourteen chips do not fit across 768 logical pixels, "so that is
every tablet in portrait". Two date fields and a caption went straight past the
right-hand edge, into the part of the row that has to be panned to.

So the fix for a control that appeared to do nothing was itself invisible, and
pressing the chip still looked like it did nothing.

They have their own line now, below the chips and outside the Flickable, and it
exists only while a range does. Nothing competes with it for width, and nothing
has to be panned to reach it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
dtourolle
2026-08-23 13:58:56 +02:00
co-authored by Claude Opus 5
parent 3a42c63b5b
commit db43d8ec8b
1 changed files with 54 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/dr-ui/ui/library.slint
+54 -45
View File
@@ -1745,51 +1745,6 @@ export component LibraryGrid inherits Rectangle {
clicked => { root.toggle-date-range(); }
}
// The ends, once there is a range to have ends.
//
// Turning the chip on used to be the whole control, and it
// took its span from the timeline's zoom — which is zero until
// you zoom, so the range came out as the entire library and
// the button appeared to do nothing at all. The span is now
// *shown*, and can be typed, so "limit to range" always
// narrows to something a person chose.
//
// Still seeded from the timeline: zooming to a fortnight and
// pressing the chip is the fast path, and these fields say
// which fortnight it landed on.
if root.range-active: HorizontalLayout {
spacing: Theme.gap-sm;
Field {
width: 108px;
y: (parent.height - self.height) / 2;
text: root.range-from;
placeholder: "YYYY-MM-DD";
accepted(t) => { root.range-edited(t, root.range-to); }
}
Caption {
text: "to";
vertical-alignment: center;
}
Field {
width: 108px;
y: (parent.height - self.height) / 2;
text: root.range-to;
placeholder: "YYYY-MM-DD";
accepted(t) => { root.range-edited(root.range-from, t); }
}
// Says which end is wrong is beyond a caption, but saying
// that *something* is beats an empty grid with no reason.
if root.range-invalid: Caption {
text: "not a date";
warn: true;
vertical-alignment: center;
}
}
Rectangle { horizontal-stretch: 1; }
// What the filter is currently hiding. Without this a narrowed
@@ -1805,6 +1760,60 @@ export component LibraryGrid inherits Rectangle {
}
}
// The range's ends, on their own line.
//
// Not in the chip row above, which scrolls: fourteen chips
// already do not fit across a tablet in portrait, so anything
// added there lands past the right edge, where it has to be
// panned to. That is how "limit to range" managed to look
// broken twice — first because it narrowed to everything, and
// then because the controls that fixed that were off-screen.
//
// Costs nothing when there is no range: the row does not exist
// then.
//
// Turning the chip on used to be the whole control, and it took its
// span from the timeline's zoom — which is zero until someone
// zooms, so the range came out as the entire library and the button
// appeared to do nothing. The span is shown here and can be typed,
// so "limit to range" always narrows to something a person chose.
//
// Still seeded from the timeline: zooming to a fortnight and
// pressing the chip is the fast path, and these fields say which
// fortnight it landed on.
if root.range-active: HorizontalLayout {
spacing: Theme.gap-sm;
Field {
width: 108px;
y: (parent.height - self.height) / 2;
text: root.range-from;
placeholder: "YYYY-MM-DD";
accepted(t) => { root.range-edited(t, root.range-to); }
}
Caption {
text: "to";
vertical-alignment: center;
}
Field {
width: 108px;
y: (parent.height - self.height) / 2;
text: root.range-to;
placeholder: "YYYY-MM-DD";
accepted(t) => { root.range-edited(root.range-from, t); }
}
// Says which end is wrong is beyond a caption, but saying
// that *something* is beats an empty grid with no reason.
if root.range-invalid: Caption {
text: "not a date";
warn: true;
vertical-alignment: center;
}
}
Rectangle {
y: parent.height - 1px;
height: 1px;