action center: toggle pages

dots/.config/quickshell/ii/modules/waffle/actionCenter/ActionCenterBodySliders.qml

@@ -7,39 +7,75 @@ import qs.modules.common
 import qs.modules.common.functions
 import qs.modules.waffle.looks
 
-RowLayout {
-    spacing: 4
+ColumnLayout {
+    id: root
+    property var screen: root.QsWindow.window?.screen
+    property var brightnessMonitor: Brightness.getMonitorForScreen(screen)
+    spacing: 12
 
-    WPanelIconButton {
-        iconName: WIcons.volumeIcon
-        onClicked: Audio.toggleMute();
-    }
-    
-    WSlider {
-        Layout.fillWidth: true
-        value: Audio.sink.audio.volume
-        onMoved: {
-            Audio.sink.audio.volume = value;
+    RowLayout {
+        spacing: 4
+
+        WPanelIconButton {
+            color: colBackground
+            property real animationValue: root.brightnessMonitor.brightness
+            rotation: animationValue * 180
+            scale: 0.8 + animationValue * 0.2
+            iconName: "weather-sunny"
+
+            Behavior on animationValue {
+                animation: Looks.transition.longMovement.createObject(this)
+            }
+        }
+        
+        WSlider {
+            Layout.fillWidth: true
+            value: root.brightnessMonitor.brightness
+            onMoved: {
+                root.brightnessMonitor.setBrightness(value)
+            }
+        }
+
+        WPanelIconButton {
+            opacity: 0
         }
     }
+    
+    RowLayout {
+        spacing: 4
 
-    WPanelIconButton {
-        contentItem: Item {
-            anchors.centerIn: parent
-            Row {
+        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
-                spacing: -1
-                FluentIcon {
-                    anchors.verticalCenter: parent.verticalCenter
-                    implicitSize: 18
-                    icon: "options"
-                }
-                FluentIcon {
-                    anchors.verticalCenter: parent.verticalCenter
-                    implicitSize: 12
-                    icon: "chevron-right"
+                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"
+                    }
                 }
             }
         }
     }
-}
+
+}