diff --git a/ui/dr-ui/ui/library.slint b/ui/dr-ui/ui/library.slint index 5990651..a1207c3 100644 --- a/ui/dr-ui/ui/library.slint +++ b/ui/dr-ui/ui/library.slint @@ -1760,29 +1760,44 @@ 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 { + Rectangle { + y: parent.height - 1px; + height: 1px; + background: Theme.rule; + } + } + + // --- the date range's ends --------------------------------------- + // + // Its own strip, a sibling of the chips rather than a child of them. + // + // Twice now this control has looked broken. First it narrowed to the + // whole library, because it took its span from a timeline zoom that + // is zero until someone zooms. Then the fields that fixed that went + // into the chip row — which is 34px tall and scrolls sideways, so + // they were both clipped and off past the right-hand edge. + // + // A `Rectangle` stacks its children at the origin rather than laying + // them out, which is why putting a second row inside the chips' one + // drew it over them instead of under them. This is a row of the + // header's `VerticalLayout`, so it gets a line of its own and the + // width of the window. + if root.range-active: Rectangle { + height: 40px; + background: Theme.surface; + + HorizontalLayout { + width: 100%; + height: 100%; + // The same leading inset the chips above use, so the two rows + // start on one vertical line rather than a few pixels apart. + padding-left: Theme.gap; + padding-right: Theme.gap; spacing: Theme.gap-sm; + // Fixed-width fields and a two-letter word: left-aligned, so + // they sit under the chip that turned them on instead of + // spreading across the window. + alignment: start; Field { width: 108px; @@ -1805,20 +1820,12 @@ export component LibraryGrid inherits Rectangle { 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; - background: Theme.rule; - } } // --- progress -----------------------------------------------------