Stop the name field running through the buttons under it
The Identity header was two rows pinned to 32px and 36px. Neither number was big enough for what the row held: a `Field` is `Theme.touch-target` — 44px — and a `Button` is `Theme.control-height`. Slint honours a child's own height and lets it overflow the box the layout gave it, so the name field drew 44px from the top of a 32px row while the button strip began at 38px. The overlap was 6px of text box sitting on top of "Confirm all". Neither row states a height any more. The first takes the height of what is in it, and the strip takes the height of a control — read from the theme rather than from the row inside it, since `actions` sizes itself from the Flickable's viewport and measuring it back would be a binding loop. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -403,9 +403,17 @@ export component IdentityScreen inherits Rectangle {
|
|||||||
// is the fault library.slint's filter bar documents at length. The
|
// is the fault library.slint's filter bar documents at length. The
|
||||||
// faces grid is a sibling of this row, so it would have been laid
|
// faces grid is a sibling of this row, so it would have been laid
|
||||||
// out against a width that was never on the screen.
|
// out against a width that was never on the screen.
|
||||||
|
//
|
||||||
|
// **Neither row states a height.** The first version of this pinned
|
||||||
|
// them to 32px and 36px, which are smaller than what they contain:
|
||||||
|
// a `Field` is `Theme.touch-target` (44px) tall and a `Button` is
|
||||||
|
// `Theme.control-height`. Slint honours the child's own height and
|
||||||
|
// lets it overflow the box it was given, so the name field ran 12px
|
||||||
|
// past its row and straight through the buttons 6px below it. Rows
|
||||||
|
// take the height of what is in them; the strip takes the height of
|
||||||
|
// a control.
|
||||||
HorizontalLayout {
|
HorizontalLayout {
|
||||||
spacing: Theme.gap-sm;
|
spacing: Theme.gap-sm;
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
// Naming a cluster *is* the primary action of this screen, so
|
// Naming a cluster *is* the primary action of this screen, so
|
||||||
// the name is an editable field on sight rather than something
|
// the name is an editable field on sight rather than something
|
||||||
@@ -444,7 +452,10 @@ export component IdentityScreen inherits Rectangle {
|
|||||||
// merely absent. Same device as the library's filter chips, for
|
// merely absent. Same device as the library's filter chips, for
|
||||||
// the same reason.
|
// the same reason.
|
||||||
Flickable {
|
Flickable {
|
||||||
height: 36px;
|
// A control's height, not a guess, and not read back from the
|
||||||
|
// row inside — `actions` sizes itself from `viewport-height`,
|
||||||
|
// so measuring it here would be a binding loop.
|
||||||
|
height: Theme.control-height;
|
||||||
viewport-height: self.height;
|
viewport-height: self.height;
|
||||||
viewport-width: max(self.width, actions.preferred-width);
|
viewport-width: max(self.width, actions.preferred-width);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user