waffles: action center: volume menu

2025-11-19 23:39:18 +01:00
parent bca177eed2
commit 5c8d824749
42 changed files with 680 additions and 129 deletions
@@ -7,32 +7,34 @@ import qs.services
 import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter.mainPage

 WBarAttachedPanelContent {
    id: root

-    contentItem: StackView {
-        implicitWidth: currentItem.implicitWidth
-        implicitHeight: currentItem.implicitHeight
+    contentItem: StackView { // TODO: Make this a WStackView with proper anim
+        id: stackView
+        anchors.fill: parent
+        implicitWidth: initItem.implicitWidth
+        implicitHeight: initItem.implicitHeight        

-        initialItem: ColumnLayout {
-            anchors.centerIn: parent
-            spacing: 0
-
-            ActionCenterBody {}
-
-            Rectangle {
-                Layout.fillHeight: false
-                Layout.fillWidth: true
-                color: Looks.colors.bgPanelSeparator
-                implicitHeight: 1
-            }
-
-            ActionCenterFooter {}
+        initialItem: PageColumn {
+            id: initItem
+            MainPageBody {}
+            Separator {}
+            MainPageFooter {}
        }

        Component.onCompleted: {
            ActionCenterContext.stackView = this
        }
+
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.BackButton
+            onClicked: {
+                ActionCenterContext.back()
+            }
+        }
    }
 }
@@ -9,4 +9,17 @@ Singleton {
    
    property StackView stackView

+    function push(component) {
+        if (stackView) {
+            item = stackView.push(component)
+            stackView.implicitWidth = item.implicitWidth
+            stackView.implicitHeight = item.implicitHeight
+        }
+    }
+
+    function back() {
+        if (stackView && stackView.depth > 1) {
+            stackView.pop()
+        }
+    }
 }
@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelBody
+}
@@ -0,0 +1,17 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: false
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelFooter
+
+    implicitWidth: 360
+    implicitHeight: 47
+}
@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+RowLayout {
+    id: root
+
+    required property string title
+    spacing: 4
+
+    WPanelIconButton {
+        iconName: "arrow-left"
+        onClicked: ActionCenterContext.back()
+    }
+
+    WText {
+        id: titleText
+        Layout.fillWidth: true
+        elide: Text.ElideRight
+        text: root.title
+        font.pixelSize: Looks.font.pixelSize.large
+    }
+}
@@ -0,0 +1,6 @@
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    spacing: 0
+}
@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+WText {
+    Layout.leftMargin: 12
+    Layout.rightMargin: 12
+    Layout.topMargin: 6
+    Layout.bottomMargin: 6
+    
+    font {
+        weight: Looks.font.weight.stronger
+        pixelSize: Looks.font.pixelSize.large
+    }
+}
@@ -0,0 +1,10 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.waffle.looks
+
+Rectangle {
+    Layout.fillHeight: false
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelSeparator
+    implicitHeight: 1
+}
@@ -54,7 +54,8 @@ Scope {

            ActionCenterContent {
                id: content
-                anchors.centerIn: parent
+                anchors.fill: parent
+                anchors.margins: visualMargin

                focus: true
                Keys.onPressed: event => { // Esc to close
@@ -6,15 +6,10 @@ import qs.services
 import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter

-Rectangle {
+BodyRectangle {
    id: root
-
-    Layout.fillHeight: true
-    Layout.fillWidth: true
-    color: Looks.colors.bgPanelBody
-
-    implicitWidth: 360
    implicitHeight: contentLayout.implicitHeight

    ColumnLayout {
@@ -22,7 +17,7 @@ Rectangle {
        anchors.fill: parent
        spacing: 0

-        ActionCenterBodyToggles {
+        MainPageBodyToggles {
            id: togglesContainer
            Layout.fillWidth: true
        }
@@ -33,7 +28,7 @@ Rectangle {
            color: Looks.colors.bg1Border
        }

-        ActionCenterBodySliders {
+        MainPageBodySliders {
            Layout.margins: 12
            Layout.topMargin: 18
            Layout.bottomMargin: 14
@@ -6,6 +6,8 @@ import qs.services
 import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+import qs.modules.waffle.actionCenter.volumeControl

 ColumnLayout {
    id: root
@@ -58,6 +60,13 @@ ColumnLayout {
        }

        WPanelIconButton {
+            Component {
+                id: volumeControlComp
+                VolumeControl {}
+            }
+            onClicked: {
+                ActionCenterContext.push(volumeControlComp)
+            }
            contentItem: Item {
                anchors.centerIn: parent
                Row {
@@ -6,14 +6,9 @@ import qs.services
 import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter

-Rectangle {
-    Layout.fillHeight: false
-    Layout.fillWidth: true
-    color: Looks.colors.bgPanelFooter
-
-    implicitWidth: 360
-    implicitHeight: 47
+FooterRectangle {

    // Battery button
    WPanelFooterButton {
@@ -0,0 +1,160 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+Rectangle {
+    id: root
+    implicitWidth: 360
+    implicitHeight: 352
+
+    PageColumn {
+        anchors.fill: parent
+
+        BodyRectangle {
+            implicitHeight: 400
+            implicitWidth: 50
+
+            ColumnLayout {
+                anchors.fill: parent
+                anchors.margins: 4
+                spacing: 4
+
+                HeaderRow {
+                    Layout.fillWidth: true
+                    title: qsTr("Sound output")
+                }
+
+                StyledFlickable {
+                    id: flickable
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    contentHeight: contentLayout.implicitHeight
+                    contentWidth: width
+                    clip: true
+
+                    AudioChoices {
+                        id: contentLayout
+                        width: flickable.width
+                    }
+                }
+            }
+        }
+
+        Separator {}
+
+        FooterRectangle {
+            WButton {
+                id: moreSettingsButton
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                }
+                inset: 0
+                implicitHeight: 40
+                implicitWidth: contentItem.implicitWidth + 30
+                color: "transparent"
+
+                onClicked: {
+                    Quickshell.execDetached(["qs", "-p", Quickshell.shellPath(""), "ipc", "call", "sidebarLeft", "toggle"]);
+                    Quickshell.execDetached(["bash", "-c", Config.options.apps.volumeMixer]);
+                }
+
+                contentItem: Item {
+                    anchors.centerIn: parent
+                    implicitWidth: buttonText.implicitWidth
+                    WText {
+                        id: buttonText
+                        anchors.centerIn: parent
+                        text: qsTr("More volume settings")
+                        color: moreSettingsButton.pressed ? Looks.colors.fg : Looks.colors.fg1
+                    }
+                }
+            }
+        }
+    }
+
+    component AudioChoices: ColumnLayout {
+        spacing: 4
+
+        SectionText {
+            text: qsTr("Output device")
+        }
+
+        Repeater {
+            model: ScriptModel {
+                values: Audio.outputDevices
+            }
+            delegate: WChoiceButton {
+                required property var modelData
+                icon.name: WIcons.audioDeviceIcon(modelData)
+                text: Audio.friendlyDeviceName(modelData)
+                checked: Audio.sink === modelData
+                onClicked: {
+                    Audio.setDefaultSink(modelData);
+                }
+            }
+        }
+
+        Separator { 
+            visible: EasyEffects.available
+            color: Looks.colors.bg2Hover
+        }
+        
+        ////////////////////////////////////////////////////////////
+
+        SectionText {
+            visible: EasyEffects.available
+            text: qsTr("Sound effects")
+        }
+
+        WChoiceButton {
+            visible: EasyEffects.available
+            text: Translation.tr("Off")
+            checked: !EasyEffects.active
+            onClicked: EasyEffects.disable()
+        }
+
+        WChoiceButton {
+            visible: EasyEffects.available
+            text: "EasyEffects"
+            checked: EasyEffects.active
+            onClicked: EasyEffects.enable()
+        }
+
+        Separator {
+            color: Looks.colors.bg2Hover
+        }
+
+        ////////////////////////////////////////////////////////////
+
+        SectionText {
+            visible: EasyEffects.available
+            text: qsTr("Volume mixer")
+        }
+
+        VolumeEntry {
+            node: Audio.sink
+            icon: "speaker"
+            monochrome: true
+        }
+
+        Repeater {
+            model: ScriptModel {
+                values: Audio.outputAppNodes
+            }
+            delegate: VolumeEntry {
+                required property var modelData
+                node: modelData
+            }
+        }
+    }
+}
@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Pipewire
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+RowLayout {
+    id: root
+    required property PwNode node
+    property alias icon: iconButton.iconName
+    property alias monochrome: iconButton.monochrome
+    monochrome: false
+
+    PwObjectTracker { // Necessary for useful info to be present in 'node'
+        objects: [root.node]
+    }
+
+    WPanelIconButton {
+        id: iconButton
+        iconName: WIcons.audioAppIcon(root.node)
+        onClicked: root.node.audio.muted = !root.node?.audio.muted
+
+        FluentIcon {
+            id: muteIcon
+            visible: root.node?.audio.muted ?? false
+            anchors {
+                bottom: parent.bottom
+                right: parent.right
+                margins: -1
+            }
+            implicitSize: 14
+            icon: "speaker-mute"
+        }
+
+        WToolTip {
+            extraVisibleCondition: iconButton.shouldShowTooltip
+            text: Audio.appNodeDisplayName(root.node)
+        }
+    }
+
+    WSlider {
+        Layout.fillWidth: true
+        Layout.rightMargin: 10
+        value: root.node?.audio.volume ?? 0
+        onMoved: root.node.audio.volume = value
+    }
+}