From 9a38cacc05177304c4771f812ff5f20ce7955e1f Mon Sep 17 00:00:00 2001 From: rope Date: Fri, 12 Jun 2026 10:23:35 +0100 Subject: [PATCH] quickshell: sliding selection pill for power profile buttons Co-Authored-By: Claude Fable 5 --- settings/quickshell.nix | 110 +++++++++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 42 deletions(-) diff --git a/settings/quickshell.nix b/settings/quickshell.nix index 8d179ff..04fa476 100644 --- a/settings/quickshell.nix +++ b/settings/quickshell.nix @@ -1749,54 +1749,80 @@ in font.pixelSize: 11 } - Row { + Item { width: parent.width - spacing: 4 + height: 36 - Repeater { - model: [ - { name: "power-saver", profile: PowerProfile.PowerSaver, label: "\u{f0425}", tip: "Saver" }, - { name: "balanced", profile: PowerProfile.Balanced, label: "\u{f0376}", tip: "Balanced" }, - { name: "performance", profile: PowerProfile.Performance, label: "\u{f0e0e}", tip: "Performance" } - ] + // Sliding selection pill — glides between + // profiles instead of each button flipping. + Rectangle { + id: profilePill + readonly property int selIdx: + batteryWidget.powerProfile === "power-saver" ? 0 + : batteryWidget.powerProfile === "performance" ? 2 + : 1 + width: (parent.width - 8) / 3 + height: 36 + radius: 6 + color: Theme.base02 + border.width: 1 + border.color: Theme.base03 + x: selIdx * (width + 4) + Behavior on x { + NumberAnimation { duration: 250; easing.type: Easing.OutExpo } + } + } - Rectangle { - required property var modelData - width: (parent.width - 8) / 3 - height: 36 - radius: 6 - color: batteryWidget.powerProfile === modelData.name - ? Theme.base02 : profMouse.containsMouse - ? Theme.base01 : "transparent" - Behavior on color { ColorAnimation { duration: 120 } } - border.width: batteryWidget.powerProfile === modelData.name ? 1 : 0 - border.color: Theme.base03 + Row { + anchors.fill: parent + spacing: 4 - Column { - anchors.centerIn: parent - spacing: 1 - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: modelData.label - color: batteryWidget.powerProfile === modelData.name - ? Theme.base0D : Theme.base05 - font.family: Theme.fontFamily - font.pixelSize: 14 + Repeater { + model: [ + { name: "power-saver", profile: PowerProfile.PowerSaver, label: "\u{f0425}", tip: "Saver" }, + { name: "balanced", profile: PowerProfile.Balanced, label: "\u{f0376}", tip: "Balanced" }, + { name: "performance", profile: PowerProfile.Performance, label: "\u{f0e0e}", tip: "Performance" } + ] + + Rectangle { + required property var modelData + width: (parent.width - 8) / 3 + height: 36 + radius: 6 + color: profMouse.containsMouse && batteryWidget.powerProfile !== modelData.name + ? Theme.base01 : "transparent" + Behavior on color { ColorAnimation { duration: 120 } } + + Column { + anchors.centerIn: parent + spacing: 1 + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: modelData.label + color: batteryWidget.powerProfile === modelData.name + ? Theme.base0D : Theme.base05 + Behavior on color { ColorAnimation { duration: 200 } } + font.family: Theme.fontFamily + font.pixelSize: 14 + } + Text { + anchors.horizontalCenter: parent.horizontalCenter + text: modelData.tip + color: batteryWidget.powerProfile === modelData.name + ? Theme.base05 : Theme.base04 + Behavior on color { ColorAnimation { duration: 200 } } + font.family: Theme.fontFamily + font.pixelSize: 9 + } } - Text { - anchors.horizontalCenter: parent.horizontalCenter - text: modelData.tip - color: Theme.base04 - font.family: Theme.fontFamily - font.pixelSize: 9 - } - } - MouseArea { - id: profMouse - anchors.fill: parent - hoverEnabled: true - onClicked: PowerProfiles.profile = modelData.profile + MouseArea { + id: profMouse + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: PowerProfiles.profile = modelData.profile + } } } }