sidebar: make quick toggle behave more similar to on android

2025-11-03 21:22:05 +01:00
parent 1703cb24d1
commit 5d773090eb
17 changed files with 72 additions and 36 deletions
@@ -12,7 +12,7 @@ AndroidQuickToggleButton {
    statusText: toggled ? Translation.tr("Unmuted") : Translation.tr("Muted")
    toggled: !Audio.sink?.audio?.muted
    buttonIcon: Audio.sink?.audio?.muted ? "volume_off" : "volume_up"
-    onClicked: {
+    mainAction: () => {
        Audio.sink.audio.muted = !Audio.sink.audio.muted
    }

@@ -14,7 +14,7 @@ AndroidQuickToggleButton {

    toggled: BluetoothStatus.enabled
    buttonIcon: BluetoothStatus.connected ? "bluetooth_connected" : BluetoothStatus.enabled ? "bluetooth" : "bluetooth_disabled"
-    onClicked: {
+    mainAction: () => {
        Bluetooth.defaultAdapter.enabled = !Bluetooth.defaultAdapter?.enabled
    }
    altAction: () => {
@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
    toggled: false
    buttonIcon: "cloud_lock"
    
-    onClicked: {
+    mainAction: () => {
        if (toggled) {
            root.toggled = false
            Quickshell.execDetached(["warp-cli", "disconnect"])
@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
    toggled: false
    buttonIcon: "colorize"

-    onClicked: {
+    mainAction: () => {
        GlobalStates.sidebarRightOpen = false;
        delayedActionTimer.start()
    }
@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
    toggled: Appearance.m3colors.darkmode
    buttonIcon: "contrast"
    
-    onClicked: event => {
+    mainAction: () => {
        if (Appearance.m3colors.darkmode) {
            Quickshell.execDetached([Directories.wallpaperSwitchScriptPath, "--mode", "light", "--noswitch"]);
        } else {
@@ -16,7 +16,7 @@ AndroidQuickToggleButton {
        EasyEffects.fetchActiveState()
    }

-    onClicked: {
+    mainAction: () => {
        EasyEffects.toggle()
    }

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
    toggled: toggled
    buttonIcon: "gamepad"

-    onClicked: {
+    mainAction: () => {
        root.toggled = !root.toggled
        if (root.toggled) {
            Quickshell.execDetached(["bash", "-c", `hyprctl --batch "keyword animations:enabled 0; keyword decoration:shadow:enabled 0; keyword decoration:blur:enabled 0; keyword general:gaps_in 0; keyword general:gaps_out 0; keyword general:border_size 1; keyword decoration:rounding 0; keyword general:allow_tearing 1"`])
@@ -11,7 +11,7 @@ AndroidQuickToggleButton {

    toggled: Idle.inhibit
    buttonIcon: "coffee"
-    onClicked: {
+    mainAction: () => {
        Idle.toggleInhibit()
    }
    StyledToolTip {
@@ -12,7 +12,7 @@ AndroidQuickToggleButton {
    statusText: toggled ? Translation.tr("Enabled") : Translation.tr("Muted")
    toggled: !Audio.source?.audio?.muted
    buttonIcon: Audio.source?.audio?.muted ? "mic_off" : "mic"
-    onClicked: {
+    mainAction: () => {
        Audio.source.audio.muted = !Audio.source.audio.muted
    }

@@ -21,7 +21,7 @@ AndroidQuickToggleButton {
        text: Translation.tr("Recognize music | Right-click to toggle source")
    }

-    onClicked: {
+    mainAction: () => {
        SongRec.toggleRunning()
    }

@@ -12,7 +12,7 @@ AndroidQuickToggleButton {

    toggled: Network.wifiStatus !== "disabled"
    buttonIcon: Network.materialSymbol
-    onClicked: Network.toggleWifi()
+    mainAction: () => Network.toggleWifi()
    altAction: () => {
        root.openMenu()
    }
@@ -14,7 +14,8 @@ AndroidQuickToggleButton {

    toggled: Hyprsunset.active
    buttonIcon: auto ? "night_sight_auto" : "bedtime"
-    onClicked: {
+    
+    mainAction: () => {
        Hyprsunset.toggle()
    }

@@ -13,7 +13,7 @@ AndroidQuickToggleButton {
    toggled: !Notifications.silent
    buttonIcon: toggled ? "notifications_active" : "notifications_paused"

-    onClicked: {
+    mainAction: () => {
        Notifications.silent = !Notifications.silent;
    }

@@ -11,7 +11,8 @@ AndroidQuickToggleButton {
    name: Translation.tr("Virtual Keyboard")
    toggled: GlobalStates.oskOpen
    buttonIcon: toggled ? "keyboard_hide" : "keyboard"
-    onClicked: {
+    
+    mainAction: () => {
        GlobalStates.oskOpen = !GlobalStates.oskOpen
    }

@@ -22,7 +22,7 @@ AndroidQuickToggleButton {
        case PowerProfile.Performance: return "Performance"
    }
    
-    onClicked: (event) => {
+    mainAction: () => {
        if (PowerProfiles.hasPerformanceProfile) {
            switch(PowerProfiles.profile) {
                case PowerProfile.PowerSaver: PowerProfiles.profile = PowerProfile.Balanced
@@ -13,6 +13,7 @@ GroupButton {
    required property bool expandedSize
    required property string buttonIcon
    required property string name
+    required property var mainAction
    property string statusText: toggled ? Translation.tr("Active") : Translation.tr("Inactive")

    required property real baseCellWidth
@@ -54,6 +55,11 @@ GroupButton {
    property color colText: (toggled && !(altAction && expandedSize)) ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer2
    property color colIcon: expandedSize ? (root.toggled ? Appearance.colors.colOnPrimary : Appearance.colors.colOnLayer3) : colText

+    onClicked: {
+        if (root.expandedSize && root.altAction) root.altAction();
+        else root.mainAction();
+    }
+
    contentItem: RowLayout {
        id: contentItem
        spacing: 4
@@ -64,35 +70,63 @@ GroupButton {
            rightMargin: root.horizontalPadding
        }

-        Rectangle {
+        // Icon
+        MouseArea {
+            id: iconMouseArea
+            hoverEnabled: true
+            acceptedButtons: (root.expandedSize && root.altAction) ? Qt.LeftButton : Qt.NoButton
            Layout.alignment: Qt.AlignHCenter
            Layout.fillHeight: true
            Layout.topMargin: root.verticalPadding
            Layout.bottomMargin: root.verticalPadding
-            implicitWidth: height
-            radius: root.radius - root.verticalPadding
-            color: {
-                const baseColor = root.toggled ? Appearance.colors.colPrimary : Appearance.colors.colLayer3
-                const transparentizeAmount = (root.altAction && root.expandedSize) ? 0 : 1
-                return ColorUtils.transparentize(baseColor, transparentizeAmount)
-            }
+            implicitHeight: iconBackground.implicitHeight
+            implicitWidth: iconBackground.implicitWidth
+            cursorShape: Qt.PointingHandCursor

-            Behavior on radius {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            }
-            Behavior on color {
-                animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
-            }
+            onClicked: root.mainAction()

-            MaterialSymbol {
-                anchors.centerIn: parent
-                fill: root.toggled ? 1 : 0
-                iconSize: root.expandedSize ? 22 : 24
-                color: root.colIcon
-                text: root.buttonIcon
+            Rectangle {
+                id: iconBackground
+                anchors.fill: parent
+                implicitWidth: height
+                radius: root.radius - root.verticalPadding
+                color: {
+                    const baseColor = root.toggled ? Appearance.colors.colPrimary : Appearance.colors.colLayer3
+                    const transparentizeAmount = (root.altAction && root.expandedSize) ? 0 : 1
+                    return ColorUtils.transparentize(baseColor, transparentizeAmount)
+                }
+
+                Behavior on radius {
+                    animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
+                }
+                Behavior on color {
+                    animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                }
+
+                MaterialSymbol {
+                    anchors.centerIn: parent
+                    fill: root.toggled ? 1 : 0
+                    iconSize: root.expandedSize ? 22 : 24
+                    color: root.colIcon
+                    text: root.buttonIcon
+                }
+
+                // State layer
+                Loader {
+                    anchors.fill: parent
+                    active: (root.expandedSize && root.altAction)
+                    sourceComponent: Rectangle {
+                        radius: iconBackground.radius
+                        color: ColorUtils.transparentize(root.colIcon, iconMouseArea.containsPress ? 0.88 : iconMouseArea.containsMouse ? 0.95 : 1)
+                        Behavior on color {
+                            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
+                        }
+                    }
+                }
            }
        }

+        // Text column for expanded size
        Loader {
            Layout.alignment: Qt.AlignVCenter
            Layout.fillWidth: true
@@ -14,7 +14,7 @@ AndroidQuickToggleButton {
    toggled: false
    buttonIcon: "screenshot_region"

-    onClicked: {
+    mainAction: () => {
        GlobalStates.sidebarRightOpen = false;
        delayedActionTimer.start()
    }