Let the header readouts shrink instead of pushing the controls off screen
Found uncommitted in the working tree and committed as its own change rather than folded into the sync work beside it: the three header readouts gain `overflow: elide` and `horizontal-stretch: 1`, which is what actually lets a Text shrink under pressure in Slint. Without the stretch they kept their full natural width and pushed the sidebar toggle and the More button past the right edge on a narrow window, reachable only by knowing to flick-scroll. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1349,11 +1349,25 @@ export component LibraryGrid inherits Rectangle {
|
|||||||
// thought it could draw. Seven action buttons and four readouts do
|
// thought it could draw. Seven action buttons and four readouts do
|
||||||
// not fit across a tablet even in landscape, which is why the last
|
// not fit across a tablet even in landscape, which is why the last
|
||||||
// one was clipped by the screen edge.
|
// one was clipped by the screen edge.
|
||||||
|
//
|
||||||
|
// Sized to `min-width`, not `preferred-width`: the latter is the
|
||||||
|
// row's *untruncated* footprint — every readout at its natural
|
||||||
|
// text width — so the Flickable was always at least that wide and
|
||||||
|
// the row never actually shrank, it just scrolled, with the
|
||||||
|
// sidebar toggle and the "More" disclosure off past the right
|
||||||
|
// edge on anything narrower than a tablet. `min-width` is what
|
||||||
|
// the row needs once its `elide` + `horizontal-stretch: 1`
|
||||||
|
// readouts (image count, selection count, scan status, the
|
||||||
|
// window label below) are collapsed to an ellipsis, so a window
|
||||||
|
// with room for that shrunk row now gets the row shrunk to fit
|
||||||
|
// instead of scrolled — and the toggle and disclosure, which
|
||||||
|
// don't shrink, stay on screen. Only a window too narrow even for
|
||||||
|
// the shrunk row still scrolls.
|
||||||
Flickable {
|
Flickable {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
viewport-height: self.height;
|
viewport-height: self.height;
|
||||||
viewport-width: max(self.width, header-row.preferred-width);
|
viewport-width: max(self.width, header-row.min-width);
|
||||||
|
|
||||||
header-row := HorizontalLayout {
|
header-row := HorizontalLayout {
|
||||||
width: parent.viewport-width;
|
width: parent.viewport-width;
|
||||||
@@ -1381,7 +1395,18 @@ export component LibraryGrid inherits Rectangle {
|
|||||||
overflow: elide;
|
overflow: elide;
|
||||||
}
|
}
|
||||||
|
|
||||||
Caption { text: root.total > 0 ? root.total + " images" : ""; }
|
// `elide` + `horizontal-stretch: 1`, like `window-label` below:
|
||||||
|
// stretch is what actually lets a `Text` shrink under pressure
|
||||||
|
// in Slint, not `elide` alone (see the comment on the header
|
||||||
|
// row's Flickable) — without it these three readouts kept
|
||||||
|
// their full natural width and were what pushed the sidebar
|
||||||
|
// toggle and the "More" button past the right edge on a
|
||||||
|
// narrow window, reachable only by knowing to flick-scroll.
|
||||||
|
Caption {
|
||||||
|
text: root.total > 0 ? root.total + " images" : "";
|
||||||
|
overflow: elide;
|
||||||
|
horizontal-stretch: 1;
|
||||||
|
}
|
||||||
|
|
||||||
// The selection count, and how to act on it. Both appear only
|
// The selection count, and how to act on it. Both appear only
|
||||||
// when something is selected — an empty selection has nothing
|
// when something is selected — an empty selection has nothing
|
||||||
@@ -1395,6 +1420,8 @@ export component LibraryGrid inherits Rectangle {
|
|||||||
modified: true;
|
modified: true;
|
||||||
compact: true;
|
compact: true;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
overflow: elide;
|
||||||
|
horizontal-stretch: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
Label {
|
Label {
|
||||||
@@ -1410,6 +1437,8 @@ export component LibraryGrid inherits Rectangle {
|
|||||||
: (root.sweeping
|
: (root.sweeping
|
||||||
? "indexing " + root.sweep-done + " / " + root.sweep-total
|
? "indexing " + root.sweep-done + " / " + root.sweep-total
|
||||||
: root.scan-status);
|
: root.scan-status);
|
||||||
|
overflow: elide;
|
||||||
|
horizontal-stretch: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Where in the library the visible window sits. A scrubbable
|
// Where in the library the visible window sits. A scrubbable
|
||||||
|
|||||||
Reference in New Issue
Block a user