refractor radiobutton in volume mixer to new file

This commit is contained in:
end-4 2025-05-26 11:39:37 +02:00
parent 9b8eac6b54
commit ce1418cfdb
2 changed files with 90 additions and 94 deletions

View file

@ -0,0 +1,86 @@
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/services"
import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Widgets
import Quickshell.Services.Pipewire
RadioButton {
id: root
implicitHeight: 40
property string description
property color activeColor: Appearance?.m3colors.m3primary ?? "#685496"
property color inactiveColor: Appearance?.m3colors.m3onSurfaceVariant ?? "#45464F"
PointingHandInteraction {}
indicator: Item{}
contentItem: RowLayout {
Layout.fillWidth: true
spacing: 12
Rectangle {
id: radio
Layout.fillWidth: false
Layout.alignment: Qt.AlignVCenter
width: 20
height: 20
radius: Appearance?.rounding.full
border.color: checked ? root.activeColor : root.inactiveColor
border.width: 2
color: "transparent"
// Checked indicator
Rectangle {
anchors.centerIn: parent
width: checked ? 10 : 4
height: checked ? 10 : 4
radius: Appearance?.rounding.full
color: Appearance?.m3colors.m3primary
opacity: checked ? 1 : 0
Behavior on opacity {
animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
}
Behavior on width {
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
Behavior on height {
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
}
// Hover
Rectangle {
anchors.centerIn: parent
width: root.hovered ? 40 : 20
height: root.hovered ? 40 : 20
radius: Appearance?.rounding.full
color: Appearance?.m3colors.m3onSurface
opacity: root.hovered ? 0.1 : 0
Behavior on opacity {
animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
}
Behavior on width {
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
Behavior on height {
animation: Appearance?.animation.elementMove.numberAnimation.createObject(this)
}
}
}
StyledText {
text: root.description
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
wrapMode: Text.Wrap
color: Appearance?.m3colors.m3onSurface
}
}
}

View file

@ -212,12 +212,14 @@ Item {
})
// This could and should be refractored, but all data becomes null when passed wtf
delegate: RadioButton {
delegate: StyledRadioButton {
id: radioButton
required property var modelData
Layout.leftMargin: root.dialogMargins
Layout.rightMargin: root.dialogMargins
Layout.fillWidth: true
implicitHeight: 40
description: modelData.description
checked: modelData.id === Pipewire.defaultAudioSink?.id
Connections {
@ -228,103 +230,11 @@ Item {
}
}
PointingHandInteraction {}
onCheckedChanged: {
if (checked) {
root.selectedDevice = modelData
}
}
indicator: Item{}
contentItem: RowLayout {
Layout.fillWidth: true
spacing: 12
Rectangle {
id: radio
Layout.fillWidth: false
Layout.alignment: Qt.AlignVCenter
width: 20
height: 20
radius: Appearance.rounding.full
border.color: checked ? Appearance.m3colors.m3primary : Appearance.m3colors.m3onSurfaceVariant
border.width: 2
color: "transparent"
// Checked indicator
Rectangle {
anchors.centerIn: parent
width: checked ? 10 : 4
height: checked ? 10 : 4
radius: Appearance.rounding.full
color: Appearance.m3colors.m3primary
opacity: checked ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
Behavior on width {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
Behavior on height {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
}
// Hover
Rectangle {
anchors.centerIn: parent
width: radioButton.hovered ? 40 : 20
height: radioButton.hovered ? 40 : 20
radius: Appearance.rounding.full
color: Appearance.m3colors.m3onSurface
opacity: radioButton.hovered ? 0.1 : 0
Behavior on opacity {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
Behavior on width {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
Behavior on height {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
}
}
StyledText {
text: modelData.description
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
wrapMode: Text.Wrap
color: Appearance.m3colors.m3onSurface
}
}
}
}
Item {