action center: toggles barely working

2025-11-18 21:28:34 +01:00
parent f3bfe8a374
commit b650120fd4
85 changed files with 739 additions and 273 deletions
@@ -10,13 +10,6 @@ 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
@@ -29,39 +22,10 @@ Rectangle {
        anchors.fill: parent
        spacing: 0

-        Item {
+        ActionCenterBodyToggles {
            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 {
@@ -70,44 +34,10 @@ Rectangle {
            color: Looks.colors.bg1Border
        }

-        RowLayout {
+        ActionCenterBodySliders {
            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"
-                        }
-                    }
-                }
-            }
        }
    }
 }
@@ -0,0 +1,45 @@
+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
+
+RowLayout {
+    spacing: 4
+
+    WPanelIconButton {
+        iconName: WIcons.volumeIcon
+        onClicked: Audio.toggleMute();
+    }
+    
+    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: "options"
+                }
+                FluentIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+                    implicitSize: 12
+                    icon: "chevron-right"
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+import qs.modules.waffle.actionCenter.toggles
+
+Item {
+    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)
+
+    property real padding: 22
+    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: ActionCenterTogglesDelegateChooser {}
+        }
+    }
+
+    // TODO: pages indicator on the right
+}
@@ -1,40 +0,0 @@
-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,120 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.functions
+import qs.modules.common.widgets
+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
+
+    required property QuickToggleModel toggleModel
+    property string name: toggleModel?.name ?? ""
+    property string statusText: (toggleModel?.hasStatusText) ? (toggleModel?.statusText || (toggled ? Translation.tr("Active") : Translation.tr("Inactive"))) : ""
+    property string tooltipText: toggleModel?.tooltipText ?? ""
+    required property string icon
+    property bool available: toggleModel?.available ?? true
+    property bool toggled: toggleModel?.toggled ?? false
+    property var mainAction: toggleModel?.mainAction ?? null
+    property var altAction: toggleModel?.hasMenu ? (() => root.openMenu()) : (toggleModel?.altAction ?? null)
+    property bool hasMenu: toggleModel?.hasMenu ?? false
+
+    property color colBackground: toggled ? Looks.colors.accent : Looks.colors.bg2
+    property color colBackgroundHovered: toggled ? Looks.colors.accentHover : Looks.colors.bg2Hover
+    property color colBackgroundActive: toggled ? Looks.colors.accentActive : Looks.colors.bg2Active
+    property color colBorder: toggled ? Looks.colors.accentHover : Looks.colors.bg0Border
+    property color colForeground: toggled ? Looks.colors.accentFg : Looks.colors.fg1
+
+    Rectangle {
+        Layout.fillWidth: true
+        implicitWidth: 96
+        implicitHeight: 48
+        color: root.colBackground
+        border.color: root.colBorder
+        border.width: 1
+        radius: Looks.radius.medium
+
+        RowLayout {
+            anchors.fill: parent
+            uniformCellSizes: true
+            spacing: 0
+
+            WButton {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                inset: 0
+                backgroundOpacity: 0.8
+                checked: root.toggled
+                border.width: 1
+                border.color: root.colBorder
+                topLeftRadius: Looks.radius.medium
+                bottomLeftRadius: Looks.radius.medium
+                topRightRadius: root.hasMenu ? 0 : Looks.radius.medium
+                bottomRightRadius: root.hasMenu ? 0 : Looks.radius.medium
+                onClicked: root.mainAction && root.mainAction()
+                contentItem: Item {
+                    anchors.centerIn: parent
+                    FluentIcon {
+                        anchors.centerIn: parent
+                        icon: root.icon
+                        implicitSize: 18
+                        monochrome: true
+                        filled: root.toggled
+                        color: root.colForeground
+                    }
+                }
+            }
+            FadeLoader {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                shown: root.hasMenu
+                sourceComponent: WButton {
+                    inset: 0
+                    backgroundOpacity: 0.8
+                    checked: root.toggled
+                    border.width: 1
+                    border.color: root.colBorder
+                    topLeftRadius: 0
+                    bottomLeftRadius: 0
+                    topRightRadius: Looks.radius.medium
+                    bottomRightRadius: Looks.radius.medium
+                    contentItem: Item {
+                        anchors.centerIn: parent
+                        FluentIcon {
+                            anchors.centerIn: parent
+                            icon: "chevron-right"
+                            implicitSize: 18
+                            monochrome: true
+                            color: root.colForeground
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Item {
+        id: toggleNameWidget
+        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: root.name
+        }
+
+    }
+}
@@ -0,0 +1,136 @@
+pragma ComponentBehavior: Bound
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.models.quickToggles
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+
+DelegateChooser {
+    id: root
+
+    // role: "type" is implied by usage
+
+    DelegateChoice {
+        roleValue: "antiFlashbang"
+        ActionCenterToggleButton {
+            toggleModel: AntiFlashbangToggle {}
+            icon: "flash-off"
+        }
+    }
+    DelegateChoice {
+        roleValue: "audio"
+        ActionCenterToggleButton {
+            toggleModel: AudioToggle {}
+            icon: "speaker-2"
+        }
+    }
+    DelegateChoice {
+        roleValue: "bluetooth"
+        ActionCenterToggleButton {
+            toggleModel: BluetoothToggle {}
+            icon: WIcons.bluetoothIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "cloudflareWarp"
+        ActionCenterToggleButton {
+            toggleModel: CloudflareWarpToggle {}
+            icon: "globe-shield"
+        }
+    }
+    DelegateChoice {
+        roleValue: "colorPicker"
+        ActionCenterToggleButton {
+            toggleModel: ColorPickerToggle {}
+            icon: "eyedropper"
+        }
+    }
+    DelegateChoice {
+        roleValue: "darkMode"
+        ActionCenterToggleButton {
+            toggleModel: DarkModeToggle {}
+            icon: "dark-theme*"
+        }
+    }
+    DelegateChoice {
+        roleValue: "easyEffects"
+        ActionCenterToggleButton {
+            toggleModel: EasyEffectsToggle {}
+            icon: "device-eq"
+        }
+    }
+    DelegateChoice {
+        roleValue: "gameMode"
+        ActionCenterToggleButton {
+            toggleModel: GameModeToggle {}
+            icon: "games"
+        }
+    }
+    DelegateChoice {
+        roleValue: "idleInhibitor"
+        ActionCenterToggleButton {
+            toggleModel: IdleInhibitorToggle {}
+            icon: "drink-coffee"
+        }
+    }
+    DelegateChoice {
+        roleValue: "mic"
+        ActionCenterToggleButton {
+            toggleModel: MicToggle {}
+            icon: WIcons.micIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "musicRecognition"
+        ActionCenterToggleButton {
+            toggleModel: MusicRecognitionToggle {}
+            icon: "music-note-2"
+        }
+    }
+    DelegateChoice {
+        roleValue: "network"
+        ActionCenterToggleButton {
+            toggleModel: NetworkToggle {}
+            icon: WIcons.internetIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "nightLight"
+        ActionCenterToggleButton {
+            toggleModel: NightLightToggle {}
+            icon: WIcons.nightLightIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "notifications"
+        ActionCenterToggleButton {
+            toggleModel: NotificationToggle {}
+            icon: WIcons.notificationsIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "onScreenKeyboard"
+        ActionCenterToggleButton {
+            toggleModel: OnScreenKeyboardToggle {}
+            icon: GlobalStates.oskOpen ? "keyboard-dock" : "keyboard"
+        }
+    }
+    DelegateChoice {
+        roleValue: "powerProfile"
+        ActionCenterToggleButton {
+            toggleModel: PowerProfilesToggle {}
+            icon: WIcons.powerProfileIcon
+        }
+    }
+    DelegateChoice {
+        roleValue: "screenSnip"
+        ActionCenterToggleButton {
+            toggleModel: ScreenSnipToggle {}
+            icon: "cut"
+        }
+    }
+}