quickshell: sliding selection pill for power profile buttons

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-06-12 10:23:35 +01:00
parent bfcc54d0db
commit 9a38cacc05

View file

@ -1749,54 +1749,80 @@ in
font.pixelSize: 11 font.pixelSize: 11
} }
Row { Item {
width: parent.width width: parent.width
spacing: 4 height: 36
Repeater { // Sliding selection pill glides between
model: [ // profiles instead of each button flipping.
{ name: "power-saver", profile: PowerProfile.PowerSaver, label: "\u{f0425}", tip: "Saver" }, Rectangle {
{ name: "balanced", profile: PowerProfile.Balanced, label: "\u{f0376}", tip: "Balanced" }, id: profilePill
{ name: "performance", profile: PowerProfile.Performance, label: "\u{f0e0e}", tip: "Performance" } 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 { Row {
required property var modelData anchors.fill: parent
width: (parent.width - 8) / 3 spacing: 4
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
Column { Repeater {
anchors.centerIn: parent model: [
spacing: 1 { name: "power-saver", profile: PowerProfile.PowerSaver, label: "\u{f0425}", tip: "Saver" },
Text { { name: "balanced", profile: PowerProfile.Balanced, label: "\u{f0376}", tip: "Balanced" },
anchors.horizontalCenter: parent.horizontalCenter { name: "performance", profile: PowerProfile.Performance, label: "\u{f0e0e}", tip: "Performance" }
text: modelData.label ]
color: batteryWidget.powerProfile === modelData.name
? Theme.base0D : Theme.base05 Rectangle {
font.family: Theme.fontFamily required property var modelData
font.pixelSize: 14 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 { MouseArea {
id: profMouse id: profMouse
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
onClicked: PowerProfiles.profile = modelData.profile cursorShape: Qt.PointingHandCursor
onClicked: PowerProfiles.profile = modelData.profile
}
} }
} }
} }