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
@@ -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"
+        }
+    }
+}