Panel UI atoms, keyboard-driven audio + bluetooth, dev gallery

2026-05-17 22:07:51 -04:00
parent d73690b945
commit 408dada45d
11 changed files with 2078 additions and 713 deletions
@@ -0,0 +1,64 @@
+import QtQuick
+
+// Small (22×22 by default) icon button used at the right edge of panel rows
+// for inline actions — forget network, confirm passphrase, unpair device,
+// etc. Two visual modes are supported via `hoverColor`:
+//   - default: hoverColor === foreground → subtle foreground-tint hover
+//   - urgent:  hoverColor === bar.urgent → red-tint hover for destructive
+//              actions like forget/unpair
+//
+// `enabled` gates clicks and dims the icon. The component owns its own
+// hover state visuals; mouse hover does NOT update any panel cursor state
+// here because action buttons are not cursor targets — the row they live
+// in is.
+Rectangle {
+  id: root
+
+  property string iconText: ""
+  property string tooltipText: ""
+  property color foreground: "#cacccc"
+  property color hoverColor: foreground
+  property color panelBackground: "#101315"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 14
+  property real size: 22
+
+  signal clicked()
+
+  implicitWidth: size
+  implicitHeight: size
+  radius: 4
+
+  color: mouse.containsMouse && root.enabled
+    ? Qt.rgba(hoverColor.r, hoverColor.g, hoverColor.b, 0.20)
+    : "transparent"
+
+  Behavior on color { ColorAnimation { duration: 60 } }
+
+  Text {
+    anchors.centerIn: parent
+    text: root.iconText
+    color: root.enabled
+      ? (mouse.containsMouse ? root.hoverColor : Qt.darker(root.foreground, 1.3))
+      : Qt.darker(root.foreground, 2.0)
+    font.family: root.fontFamily
+    font.pixelSize: root.fontSize
+  }
+
+  MouseArea {
+    id: mouse
+    anchors.fill: parent
+    hoverEnabled: true
+    cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
+    enabled: root.enabled
+    onClicked: root.clicked()
+  }
+
+  PanelToolTip {
+    visible: root.tooltipText !== "" && mouse.containsMouse
+    text: root.tooltipText
+    panelForeground: root.foreground
+    panelBackground: root.panelBackground
+    fontFamily: root.fontFamily
+  }
+}
@@ -0,0 +1,17 @@
+import QtQuick
+
+// Small-caps-style label that introduces a panel section ("DNS provider",
+// "Wi-Fi networks", "Output device", "Paired devices"). Sits between a
+// PanelSeparator and the content rows.
+Text {
+  id: root
+
+  property color foreground: "#cacccc"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 10
+
+  color: Qt.darker(foreground, 1.4)
+  font.family: fontFamily
+  font.pixelSize: fontSize
+  font.bold: true
+}
@@ -0,0 +1,17 @@
+import QtQuick
+
+// 1px horizontal divider for panel sections. The alpha-on-foreground tint
+// keeps the rule legible against the panel background without competing
+// with text or borders.
+Rectangle {
+  id: root
+
+  property color foreground: "#cacccc"
+  property real strength: 0.12
+
+  width: parent ? parent.width : implicitWidth
+  implicitWidth: 100
+  implicitHeight: 1
+  height: 1
+  color: Qt.rgba(foreground.r, foreground.g, foreground.b, strength)
+}
@@ -0,0 +1,45 @@
+import QtQuick
+import QtQuick.Controls
+
+// Styled wrapper around Qt Quick Controls ToolTip. Drop-in: declare inside
+// the hovered item and bind `visible` to the hover state, e.g.
+//   Common.PanelToolTip {
+//     visible: mouse.containsMouse
+//     text: "Forget network"
+//     panelForeground: bar.foreground
+//     panelBackground: bar.background
+//     fontFamily: bar.fontFamily
+//   }
+//
+// Property names are prefixed `panel*` to avoid clashing with ToolTip's
+// built-in `background`/`font` properties.
+ToolTip {
+  id: root
+
+  property color panelForeground: "#cacccc"
+  property color panelBackground: "#101315"
+  property string fontFamily: "JetBrainsMono Nerd Font"
+  property real fontSize: 11
+
+  delay: 400
+  padding: 0
+
+  background: Rectangle {
+    color: root.panelBackground
+    border.color: root.panelForeground
+    border.width: 1
+    radius: 0
+    opacity: 0.97
+  }
+
+  contentItem: Text {
+    text: root.text
+    color: root.panelForeground
+    font.family: root.fontFamily
+    font.pixelSize: root.fontSize
+    leftPadding: 10
+    rightPadding: 10
+    topPadding: 6
+    bottomPadding: 6
+  }
+}
@@ -22,6 +22,11 @@ Rectangle {
  property bool leftAlign: false
  property color activeBackground: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18)

+  // Keyboard cursor flag. When true, the pill renders the same fill + border
+  // as a mouse hover — so j/k navigation and pointer hover are visually
+  // indistinguishable. Default false; bind from a panel's cursor state.
+  property bool hasCursor: false
+
  ToolTip {
    visible: root.tooltipText !== "" && mouseArea.containsMouse
    text: root.tooltipText
@@ -54,7 +59,17 @@ Rectangle {
  implicitWidth: row.implicitWidth + horizontalPadding * 2
  implicitHeight: row.implicitHeight + verticalPadding * 2
  radius: 4
-  color: mouseArea.pressed ? pressedBackground : (mouseArea.containsMouse ? hoverBackground : (active ? activeBackground : background))
+
+  // Hot = mouse hover OR keyboard cursor. Pressed wins over both; otherwise
+  // hot beats `active` (so a cursor on an already-active pill still reads
+  // as hovered, matching CursorSurface's behaviour for navigable rows).
+  readonly property bool hot: mouseArea.containsMouse || hasCursor
+
+  color: mouseArea.pressed ? pressedBackground
+    : hot ? hoverBackground
+    : (active ? activeBackground : background)
+  border.width: hot ? 1 : 0
+  border.color: foreground

  Behavior on color {
    ColorAnimation { duration: 120 }