From a86fde606e8542b40856c79fa0307fca99f1f7d2 Mon Sep 17 00:00:00 2001 From: ATMDA Date: Sat, 15 Nov 2025 00:53:10 -0500 Subject: controlcenter: audio pane refresh --- modules/controlcenter/audio/AudioPane.qml | 219 ++++++++++++++++-------------- 1 file changed, 114 insertions(+), 105 deletions(-) diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml index ca54f77..32d6680 100644 --- a/modules/controlcenter/audio/AudioPane.qml +++ b/modules/controlcenter/audio/AudioPane.qml @@ -247,142 +247,151 @@ RowLayout { spacing: Appearance.spacing.normal - MaterialIcon { - Layout.alignment: Qt.AlignHCenter - text: "volume_up" - font.pointSize: Appearance.font.size.extraLarge * 3 - font.bold: true - } + ConnectionHeader { + icon: "volume_up" + title: qsTr("Audio Settings") + } - StyledText { - Layout.alignment: Qt.AlignHCenter - text: qsTr("Audio Settings") - font.pointSize: Appearance.font.size.large - font.bold: true - } + SectionHeader { + title: qsTr("Output volume") + description: qsTr("Control the volume of your output device") + } - StyledText { - Layout.topMargin: Appearance.spacing.large - Layout.alignment: Qt.AlignHCenter - text: qsTr("Output volume") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + SectionContainer { + contentSpacing: Appearance.spacing.normal - RowLayout { - spacing: Appearance.spacing.smaller + ColumnLayout { + Layout.fillWidth: true + spacing: Appearance.spacing.small - StyledText { - text: qsTr("Volume") - font.pointSize: Appearance.font.size.large - font.weight: 500 - } + RowLayout { + Layout.fillWidth: true + spacing: Appearance.spacing.normal - Item { - Layout.fillWidth: true - } + StyledText { + text: qsTr("Volume") + font.pointSize: Appearance.font.size.normal + font.weight: 500 + } + + Item { + Layout.fillWidth: true + } + + StyledText { + text: Audio.muted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.volume * 100)) + color: Audio.muted ? Colours.palette.m3primary : Colours.palette.m3outline + font.pointSize: Appearance.font.size.normal + font.weight: 500 + } - StyledRect { - implicitWidth: implicitHeight - implicitHeight: muteIcon.implicitHeight + Appearance.padding.normal * 2 + StyledRect { + implicitWidth: implicitHeight + implicitHeight: muteIcon.implicitHeight + Appearance.padding.normal * 2 - radius: Appearance.rounding.normal - color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer + radius: Appearance.rounding.normal + color: Audio.muted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer - StateLayer { - function onClicked(): void { - if (Audio.sink?.audio) { - Audio.sink.audio.muted = !Audio.sink.audio.muted; + StateLayer { + function onClicked(): void { + if (Audio.sink?.audio) { + Audio.sink.audio.muted = !Audio.sink.audio.muted; + } + } + } + + MaterialIcon { + id: muteIcon + + anchors.centerIn: parent + text: Audio.muted ? "volume_off" : "volume_up" + color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer + } } } - } - MaterialIcon { - id: muteIcon + StyledSlider { + Layout.fillWidth: true + implicitHeight: Appearance.padding.normal * 3 - anchors.centerIn: parent - text: Audio.muted ? "volume_off" : "volume_up" - color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer + value: Audio.volume + enabled: !Audio.muted + opacity: enabled ? 1 : 0.5 + onMoved: Audio.setVolume(value) + } } } - } - StyledText { - text: Audio.muted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.volume * 100)) - color: Audio.muted ? Colours.palette.m3primary : Colours.palette.m3outline - } + SectionHeader { + title: qsTr("Input volume") + description: qsTr("Control the volume of your input device") + } - StyledSlider { - Layout.fillWidth: true - implicitHeight: Appearance.padding.normal * 3 + SectionContainer { + contentSpacing: Appearance.spacing.normal - value: Audio.volume - enabled: !Audio.muted - opacity: enabled ? 1 : 0.5 - onMoved: Audio.setVolume(value) - } + ColumnLayout { + Layout.fillWidth: true + spacing: Appearance.spacing.small - StyledText { - Layout.topMargin: Appearance.spacing.large - Layout.alignment: Qt.AlignHCenter - text: qsTr("Input volume") - font.pointSize: Appearance.font.size.larger - font.weight: 500 - } + RowLayout { + Layout.fillWidth: true + spacing: Appearance.spacing.normal - RowLayout { - spacing: Appearance.spacing.smaller + StyledText { + text: qsTr("Volume") + font.pointSize: Appearance.font.size.normal + font.weight: 500 + } - StyledText { - text: qsTr("Volume") - font.pointSize: Appearance.font.size.large - font.weight: 500 - } + Item { + Layout.fillWidth: true + } - Item { - Layout.fillWidth: true - } + StyledText { + text: Audio.sourceMuted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.sourceVolume * 100)) + color: Audio.sourceMuted ? Colours.palette.m3primary : Colours.palette.m3outline + font.pointSize: Appearance.font.size.normal + font.weight: 500 + } + + StyledRect { + implicitWidth: implicitHeight + implicitHeight: muteInputIcon.implicitHeight + Appearance.padding.normal * 2 + + radius: Appearance.rounding.normal + color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer - StyledRect { - implicitWidth: implicitHeight - implicitHeight: muteInputIcon.implicitHeight + Appearance.padding.normal * 2 + StateLayer { + function onClicked(): void { + if (Audio.source?.audio) { + Audio.source.audio.muted = !Audio.source.audio.muted; + } + } + } - radius: Appearance.rounding.normal - color: Audio.sourceMuted ? Colours.palette.m3secondary : Colours.palette.m3secondaryContainer + MaterialIcon { + id: muteInputIcon - StateLayer { - function onClicked(): void { - if (Audio.source?.audio) { - Audio.source.audio.muted = !Audio.source.audio.muted; + anchors.centerIn: parent + text: Audio.sourceMuted ? "mic_off" : "mic" + color: Audio.sourceMuted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer + } } } - } - MaterialIcon { - id: muteInputIcon + StyledSlider { + Layout.fillWidth: true + implicitHeight: Appearance.padding.normal * 3 - anchors.centerIn: parent - text: Audio.sourceMuted ? "mic_off" : "mic" - color: Audio.sourceMuted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer + value: Audio.sourceVolume + enabled: !Audio.sourceMuted + opacity: enabled ? 1 : 0.5 + onMoved: Audio.setSourceVolume(value) + } } } } - - StyledText { - text: Audio.sourceMuted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.sourceVolume * 100)) - color: Audio.sourceMuted ? Colours.palette.m3primary : Colours.palette.m3outline - } - - StyledSlider { - Layout.fillWidth: true - implicitHeight: Appearance.padding.normal * 3 - - value: Audio.sourceVolume - enabled: !Audio.sourceMuted - opacity: enabled ? 1 : 0.5 - onMoved: Audio.setSourceVolume(value) - } - } } InnerBorder { -- cgit v1.2.3-freya