flea-qml 0.0.0-stage → 0.2.0

package/ui/boot/Ui/SearchableDropdown.qml

@@ -0,0 +1,354 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import qs.Commons
+import qs.Commons as Commons
+
+// Searchable single-select dropdown. Same trigger shape as Dropdown, but
+// the popup leads with an embedded TextField that filters the option
+// list in real time. Use for pickers with enough options that scanning
+// is friction.
+//
+// Filtering is case-insensitive substring against each option's label.
+// Options can be string[] or [{ value, label, description? }] — the same
+// shape Dropdown accepts. The filter clears whenever the popup closes.
+//
+// Keyboard: Tab to focus the trigger, Enter/Space opens (search focused
+// immediately). Down arrow from the search jumps to the first match;
+// Up from the first match returns to the search. Enter selects, Esc
+// closes (and clears the filter).
+Item {
+  id: root
+
+  property string label: ""
+  property string value: ""
+  property var options: []
+  property string placeholderText: Commons.I18n.t("common.search")
+  property string emptyText: Commons.I18n.t("common.noMatches")
+  property string triggerLabel: ""
+
+  property color foreground: Commons.Color.popups.text
+  property color background: Commons.Color.popups.background
+  property color popupBorder: Commons.Color.popups.border
+  property color accent: Commons.Color.accent
+  readonly property var popupBorderSpec: Border.localOrSurfaceSpec("popups", "border", popupBorder, Commons.Color.popups.border, Style.normalBorderWidth)
+  property string fontFamily: Style.font.family
+  property int rowHeight: Style.spacing.controlHeight
+  property int popupRowHeight: Style.spacing.popupRowHeight
+  property int popupMinHeight: Style.spacing.searchablePopupMinHeight
+  property bool showLabel: true
+
+  // Panel-cursor flag. When true, the trigger renders the shared
+  // hover-cursor state. Active Qt focus defaults to the same visuals.
+  // Emits `hovered(bool)` on pointer enter/leave so the panel can keep
+  // its cursor state in sync with the mouse.
+  property bool hasCursor: false
+
+  // popupOpen + open()/close()/toggle() let a parent panel know when the
+  // dropdown owns keys (search field + result list are active) and
+  // suspend its own keyCatcher so typing into the filter doesn't drive
+  // the panel cursor.
+  readonly property bool popupOpen: popup.opened
+  function open() { popup.open() }
+  function close() { popup.close() }
+  function toggle() { popup.opened ? popup.close() : popup.open() }
+
+  signal changed(string value)
+  signal hovered(bool isHovered)
+
+  function optionValue(o) {
+    return (o && typeof o === "object") ? String(o.value) : String(o)
+  }
+  function optionLabel(o) {
+    return (o && typeof o === "object") ? String(o.label) : String(o)
+  }
+  function optionDescription(o) {
+    return (o && typeof o === "object" && o.description) ? String(o.description) : ""
+  }
+  function currentLabel() {
+    for (var i = 0; i < options.length; i++) {
+      if (optionValue(options[i]) === value) return optionLabel(options[i])
+    }
+    return value
+  }
+
+  property var filtered: options
+  function recomputeFiltered() {
+    var q = searchField.text.toLowerCase()
+    if (!q) { filtered = options; return }
+    var out = []
+    for (var i = 0; i < options.length; i++) {
+      var lbl = optionLabel(options[i]).toLowerCase()
+      var desc = optionDescription(options[i]).toLowerCase()
+      if (lbl.indexOf(q) !== -1 || desc.indexOf(q) !== -1) out.push(options[i])
+    }
+    filtered = out
+  }
+
+  onOptionsChanged: recomputeFiltered()
+
+  implicitWidth: Style.spacing.searchableDropdownWidth
+  implicitHeight: showLabel && label !== "" ? rowHeight + Style.spacing.huge : rowHeight
+
+  Column {
+    anchors.fill: parent
+    spacing: Style.spacing.labelGap
+
+    Text {
+      textFormat: Text.PlainText
+      visible: root.showLabel && root.label !== ""
+      text: root.label
+      color: Qt.darker(root.foreground, 1.4)
+      font.family: root.fontFamily
+      font.pixelSize: Style.font.caption
+      font.bold: true
+    }
+
+    BorderSurface {
+      id: trigger
+      width: parent.width
+      height: root.rowHeight
+      radius: Style.cornerRadius
+
+      readonly property bool _focused: trigger.activeFocus
+      readonly property bool _hot: triggerHover.hovered || root.hasCursor
+      readonly property var _borderSpec: Border.controlSpec(trigger._focused ? "focus" : (trigger._hot ? "hover-cursor" : "normal"), root.foreground, root.accent)
+
+      color: Style.controlFill(trigger._focused, trigger._hot, root.foreground, root.accent)
+      borderSpec: _borderSpec
+
+      activeFocusOnTab: true
+
+      HoverHandler {
+        id: triggerHover
+        onHoveredChanged: root.hovered(hovered)
+      }
+
+      Keys.onPressed: function(event) {
+        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter
+            || event.key === Qt.Key_Space || event.key === Qt.Key_Down) {
+          popup.opened ? popup.close() : popup.open()
+          event.accepted = true
+        } else if (event.key === Qt.Key_Escape && popup.opened) {
+          popup.close(); event.accepted = true
+        }
+      }
+
+      Text {
+        textFormat: Text.PlainText
+        anchors.left: parent.left
+        anchors.right: chevron.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: trigger.borderLeft + Style.spacing.controlPaddingX
+        anchors.rightMargin: trigger.borderRight + Style.spacing.md
+        text: root.currentLabel() || root.triggerLabel || root.placeholderText
+        color: (root.currentLabel() || root.triggerLabel) ? root.foreground : Qt.darker(root.foreground, 1.5)
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.body
+        elide: Text.ElideRight
+      }
+
+      Text {
+        id: chevron
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: trigger.borderRight + Style.spacing.controlGap
+        text: "󰅀"
+        color: Qt.darker(root.foreground, 1.2)
+        font.family: root.fontFamily
+        font.pixelSize: Style.font.body
+      }
+
+      MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+          trigger.forceActiveFocus()
+          popup.opened ? popup.close() : popup.open()
+        }
+      }
+
+      QQC.Popup {
+        id: popup
+        x: 0
+        y: trigger.height + Style.spacing.xxs
+        width: trigger.width
+        implicitHeight: Math.max(root.popupMinHeight,
+                                 Math.min(resultList.contentHeight + Style.space(50),
+                                          root.popupRowHeight * 6 + 5 * Style.spacing.labelGap + Style.space(50)))
+        padding: Style.spacing.hairline
+        leftPadding: Border.left(root.popupBorderSpec) + Style.spacing.hairline
+        rightPadding: Border.right(root.popupBorderSpec) + Style.spacing.hairline
+        topPadding: Border.top(root.popupBorderSpec) + Style.spacing.hairline
+        bottomPadding: Border.bottom(root.popupBorderSpec) + Style.spacing.hairline
+        focus: true
+
+        background: BorderSurface {
+          color: root.background
+          borderSpec: root.popupBorderSpec
+          radius: Style.cornerRadius
+        }
+
+        onOpened: {
+          searchField.text = ""
+          root.recomputeFiltered()
+          Qt.callLater(function() { searchField.forceActiveFocus() })
+        }
+        onClosed: searchField.text = ""
+
+        contentItem: Column {
+          spacing: 0
+
+          Item {
+            id: searchHeader
+            width: parent.width
+            height: root.popupRowHeight + Style.spacing.controlPaddingX
+
+            TextField {
+              id: searchField
+              anchors.fill: parent
+              anchors.margins: Style.spacing.md
+              placeholderText: root.placeholderText
+              foreground: root.foreground
+              accent: root.accent
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.body
+
+              onTextChanged: {
+                root.recomputeFiltered()
+                if (resultList.count > 0) resultList.currentIndex = 0
+              }
+
+              Keys.onPressed: function(event) {
+                if (event.key === Qt.Key_Escape) {
+                  popup.close(); event.accepted = true
+                } else if (event.key === Qt.Key_Down) {
+                  if (resultList.count > 0) {
+                    resultList.currentIndex = 0
+                    resultList.forceActiveFocus()
+                  }
+                  event.accepted = true
+                } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                  if (resultList.count > 0) {
+                    resultList.currentIndex = 0
+                    resultList.selectCurrent()
+                  }
+                  event.accepted = true
+                }
+              }
+            }
+          }
+
+          Rectangle {
+            width: parent.width
+            height: 1
+            color: Util.alpha(root.foreground, 0.10)
+          }
+
+          Item {
+            width: parent.width
+            height: popup.height - searchHeader.height - Style.spacing.xxs - 1
+
+            Text {
+              textFormat: Text.PlainText
+              anchors.centerIn: parent
+              visible: resultList.count === 0
+              text: root.emptyText
+              color: Qt.darker(root.foreground, 1.6)
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.body
+            }
+
+            ListView {
+              id: resultList
+              anchors.fill: parent
+              spacing: Style.spacing.labelGap
+              clip: true
+              boundsBehavior: Flickable.StopAtBounds
+              model: root.filtered
+              currentIndex: -1
+              keyNavigationEnabled: false
+
+              function selectCurrent() {
+                if (currentIndex < 0 || currentIndex >= root.filtered.length) return
+                var v = root.optionValue(root.filtered[currentIndex])
+                root.value = v
+                root.changed(v)
+                popup.close()
+              }
+
+              Keys.priority: Keys.BeforeItem
+              Keys.onPressed: function(event) {
+                if (event.key === Qt.Key_Escape) {
+                  popup.close(); event.accepted = true
+                } else if (event.key === Qt.Key_Down || event.text === "j") {
+                  if (resultList.currentIndex >= resultList.count - 1) {
+                    event.accepted = true; return
+                  }
+                  resultList.currentIndex = resultList.currentIndex + 1
+                  event.accepted = true
+                } else if (event.key === Qt.Key_Up || event.text === "k") {
+                  if (resultList.currentIndex <= 0) {
+                    searchField.forceActiveFocus()
+                    event.accepted = true; return
+                  }
+                  resultList.currentIndex = resultList.currentIndex - 1
+                  event.accepted = true
+                } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+                  resultList.selectCurrent(); event.accepted = true
+                }
+              }
+
+              delegate: Rectangle {
+                required property var modelData
+                required property int index
+                width: resultList.width
+                height: Math.max(root.popupRowHeight, rowContent.implicitHeight + Style.spacing.rowPaddingX)
+                color: index === resultList.currentIndex
+                  ? Style.hoverFillFor(root.foreground, root.accent)
+                  : "transparent"
+
+                Column {
+                  id: rowContent
+                  anchors.left: parent.left
+                  anchors.right: parent.right
+                  anchors.verticalCenter: parent.verticalCenter
+                  anchors.leftMargin: Style.spacing.controlPaddingX
+                  anchors.rightMargin: Style.spacing.controlPaddingX
+                  spacing: Style.spacing.xxs
+
+                  Text {
+                    textFormat: Text.PlainText
+                    text: root.optionLabel(modelData)
+                    color: index === resultList.currentIndex ? Style.hoverStateColor(root.foreground, root.accent) : root.foreground
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.body
+                    elide: Text.ElideRight
+                    width: parent.width
+                  }
+                  Text {
+                    textFormat: Text.PlainText
+                    visible: text !== ""
+                    text: root.optionDescription(modelData)
+                    color: Qt.darker(root.foreground, 1.5)
+                    font.family: root.fontFamily
+                    font.pixelSize: Style.font.caption
+                    elide: Text.ElideRight
+                    width: parent.width
+                  }
+                }
+
+                MouseArea {
+                  anchors.fill: parent
+                  hoverEnabled: true
+                  cursorShape: Qt.PointingHandCursor
+                  onPositionChanged: resultList.currentIndex = parent.index
+                  onClicked: resultList.selectCurrent()
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/ui/boot/Ui/SizedImage.qml

@@ -0,0 +1,125 @@
+import QtQuick
+
+// An image fitted inside this item, or with `crop` covering it, preserving
+// its aspect ratio, and decoded at about the size it is drawn, in physical
+// pixels, instead of at the file's own size. A 2560x1440 screenshot shown as
+// a 40px thumbnail would otherwise hold a 14 MB bitmap for as long as the
+// thumbnail exists.
+//
+// The inner Image is not PreserveAspectFit or PreserveAspectCrop on purpose.
+// With either, Qt scales the decode to cover sourceSize, which upscales an
+// image narrower than the box: a 400x10 strip in a 400x400 box would decode at
+// 16000x400. Without them, sourceSize is a bound Qt only ever shrinks the
+// image to fit, so the bitmap is never larger than the bound or the file.
+// This item then places the decoded image the way the fill mode would. A crop
+// bounds the decode at twice the box, so images up to 2:1 still cover it at
+// full resolution.
+//
+// That only holds for raster images. Qt renders an SVG at exactly sourceSize
+// when the fill mode is not a preserving one, which would stretch it, and with
+// a preserving one it covers the box like any other image. An SVG therefore
+// keeps Qt's own handling: rendered at its intrinsic size and fitted or
+// cropped on draw.
+//
+// The image waits until the item has been laid out, so nothing is decoded at
+// native size first.
+Item {
+  id: root
+
+  property url url: ""
+  property bool crop: false
+  property int horizontalAlignment: Image.AlignHCenter
+  property int verticalAlignment: Image.AlignVCenter
+  // Left and right swap in a mirrored (right-to-left) layout, as they do for
+  // a plain Image.
+  readonly property int effectiveHorizontalAlignment: !LayoutMirroring.enabled ? horizontalAlignment
+    : horizontalAlignment === Image.AlignLeft ? Image.AlignRight
+    : horizontalAlignment === Image.AlignRight ? Image.AlignLeft
+    : horizontalAlignment
+  property bool asynchronous: true
+  readonly property alias status: image.status
+  readonly property bool sized: width > 0 && height > 0
+  // Clipboard captures name the file after the MIME subtype, as in .svg+xml,
+  // and Util.fileUrl percent-encodes the plus.
+  readonly property bool scalable: /(\.svgz?|\.svg(\+|%2B)xml)([?#].*)?$|^data:image\/svg/i.test(String(url))
+  readonly property real reach: crop ? 2 : 1
+  // A strip thin enough that fitting it in the bound rounds its short side
+  // to nothing decodes empty. It is decoded again covering a single pixel
+  // instead: one pixel across and its aspect ratio long, still a sliver of
+  // the file however large that is.
+  // Remembered by URL rather than as a flag to reset, so switching to another
+  // image can't carry the fallback over to it.
+  property string thinUrl: ""
+  readonly property bool thinDecode: thinUrl !== "" && thinUrl === String(url)
+  property string failedUrl: ""
+  property string recheckedUrl: ""
+  onUrlChanged: {
+    failedUrl = ""
+    recheckedUrl = ""
+  }
+
+  clip: crop
+
+  Image {
+    id: image
+
+    readonly property real placedScale: implicitWidth > 0 && implicitHeight > 0
+      ? (root.crop ? Math.max(root.width / implicitWidth, root.height / implicitHeight)
+                   : Math.min(root.width / implicitWidth, root.height / implicitHeight))
+      : 0
+
+    width: root.scalable ? root.width : implicitWidth * placedScale
+    height: root.scalable ? root.height : implicitHeight * placedScale
+    x: root.scalable || root.effectiveHorizontalAlignment === Image.AlignLeft ? 0
+      : root.effectiveHorizontalAlignment === Image.AlignRight ? root.width - width
+      : (root.width - width) / 2
+    y: root.scalable || root.verticalAlignment === Image.AlignTop ? 0
+      : root.verticalAlignment === Image.AlignBottom ? root.height - height
+      : (root.height - height) / 2
+
+    source: root.sized ? root.url : ""
+    readonly property bool bounded: root.sized && !root.scalable && !root.thinDecode
+    sourceSize.width: bounded ? Math.ceil(root.width * root.reach * Screen.devicePixelRatio) : root.thinDecode ? 1 : 0
+    sourceSize.height: bounded ? Math.ceil(root.height * root.reach * Screen.devicePixelRatio) : root.thinDecode ? 1 : 0
+    onStatusChanged: {
+      var loaded = String(source)
+      if (root.thinDecode) {
+        if (status === Image.Error) {
+          root.thinUrl = ""
+        } else if (status === Image.Ready && root.recheckedUrl !== loaded) {
+          // The fallback's bitmap has the image's aspect ratio. If fitting
+          // that in the bound keeps at least a pixel across, the bounded load
+          // failed for another reason, such as art that only appeared later,
+          // so load it bounded again. Only once per URL, so a disagreement
+          // about rounding can't flip back and forth.
+          var boundWidth = Math.ceil(root.width * root.reach * Screen.devicePixelRatio)
+          var boundHeight = Math.ceil(root.height * root.reach * Screen.devicePixelRatio)
+          var across = Math.min(boundWidth / implicitWidth, boundHeight / implicitHeight) * Math.min(implicitWidth, implicitHeight)
+          if (across >= 1) {
+            root.recheckedUrl = loaded
+            root.thinUrl = ""
+          }
+        }
+        return
+      }
+      if (!bounded) return
+      if (status === Image.Ready && (implicitWidth === 0 || implicitHeight === 0)) {
+        root.thinUrl = loaded
+      } else if (status === Image.Error && root.failedUrl !== loaded) {
+        // Some decoders fail outright where a thin PNG comes back empty. Try
+        // the fallback once per URL, so a file that is simply missing does
+        // not keep reloading.
+        root.failedUrl = loaded
+        root.thinUrl = loaded
+      }
+    }
+    // A thin decode covers its 1x1 bound, so its short side is one pixel.
+    fillMode: root.scalable || root.thinDecode
+      ? (root.crop || root.thinDecode ? Image.PreserveAspectCrop : Image.PreserveAspectFit)
+      : Image.Stretch
+    horizontalAlignment: root.horizontalAlignment
+    verticalAlignment: root.verticalAlignment
+    asynchronous: root.asynchronous
+    smooth: root.smooth
+  }
+}