feat: add bouncy animation to buttons

src/Dashboard.qml

@@ -85,7 +85,6 @@ PanelWindow {
                     height: parent.height
                     width: parent.width
                     Layout.margins: 15
-                    clip: true
 
                     Component.onCompleted: NyshState.dashOpenChanged.connect(() => {
                         if (!NyshState.dashOpen) {

src/MainBar.qml

@@ -21,11 +21,7 @@ PanelWindow {
         bottom: true
     }
 
-    margins.left: 2
-    margins.top: 2
-    margins.bottom: 2
-
-    width: 30
+    width: 40
     color: "transparent"
 
     NotificationToasts {
@@ -34,13 +30,16 @@ PanelWindow {
 
     Rectangle {
         color: "transparent"
-        anchors.margins: 5
+        anchors.alignWhenCentered: true
+        anchors.centerIn: parent
 
         height: parent.height
         width: parent.width
 
         ColumnLayout {
             width: 30
+            anchors.horizontalCenter: parent.horizontalCenter
+
             Layout.maximumWidth: 30
 
             // TODO: on click open a calendar view
@@ -66,15 +65,12 @@ PanelWindow {
                 width: parent.width
                 height: parent.width
             }
-
-            Item {
-                Layout.fillHeight: true
-            }
         }
 
         BButton {
             id: mouse
             onClicked: NyshState.toggleDash()
+
             IconImage {
                 source: {
                     if (NyshState.dndOn)
@@ -88,6 +84,8 @@ PanelWindow {
                 anchors.fill: parent
             }
 
+            anchors.horizontalCenter: parent.horizontalCenter
+
             height: width
             width: 30
             anchors.bottom: parent.bottom

src/base/BButton.qml

@@ -8,37 +8,48 @@ MouseArea {
 
     cursorShape: Qt.PointingHandCursor
 
-    onClicked: {
-        click.color = "red";
-        b.start();
-    }
-
     hoverEnabled: true
 
     BRectangle {
-        id: click
-        anchors.fill: parent
-        color: Qt.darker(Config.colourMain, 1.1)
-
-        ColorAnimation on color {
-            id: b
-
-            to: Qt.darker(Config.colourMain, 1.1)
-            duration: 300
-        }
-
-        Rectangle {
-            id: hover
-            visible: mouse.containsMouse
-            anchors.fill: parent
-            radius: parent.radius
-            color: "#9F9F9FC8"
-        }
+        id: self
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
 
         Text {
             visible: mouse.text?.length > 0
             text: mouse.text
             anchors.centerIn: parent
         }
+
+        states: [
+            State {
+                name: "moved"
+                when: mouse.containsMouse && !mouse.pressed
+                PropertyChanges {
+                    target: self
+                    width: mouse.width + 3
+                    height: mouse.height + 3
+                }
+            },
+            State {
+                name: "clicked"
+                when: mouse.pressed
+                PropertyChanges {
+                    target: self
+                    width: mouse.width - 3
+                    height: mouse.height - 3
+                }
+            }
+        ]
+
+        transitions: Transition {
+            NumberAnimation {
+                properties: "width,height"
+                easing.type: Easing.OutBack
+                easing.overshoot: 5
+                duration: 200
+            }
+        }
     }
 }

src/widgets/caffeine/Caffeine.qml

@@ -1,16 +1,17 @@
 import "../../base"
 import "../../provider"
 
+import QtQuick
 import Quickshell.Widgets
 
 BButton {
     id: caffeine
 
+    onClicked: () => Inhibitor.toggle()
+
     IconImage {
         anchors.fill: parent
         anchors.margins: 4
         source: Inhibitor.active ? "root:assets/eye-open.svg" : "root:assets/eye-closed.svg"
     }
-
-    onClicked: () => Inhibitor.toggle()
 }