From 0da0c35a16321e49d32a10336730db8e9a72ccbe Mon Sep 17 00:00:00 2001
From: Nydragon <contact@ccnlc.eu>
Date: Sat, 1 Feb 2025 19:19:30 +0100
Subject: [PATCH] feat: add bouncy animation to buttons

---
 src/MainBar.qml                   | 11 +++----
 src/base/BButton.qml              | 55 ++++++++++++++++++-------------
 src/widgets/caffeine/Caffeine.qml |  5 +--
 3 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/src/MainBar.qml b/src/MainBar.qml
index 40581df..3e88981 100644
--- a/src/MainBar.qml
+++ b/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
diff --git a/src/base/BButton.qml b/src/base/BButton.qml
index 459fb4e..f32f6c7 100644
--- a/src/base/BButton.qml
+++ b/src/base/BButton.qml
@@ -8,37 +8,46 @@ 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
 
         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 < mouse.height ? mouse.width : mouse.height) * 1.1
+                    height: (mouse.width < mouse.height ? mouse.width : mouse.height) * 1.1
+                }
+            },
+            State {
+                name: "clicked"
+                when: mouse.pressed
+                PropertyChanges {
+                    target: self
+                    width: (mouse.width < mouse.height ? mouse.width : mouse.height) * 0.9
+                    height: (mouse.width < mouse.height ? mouse.width : mouse.height) * 0.9
+                }
+            }
+        ]
+
+        transitions: Transition {
+            NumberAnimation {
+                properties: "width,height"
+                easing.type: Easing.OutBack
+                easing.overshoot: 5
+                duration: 200
+            }
+        }
     }
 }
diff --git a/src/widgets/caffeine/Caffeine.qml b/src/widgets/caffeine/Caffeine.qml
index 0f6dfd7..67af8ff 100644
--- a/src/widgets/caffeine/Caffeine.qml
+++ b/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()
 }