audio popout changes, slider inset icons added

2026-06-08 01:22:37 +02:00
parent 1f9630ed76
commit 628c4b32a5
5 changed files with 336 additions and 194 deletions
@@ -19,7 +19,7 @@ Item {
 	required property var wrapper

 	implicitHeight: vol.implicitHeight + Appearance.padding.small * 2
-	implicitWidth: 600 + Appearance.padding.small * 2
+	implicitWidth: 500 + Appearance.padding.small * 2

 	CustomRect {
 		anchors.left: parent.left
@@ -57,51 +57,11 @@ Item {
 			color: DynamicColors.tPalette.m3surfaceContainer
 			radius: root.rounding

-			Item {
-				id: sinkIcon
-
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.top: parent.top
-				implicitWidth: childrenRect.width
-
-				CustomRect {
-					anchors.centerIn: parent
-					color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-					implicitHeight: 54
-					implicitWidth: 54
-					radius: Appearance.rounding.full
-
-					MaterialIcon {
-						anchors.alignWhenCentered: false
-						anchors.centerIn: parent
-						animate: true
-						color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-						font.pointSize: Appearance.font.size.extraLarge
-						text: Audio.muted ? "volume_off" : "volume_up"
-					}
-
-					StateLayer {
-						color: Audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-
-						onClicked: {
-							const audio = Audio.sink?.audio;
-							if (audio)
-								audio.muted = !audio.muted;
-						}
-					}
-				}
-			}
-
 			ColumnLayout {
-				anchors.bottom: parent.bottom
-				anchors.bottomMargin: Appearance.padding.smallest
-				anchors.left: sinkIcon.right
-				anchors.leftMargin: Appearance.spacing.larger
-				anchors.right: parent.right
-				anchors.rightMargin: Appearance.padding.large
-				anchors.top: parent.top
+				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Appearance.padding.larger
+				anchors.rightMargin: Appearance.padding.larger
 				anchors.topMargin: Appearance.padding.smaller

 				RowLayout {
@@ -111,34 +71,53 @@ Item {
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 						Layout.fillWidth: true
-						text: "Output Volume"
+						text: "Output volume"
 					}

 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
 					}
 				}

-				CustomMouseArea {
-					Layout.bottomMargin: Appearance.padding.normal
-					Layout.fillWidth: true
-					Layout.preferredHeight: Appearance.padding.larger * 3
+				RowLayout {
+					spacing: Appearance.spacing.large

-					CustomSlider {
-						anchors.left: parent.left
-						anchors.right: parent.right
-						fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: parent.height
-						value: Audio.volume
+					CustomMouseArea {
+						Layout.bottomMargin: Appearance.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Appearance.padding.larger * 3

-						Behavior on value {
-							Anim {
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+							fgColor: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
+							value: Audio.volume
+
+							Behavior on value {
+								Anim {
+								}
 							}
-						}

-						onInteraction: value => Audio.setVolume(value)
+							onInteraction: value => Audio.setVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Appearance.padding.normal
+						checked: !Audio.muted
+
+						onToggled: {
+							const audio = Audio.sink?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
 					}
 				}
 			}
@@ -173,51 +152,11 @@ Item {
 				}
 			}

-			Item {
-				id: sourceIcon
-
-				anchors.bottom: parent.bottom
-				anchors.left: parent.left
-				anchors.leftMargin: Appearance.padding.larger
-				anchors.top: parent.top
-				implicitWidth: childrenRect.width
-
-				CustomRect {
-					anchors.centerIn: parent
-					color: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-					implicitHeight: 54
-					implicitWidth: 54
-					radius: Appearance.rounding.full
-
-					MaterialIcon {
-						anchors.alignWhenCentered: false
-						anchors.centerIn: parent
-						animate: true
-						color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-						font.pointSize: Appearance.font.size.extraLarge
-						text: Audio.sourceMuted ? "mic_off" : "mic"
-					}
-
-					StateLayer {
-						color: Audio.sourceMuted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-
-						onClicked: {
-							const audio = Audio.source?.audio;
-							if (audio)
-								audio.muted = !audio.muted;
-						}
-					}
-				}
-			}
-
 			ColumnLayout {
-				anchors.bottom: parent.bottom
-				anchors.bottomMargin: Appearance.padding.smallest
-				anchors.left: sourceIcon.right
-				anchors.leftMargin: Appearance.spacing.larger
-				anchors.right: parent.right
-				anchors.rightMargin: Appearance.padding.large
-				anchors.top: parent.top
+				anchors.bottomMargin: Appearance.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Appearance.padding.larger
+				anchors.rightMargin: Appearance.padding.larger
 				anchors.topMargin: Appearance.padding.smaller

 				RowLayout {
@@ -227,34 +166,53 @@ Item {
 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 						Layout.fillWidth: true
-						text: "Input Volume"
+						text: "Input volume"
 					}

 					CustomText {
 						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 						font.bold: true
 						text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
 					}
 				}

-				CustomMouseArea {
-					Layout.bottomMargin: Appearance.padding.normal
-					Layout.fillWidth: true
-					Layout.preferredHeight: Appearance.padding.larger * 3
+				RowLayout {
+					spacing: Appearance.spacing.large

-					CustomSlider {
-						anchors.left: parent.left
-						anchors.right: parent.right
-						fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: parent.height
-						value: Audio.sourceVolume
+					CustomMouseArea {
+						Layout.bottomMargin: Appearance.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Appearance.padding.larger * 3

-						Behavior on value {
-							Anim {
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.sourceMuted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+							fgColor: Audio.sourceMuted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.sourceMuted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+							insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
+							value: Audio.sourceVolume
+
+							Behavior on value {
+								Anim {
+								}
 							}
-						}

-						onInteraction: value => Audio.setSourceVolume(value)
+							onInteraction: value => Audio.setSourceVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Appearance.padding.normal
+						checked: !Audio.sourceMuted
+
+						onToggled: {
+							const audio = Audio.source?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
 					}
 				}
 			}
@@ -307,43 +265,6 @@ Item {
 					}
 				}

-				Item {
-					id: appBoxIcon
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.leftMargin: Appearance.padding.larger
-					anchors.top: parent.top
-					implicitWidth: childrenRect.width
-
-					CustomRect {
-						anchors.centerIn: parent
-						color: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-						implicitHeight: 54
-						implicitWidth: 54
-						radius: Appearance.rounding.full
-
-						MaterialIcon {
-							id: icon
-
-							anchors.centerIn: parent
-							animate: true
-							color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-							font.pointSize: Appearance.font.size.extraLarge
-							text: appBox.modelData.audio.muted ? "volume_off" : "volume_up"
-						}
-
-						StateLayer {
-							color: appBox.modelData.audio.muted ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
-							radius: Appearance.rounding.full
-
-							onClicked: {
-								appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
-							}
-						}
-					}
-				}
-
 				TextMetrics {
 					id: metrics

@@ -353,13 +274,10 @@ Item {
 				}

 				ColumnLayout {
-					anchors.bottom: parent.bottom
-					anchors.bottomMargin: Appearance.padding.smallest
-					anchors.left: appBoxIcon.right
-					anchors.leftMargin: Appearance.spacing.larger
-					anchors.right: parent.right
-					anchors.rightMargin: Appearance.padding.large
-					anchors.top: parent.top
+					anchors.bottomMargin: Appearance.padding.smaller
+					anchors.fill: parent
+					anchors.leftMargin: Appearance.padding.larger
+					anchors.rightMargin: Appearance.padding.larger
 					anchors.topMargin: Appearance.padding.smaller

 					RowLayout {
@@ -375,25 +293,45 @@ Item {

 						CustomText {
 							Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+							color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.7)
 							font.bold: true
 							text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
 						}
 					}

-					CustomMouseArea {
-						Layout.bottomMargin: Appearance.padding.normal
-						Layout.fillWidth: true
-						Layout.preferredHeight: Appearance.padding.larger * 3
+					RowLayout {
+						spacing: Appearance.spacing.large

-						CustomSlider {
-							anchors.left: parent.left
-							anchors.right: parent.right
-							fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
-							implicitHeight: parent.height
-							value: appBox.modelData.audio.volume
+						CustomMouseArea {
+							Layout.bottomMargin: Appearance.padding.normal
+							Layout.fillWidth: true
+							Layout.preferredHeight: Appearance.padding.larger * 3

-							onInteraction: value => {
-								Audio.setStreamVolume(appBox.modelData, value);
+							CustomSlider {
+								anchors.left: parent.left
+								anchors.right: parent.right
+								bgColor: appBox.modelData.audio.muted ? Qt.alpha(DynamicColors.palette.m3errorContainer, 0.5) : DynamicColors.palette.m3secondaryContainer
+								fgColor: appBox.modelData.audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+								implicitHeight: parent.height
+								insetColor: appBox.modelData.audio.muted ? (inset.attached ? DynamicColors.palette.m3onErrorContainer : DynamicColors.palette.m3onError) : (inset.attached ? DynamicColors.palette.m3onSecondaryContainer : DynamicColors.palette.m3onPrimary)
+								insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
+								value: appBox.modelData.audio.volume
+
+								Behavior on value {
+									Anim {
+									}
+								}
+
+								onInteraction: value => Audio.setStreamVolume(appBox.modelData, value)
+							}
+						}
+
+						CustomSwitch {
+							Layout.bottomMargin: Appearance.padding.normal
+							checked: !appBox.modelData.audio.muted
+
+							onToggled: {
+								appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
 							}
 						}
 					}