flea-qml 0.0.0-stage → 0.2.0

package/ui/boot/Ui/Dropdown.qml

@@ -0,0 +1,245 @@
+import QtQuick
+import QtQuick.Controls
+import qs.Commons
+import qs.Commons as Commons
+
+// Themed single-select dropdown. Trigger row paints with the kit's focus
+// chrome; the popup anchors below and uses Commons.Color.popups.background +
+// Commons.Color.popups.border so it reads as a panel surface rather than the
+// platform-native ComboBox look.
+//
+// `options` accepts either a plain string[] or an array of
+// { value, label } objects (label is what we render; value is what we
+// emit). Mixing is fine — each row is interpreted independently.
+//
+// Keyboard: Tab to focus the trigger, Enter/Space opens, Esc closes,
+// j/k or Up/Down walks options inside the open popup, Enter selects.
+// A sibling SearchableDropdown reuses the same visuals but adds an
+// embedded filter input — keep the two separate so each stays simple.
+Item {
+  id: root
+
+  property string label: ""
+  property string value: ""
+  property var options: []
+
+  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 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 (its embedded ListView is active) and suspend its
+  // own keyCatcher so j/k inside the popup don't double-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 currentLabel() {
+    for (var i = 0; i < options.length; i++) {
+      if (optionValue(options[i]) === value) return optionLabel(options[i])
+    }
+    return value
+  }
+
+  implicitWidth: Style.spacing.dropdownWidth
+  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()
+        color: root.foreground
+        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()
+        }
+      }
+
+      Popup {
+        id: popup
+        x: 0
+        y: trigger.height + Style.spacing.xxs
+        width: trigger.width
+        implicitHeight: Math.min(root.options.length * root.popupRowHeight + Math.max(0, root.options.length - 1) * Style.spacing.labelGap + Style.spacing.xxs,
+                                 root.popupRowHeight * 8 + 7 * Style.spacing.labelGap + Style.spacing.xxs)
+        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: {
+          optionList.currentIndex = Math.max(0, optionList.indexOfValue(root.value))
+          optionList.forceActiveFocus()
+        }
+
+        contentItem: ListView {
+          id: optionList
+          spacing: Style.spacing.labelGap
+
+          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") {
+              optionList.currentIndex = Math.min(root.options.length - 1, optionList.currentIndex + 1)
+              event.accepted = true
+            } else if (event.key === Qt.Key_Up || event.text === "k") {
+              optionList.currentIndex = Math.max(0, optionList.currentIndex - 1)
+              event.accepted = true
+            } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
+              optionList.selectCurrent(); event.accepted = true
+            }
+          }
+          implicitHeight: contentHeight
+          clip: true
+          boundsBehavior: Flickable.StopAtBounds
+          model: root.options
+          currentIndex: -1
+
+          function indexOfValue(v) {
+            for (var i = 0; i < root.options.length; i++)
+              if (root.optionValue(root.options[i]) === v) return i
+            return -1
+          }
+
+          function selectCurrent() {
+            if (currentIndex < 0 || currentIndex >= root.options.length) return
+            var v = root.optionValue(root.options[currentIndex])
+            root.value = v
+            root.changed(v)
+            popup.close()
+          }
+
+          delegate: Rectangle {
+            required property var modelData
+            required property int index
+            width: optionList.width
+            height: root.popupRowHeight
+            color: index === optionList.currentIndex
+              ? Style.hoverFillFor(root.foreground, root.accent)
+              : "transparent"
+
+            Text {
+              textFormat: Text.PlainText
+              anchors.left: parent.left
+              anchors.right: parent.right
+              anchors.verticalCenter: parent.verticalCenter
+              anchors.leftMargin: Style.spacing.controlPaddingX
+              anchors.rightMargin: Style.spacing.controlPaddingX
+              text: root.optionLabel(modelData)
+              color: index === optionList.currentIndex ? Style.hoverStateColor(root.foreground, root.accent) : root.foreground
+              font.family: root.fontFamily
+              font.pixelSize: Style.font.body
+              elide: Text.ElideRight
+            }
+
+            MouseArea {
+              anchors.fill: parent
+              hoverEnabled: true
+              cursorShape: Qt.PointingHandCursor
+              onPositionChanged: optionList.currentIndex = parent.index
+              onClicked: optionList.selectCurrent()
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/ui/boot/Ui/FilterInput.qml

@@ -0,0 +1,26 @@
+import QtQuick
+
+// The search line of a keyboard-driven panel. It is a TextInput because Qt
+// hands input-method text (fcitx5 composing Japanese, Chinese or Korean) only
+// to text-input items; a Text fed by Keys.onPressed never receives it.
+TextInput {
+  id: root
+
+  // Sees every key first; whatever it leaves unaccepted is typed here.
+  property Item keyHandler: null
+
+  focus: true
+  clip: true
+  Keys.priority: Keys.BeforeItem
+  Keys.forwardTo: keyHandler ? [keyHandler] : []
+  // Alt and Super chords are shortcuts, never text.
+  Keys.onPressed: function(event) {
+    if (event.modifiers & (Qt.AltModifier | Qt.MetaModifier)) event.accepted = true
+  }
+
+  // Append-only: the panel owns Left and Right, so the caret stays hidden at
+  // the end. An empty delegate holds it hidden; cursorVisible returns on focus.
+  cursorDelegate: Item {}
+  onCursorPositionChanged: if (cursorPosition !== length) cursorPosition = length
+  onSelectedTextChanged: if (selectedText) deselect()
+}

package/ui/boot/Ui/IconContentBounds.qml

@@ -0,0 +1,141 @@
+import QtQuick
+import QtQuick.Shapes
+
+Item {
+  id: root
+
+  property Item sourceItem: null
+  property Item boundsParent: null
+  property rect mappedBounds: Qt.rect(0, 0, 0, 0)
+  visible: false
+
+  readonly property bool textItem: sourceItem instanceof Text
+  readonly property bool imageItem: sourceItem instanceof Image
+  readonly property bool shapeItem: sourceItem instanceof Shape
+  readonly property bool boxItem: sourceItem instanceof Rectangle
+    || sourceItem instanceof Canvas || sourceItem instanceof ShaderEffect
+
+  function unionBounds(a, b) {
+    if (b.width <= 0 || b.height <= 0) return a
+    if (a.width <= 0 || a.height <= 0) return b
+    var x = Math.min(a.x, b.x)
+    var y = Math.min(a.y, b.y)
+    return Qt.rect(x, y, Math.max(a.x + a.width, b.x + b.width) - x,
+      Math.max(a.y + a.height, b.y + b.height) - y)
+  }
+
+  function shapeBounds(item) {
+    var bounds = item.boundingRect
+    var sx = 1
+    var sy = 1
+    if (item.fillMode !== Shape.NoResize && item.implicitWidth > 0 && item.implicitHeight > 0) {
+      sx = item.width / item.implicitWidth
+      sy = item.height / item.implicitHeight
+      if (item.fillMode === Shape.PreserveAspectFit) sx = sy = Math.min(sx, sy)
+      else if (item.fillMode === Shape.PreserveAspectCrop) sx = sy = Math.max(sx, sy)
+    }
+    var spareWidth = item.width - item.implicitWidth * sx
+    var spareHeight = item.height - item.implicitHeight * sy
+    var x = item.horizontalAlignment === Shape.AlignHCenter ? spareWidth / 2
+      : (item.horizontalAlignment === Shape.AlignRight ? spareWidth : 0)
+    var y = item.verticalAlignment === Shape.AlignVCenter ? spareHeight / 2
+      : (item.verticalAlignment === Shape.AlignBottom ? spareHeight : 0)
+    return Qt.rect(x + bounds.x * sx, y + bounds.y * sy, bounds.width * sx, bounds.height * sy)
+  }
+
+  readonly property rect paintedBounds: {
+    var item = sourceItem
+    var bounds = Qt.rect(0, 0, 0, 0)
+    if (!item || !item.visible || item.opacity <= 0) return bounds
+    if (textItem) {
+      var ink = textMetrics.tightBoundingRect
+      var spareWidth = item.width - item.leftPadding - item.rightPadding - item.contentWidth
+      var textX = item.leftPadding
+      if (item.effectiveHorizontalAlignment === Text.AlignHCenter) textX += spareWidth / 2
+      else if (item.effectiveHorizontalAlignment === Text.AlignRight) textX += spareWidth
+      bounds = Qt.rect(textX + ink.x, item.baselineOffset + ink.y, ink.width, ink.height)
+    } else if (imageItem) {
+      var w = item.paintedWidth
+      var h = item.paintedHeight
+      var x = item.horizontalAlignment === Image.AlignLeft ? 0
+        : (item.horizontalAlignment === Image.AlignRight ? item.width - w : (item.width - w) / 2)
+      var y = item.verticalAlignment === Image.AlignTop ? 0
+        : (item.verticalAlignment === Image.AlignBottom ? item.height - h : (item.height - h) / 2)
+      if (item.fillMode === Image.PreserveAspectFit) {
+        bounds = Qt.rect(x, y, w, h)
+      } else if (item.fillMode === Image.Pad) {
+        var left = Math.max(0, x)
+        var top = Math.max(0, y)
+        bounds = Qt.rect(left, top, Math.max(0, Math.min(item.width, x + w) - left),
+          Math.max(0, Math.min(item.height, y + h) - top))
+      } else {
+        bounds = Qt.rect(0, 0, item.width, item.height)
+      }
+    } else if (shapeItem) {
+      bounds = shapeBounds(item)
+    } else if (boxItem) {
+      bounds = Qt.rect(0, 0, item.width, item.height)
+    }
+    for (var i = 0; i < childrenBounds.count; i++) {
+      var child = childrenBounds.itemAt(i)
+      if (child) bounds = unionBounds(bounds, child.mappedBounds)
+    }
+    if (item.clip && bounds.width > 0 && bounds.height > 0) {
+      var left = Math.max(0, bounds.x)
+      var top = Math.max(0, bounds.y)
+      bounds = Qt.rect(left, top,
+        Math.max(0, Math.min(item.width, bounds.x + bounds.width) - left),
+        Math.max(0, Math.min(item.height, bounds.y + bounds.height) - top))
+    }
+    return bounds
+  }
+
+  function updateMappedBounds() {
+    var b = paintedBounds
+    mappedBounds = sourceItem && boundsParent && b.width > 0 && b.height > 0
+      ? sourceItem.mapToItem(boundsParent, b.x, b.y, b.width, b.height)
+      : b
+  }
+
+  function configureSource() {
+    if (sourceItem instanceof Text) sourceItem.renderType = Text.CurveRendering
+    updateMappedBounds()
+  }
+
+  onPaintedBoundsChanged: updateMappedBounds()
+  onSourceItemChanged: configureSource()
+  onBoundsParentChanged: updateMappedBounds()
+  Component.onCompleted: updateMappedBounds()
+
+  TextMetrics {
+    id: textMetrics
+    font: root.textItem ? root.sourceItem.font : Qt.font({ pixelSize: 12 })
+    text: root.textItem ? root.sourceItem.text : ""
+  }
+
+  Connections {
+    target: root.sourceItem
+    function onXChanged() { root.updateMappedBounds() }
+    function onYChanged() { root.updateMappedBounds() }
+    function onWidthChanged() { root.updateMappedBounds() }
+    function onHeightChanged() { root.updateMappedBounds() }
+    function onScaleChanged() { root.updateMappedBounds() }
+    function onRotationChanged() { root.updateMappedBounds() }
+    function onTransformOriginChanged() { root.updateMappedBounds() }
+  }
+
+  Repeater {
+    id: childrenBounds
+    model: root.sourceItem ? root.sourceItem.children : []
+    delegate: Loader {
+      id: childLoader
+      required property var modelData
+      readonly property rect mappedBounds: item ? item.mappedBounds : Qt.rect(0, 0, 0, 0)
+      source: Qt.resolvedUrl("IconContentBounds.qml")
+      onLoaded: {
+        item.sourceItem = Qt.binding(function() { return childLoader.modelData })
+        item.boundsParent = Qt.binding(function() { return root.sourceItem })
+      }
+    }
+  }
+}