refractor quick toggles data, add volume slider for waffles action center

2025-11-17 23:43:25 +01:00
parent 9228165428
commit fcee7ce6f9
55 changed files with 939 additions and 470 deletions
@@ -0,0 +1,113 @@
+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 {
+    id: root
+
+    property int currentPage: 0
+    property alias columns: grid.columns
+    property alias rows: grid.rows
+    readonly property int itemsPerPage: columns * rows
+    property list<string> toggles: Config.options.waffles.actionCenter.toggles
+    property list<string> togglesInCurrentPage: toggles.slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage)
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+    color: Looks.colors.bgPanelBody
+
+    implicitWidth: 360
+    implicitHeight: contentLayout.implicitHeight
+
+    ColumnLayout {
+        id: contentLayout
+        anchors.fill: parent
+        spacing: 0
+
+        Item {
+            id: togglesContainer
+            property real padding: 22
+            Layout.fillWidth: true
+            Layout.bottomMargin: -12
+            implicitHeight: grid.implicitHeight + padding * 2
+
+            GridLayout {
+                id: grid
+                anchors {
+                    fill: parent
+                    margins: parent.padding
+                }
+
+                columns: 3
+                rows: 2
+                rowSpacing: 12
+                columnSpacing: 12
+                uniformCellHeights: true
+                uniformCellWidths: true
+
+                Repeater {
+                    model: ScriptModel {
+                        values: root.togglesInCurrentPage
+                    }
+                    delegate: ActionCenterToggle {
+                        required property var modelData
+                        name: modelData
+                    }
+                }
+            }
+
+            // TODO: pages indicator on the right
+        }
+
+        Rectangle {
+            implicitHeight: 1
+            Layout.fillWidth: true
+            color: Looks.colors.bg1Border
+        }
+
+        RowLayout {
+            Layout.margins: 12
+            Layout.topMargin: 18
+            Layout.bottomMargin: 14
+            spacing: 4
+
+            WPanelIconButton {
+                iconName: WIcons.volumeIcon
+                onClicked: {
+                    Audio.sink.audio.muted = !Audio.sink.audio.muted;
+                }
+            }
+            WSlider {
+                Layout.fillWidth: true
+                value: Audio.sink.audio.volume
+                onMoved: {
+                    Audio.sink.audio.volume = value;
+                }
+            }
+            WPanelIconButton {
+                contentItem: Item {
+                    anchors.centerIn: parent
+                    Row {
+                        anchors.centerIn: parent
+                        spacing: -1
+                        FluentIcon {
+                            anchors.verticalCenter: parent.verticalCenter
+                            implicitSize: 18
+                            icon: "settings"
+                        }
+                        FluentIcon {
+                            anchors.verticalCenter: parent.verticalCenter
+                            implicitSize: 12
+                            icon: "chevron-right"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
@@ -14,15 +14,9 @@ WBarAttachedPanelContent {
        anchors.centerIn: parent
        spacing: 0

-        Rectangle {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
+        ActionCenterBody {
            topLeftRadius: root.border.radius - root.border.border.width
            topRightRadius: topLeftRadius
-            color: Looks.colors.bgPanelBody
-
-            implicitWidth: 360
-            implicitHeight: 380
        }

        Rectangle {
@@ -32,46 +26,9 @@ WBarAttachedPanelContent {
            implicitHeight: 1
        }

-        Rectangle {
-            Layout.fillHeight: false
-            Layout.fillWidth: true
+        ActionCenterFooter {
            bottomLeftRadius: root.border.radius - root.border.border.width
            bottomRightRadius: bottomLeftRadius
-            color: Looks.colors.bgPanelFooter
-
-            implicitWidth: 360
-            implicitHeight: 47
-
-            // Battery button
-            WPanelFooterButton {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.leftMargin: 12
-
-                contentItem: Row {
-                    spacing: 4
-
-                    FluentIcon {
-                        anchors.verticalCenter: parent.verticalCenter
-                        icon: WIcons.batteryIcon
-                    }
-                    WText {
-                        anchors.verticalCenter: parent.verticalCenter
-                        text: `${Math.round(Battery.percentage * 100) || 0}%`
-                    }
-                }
-            }
-
-            // Settings button
-            WPanelFooterButton {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 12
-
-                contentItem: FluentIcon {
-                    icon: "settings"
-                }
-            }
        }
    }
 }
@@ -0,0 +1,49 @@
+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
+
+    // Battery button
+    WPanelFooterButton {
+        visible: Battery.available
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 12
+
+        contentItem: Row {
+            spacing: 4
+
+            FluentIcon {
+                anchors.verticalCenter: parent.verticalCenter
+                icon: WIcons.batteryIcon
+            }
+            WText {
+                anchors.verticalCenter: parent.verticalCenter
+                text: `${Math.round(Battery.percentage * 100) || 0}%`
+            }
+        }
+    }
+
+    // Settings button
+    WPanelFooterButton {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 12
+
+        contentItem: FluentIcon {
+            icon: "settings"
+        }
+    }
+}
@@ -0,0 +1,40 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+// It should be perfectly fine to use just a Column here, but somehow
+// using ColumnLayout prevents weird opening anim stutter
+ColumnLayout { 
+    id: root
+
+    property alias name: toggleNameText.text
+
+    Rectangle {
+        Layout.fillWidth: true
+        implicitWidth: 96
+        implicitHeight: 48
+        color: "transparent"
+        border.width: 1
+        border.color: Looks.colors.bg0Border // ???
+        radius: Looks.radius.medium
+    }
+
+    Item {
+        implicitHeight: 36
+        Layout.fillWidth: true
+        WText {
+            id: toggleNameText
+            anchors {
+                verticalCenter: parent.verticalCenter
+                left: parent.left
+                right: parent.right
+            }
+            horizontalAlignment: Text.AlignHCenter
+            elide: Text.ElideRight
+            text: "Toggle"
+        }
+    }
+}
@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter
+
+ActionCenterToggle {
+    id: root
+
+    name: Network.ethernet ? Translation.tr("Network") : Network.networkName
+
+
+}