Panel tweaks

This commit is contained in:
David Heinemeier Hansson
2026-05-18 15:30:29 +02:00
parent 0fe985b45d
commit cddc18b1cd
8 changed files with 29 additions and 24 deletions
+5 -3
View File
@@ -21,6 +21,7 @@ Rectangle {
// separately from real activeFocus. Visuals match the activeFocus look // separately from real activeFocus. Visuals match the activeFocus look
// (foreground 2px border) so cursor and Tab focus read the same. // (foreground 2px border) so cursor and Tab focus read the same.
property bool hasCursor: false property bool hasCursor: false
property bool borderlessHighlight: false
property color foreground: Color.foreground property color foreground: Color.foreground
property color background: Color.background property color background: Color.background
@@ -42,11 +43,12 @@ Rectangle {
color: selected color: selected
? Qt.rgba(accent.r, accent.g, accent.b, 0.18) ? Qt.rgba(accent.r, accent.g, accent.b, 0.18)
: (mouse.containsMouse ? Style.hotFill : background) : ((mouse.containsMouse || hasCursor) ? Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12) : background)
border.color: selected border.color: selected
? accent ? accent
: (activeFocus || hasCursor ? foreground : Qt.rgba(foreground.r, foreground.g, foreground.b, 0.4)) : (activeFocus ? foreground : Qt.rgba(foreground.r, foreground.g, foreground.b, 0.4))
border.width: selected ? 2 : (activeFocus || hasCursor ? 2 : 1) border.width: borderlessHighlight ? (activeFocus ? 2 : 0)
: (selected ? 2 : (activeFocus || hasCursor ? 2 : 1))
Behavior on color { ColorAnimation { duration: 100 } } Behavior on color { ColorAnimation { duration: 100 } }
+2
View File
@@ -20,6 +20,8 @@ import QtQuick
PillButton { PillButton {
id: root id: root
cursorBordered: false
signal hovered(bool isHovered) signal hovered(bool isHovered)
HoverHandler { HoverHandler {
+4 -3
View File
@@ -13,11 +13,12 @@ Rectangle {
property bool current: false property bool current: false
property color foreground: "#cacccc" property color foreground: "#cacccc"
property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18) property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12)
property color currentFill: fill
radius: Style.cornerRadius radius: Style.cornerRadius
color: (hasCursor || current) ? fill : "transparent" color: hasCursor ? fill : (current ? currentFill : "transparent")
border.width: hasCursor ? 1 : 0 border.width: 0
border.color: foreground border.color: foreground
Behavior on color { Behavior on color {
+2 -1
View File
@@ -40,6 +40,7 @@ Rectangle {
// hits them. The hot/cursor state paints its own 1px border, so changing // hits them. The hot/cursor state paints its own 1px border, so changing
// this doesn't affect panel-pill visuals. // this doesn't affect panel-pill visuals.
property bool bordered: false property bool bordered: false
property bool cursorBordered: true
activeFocusOnTab: focusable activeFocusOnTab: focusable
Keys.onReturnPressed: if (focusable) root.clicked() Keys.onReturnPressed: if (focusable) root.clicked()
@@ -93,7 +94,7 @@ Rectangle {
: hot ? hoverBackground : hot ? hoverBackground
: (active ? activeBackground : background) : (active ? activeBackground : background)
border.width: _showFocusRing ? Style.focusBorderWidth border.width: _showFocusRing ? Style.focusBorderWidth
: hot ? 1 : hot ? (cursorBordered ? 1 : 0)
: (bordered ? 1 : 0) : (bordered ? 1 : 0)
border.color: _showFocusRing ? Style.focusBorderColor : foreground border.color: _showFocusRing ? Style.focusBorderColor : foreground
+11 -11
View File
@@ -97,7 +97,7 @@ Item {
property int selectedIndex: -1 property int selectedIndex: -1
readonly property color activeFill: bar readonly property color activeFill: bar
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18) ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12)
: "transparent" : "transparent"
function sectionCount(section) { function sectionCount(section) {
@@ -450,7 +450,7 @@ Item {
hasCursor: root.focusSection === "output" && root.selectedIndex === -1 hasCursor: root.focusSection === "output" && root.selectedIndex === -1
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(outputSliderRow) onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(outputSliderRow)
foreground: root.bar.foreground foreground: root.bar.foreground
fill: root.activeFill fill: "transparent"
Row { Row {
id: outputSliderInner id: outputSliderInner
@@ -567,7 +567,7 @@ Item {
hasCursor: root.focusSection === "input" && root.selectedIndex === -1 hasCursor: root.focusSection === "input" && root.selectedIndex === -1
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(inputSliderRow) onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(inputSliderRow)
foreground: root.bar.foreground foreground: root.bar.foreground
fill: root.activeFill fill: "transparent"
Row { Row {
id: inputSliderInner id: inputSliderInner
@@ -700,8 +700,8 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 10 anchors.leftMargin: 6
anchors.rightMargin: 10 anchors.rightMargin: 6
spacing: 8 spacing: 8
Text { Text {
@@ -709,7 +709,7 @@ Item {
color: root.bar.foreground color: root.bar.foreground
font.family: root.bar.fontFamily font.family: root.bar.fontFamily
font.pixelSize: 14 font.pixelSize: 14
width: 18 width: 22
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -720,7 +720,7 @@ Item {
font.family: root.bar.fontFamily font.family: root.bar.fontFamily
font.pixelSize: 12 font.pixelSize: 12
elide: Text.ElideRight elide: Text.ElideRight
width: parent.width - 18 - 14 - 16 width: parent.width - 22 - 14 - 16
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -766,8 +766,8 @@ Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 10 anchors.leftMargin: 6
anchors.rightMargin: 10 anchors.rightMargin: 6
spacing: 8 spacing: 8
Text { Text {
@@ -775,7 +775,7 @@ Item {
color: root.bar.foreground color: root.bar.foreground
font.family: root.bar.fontFamily font.family: root.bar.fontFamily
font.pixelSize: 14 font.pixelSize: 14
width: 18 width: 22
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@@ -786,7 +786,7 @@ Item {
font.family: root.bar.fontFamily font.family: root.bar.fontFamily
font.pixelSize: 12 font.pixelSize: 12
elide: Text.ElideRight elide: Text.ElideRight
width: parent.width - 18 - 14 - 16 width: parent.width - 22 - 14 - 16
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
+2 -4
View File
@@ -85,7 +85,7 @@ Item {
property string focusedKnownAddress: "" property string focusedKnownAddress: ""
readonly property color activeFill: bar readonly property color activeFill: bar
? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18) ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12)
: "transparent" : "transparent"
function sectionCount(section) { function sectionCount(section) {
@@ -374,7 +374,6 @@ Item {
tooltipText: !root.adapter ? "" : !root.adapter.enabled ? "Bluetooth is off" tooltipText: !root.adapter ? "" : !root.adapter.enabled ? "Bluetooth is off"
: root.adapter.discovering ? "Stop scanning" : "Scan for devices" : root.adapter.discovering ? "Stop scanning" : "Scan for devices"
pillEnabled: root.adapter !== null && root.adapter.enabled pillEnabled: root.adapter !== null && root.adapter.enabled
active: root.adapter && root.adapter.discovering
onActivated: if (root.adapter) root.adapter.discovering = !root.adapter.discovering onActivated: if (root.adapter) root.adapter.discovering = !root.adapter.discovering
} }
@@ -389,7 +388,6 @@ Item {
pillIndex: 2 pillIndex: 2
iconText: root.adapter && root.adapter.enabled ? "󰂯" : "󰂲" iconText: root.adapter && root.adapter.enabled ? "󰂯" : "󰂲"
tooltipText: root.adapter && root.adapter.enabled ? "Turn Bluetooth off" : "Turn Bluetooth on" tooltipText: root.adapter && root.adapter.enabled ? "Turn Bluetooth off" : "Turn Bluetooth on"
active: root.adapter && root.adapter.enabled
onActivated: if (root.adapter) root.adapter.enabled = !root.adapter.enabled onActivated: if (root.adapter) root.adapter.enabled = !root.adapter.enabled
} }
} }
@@ -514,7 +512,7 @@ Item {
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(row) onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(row)
current: isConnected current: isConnected
foreground: root.bar.foreground foreground: root.bar.foreground
fill: root.activeFill fill: isConnected ? root.activeFill : "transparent"
// 0 idle, 1 connecting, 2 disconnecting, 3 pairing, 4 failed. // 0 idle, 1 connecting, 2 disconnecting, 3 pairing, 4 failed.
property int pendingAction: 0 property int pendingAction: 0
+2 -1
View File
@@ -414,7 +414,7 @@ Item {
hasCursor: root.focusSection === "brightness" && root.selectedIndex === -1 hasCursor: root.focusSection === "brightness" && root.selectedIndex === -1
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(brightnessRow) onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(brightnessRow)
foreground: root.bar.foreground foreground: root.bar.foreground
fill: Qt.rgba(root.bar.foreground.r, root.bar.foreground.g, root.bar.foreground.b, 0.18) fill: "transparent"
Row { Row {
id: brightnessInner id: brightnessInner
@@ -511,6 +511,7 @@ Item {
fontSize: 11 fontSize: 11
selected: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData) selected: root.normalizeScale(root.monitorScale) === root.normalizeScale(modelData)
hasCursor: root.focusSection === "scale" && root.selectedIndex === index hasCursor: root.focusSection === "scale" && root.selectedIndex === index
borderlessHighlight: true
onClicked: root.setScale(modelData) onClicked: root.setScale(modelData)
onHovered: function(h) { onHovered: function(h) {
if (h) { if (h) {
+1 -1
View File
@@ -68,7 +68,7 @@ Item {
// Mouse hover and keyboard nav both mutate this state at the root; items // Mouse hover and keyboard nav both mutate this state at the root; items
// never read containsMouse for visuals. See CursorSurface for the // never read containsMouse for visuals. See CursorSurface for the
// shared chrome (fill / border) shared by NetworkRow and DnsProviderPill. // shared chrome (fill / border) shared by NetworkRow and DnsProviderPill.
readonly property color activeFill: bar ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.18) : "transparent" readonly property color activeFill: bar ? Qt.rgba(bar.foreground.r, bar.foreground.g, bar.foreground.b, 0.12) : "transparent"
// The panel below is its own layer-shell with Exclusive keyboard focus, // The panel below is its own layer-shell with Exclusive keyboard focus,
// so Hyprland grants focus when the surface is mapped (popupOpen flips // so Hyprland grants focus when the surface is mapped (popupOpen flips