Add hover animation

qml/StandardItem.qml

@@ -28,8 +28,13 @@ import Cutefish.StatusBar 1.0
 Item {
     id: control
 
+    property real moveX: 0
+    property real moveY: 0
+
     property string popupText: ""
+
     property bool checked: false
+    property bool animationEnabled: false
 
     signal clicked
     signal rightClicked
@@ -40,6 +45,18 @@ Item {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
 
+        onEntered: {
+            _bgRect.x = mouseX
+            _bgRect.y = mouseY
+            _bgRect.state = "shown"
+        }
+
+        onExited: {
+            control.moveX = mouseX
+            control.moveY = mouseY
+            _bgRect.state = "hidden"
+        }
+
         onClicked: {
             if (mouse.button == Qt.LeftButton)
                 control.clicked()
@@ -64,24 +81,85 @@ Item {
     }
 
     Rectangle {
-        anchors.fill: parent
-        anchors.topMargin: 1
-        anchors.bottomMargin: 1
+        id: _bgRect
         radius: FishUI.Theme.smallRadius
 
+        state: "hidden"
+        states: [
+            State {
+                name: "shown"
+                PropertyChanges {
+                    target: _bgRect
+                    x: 0
+                    y: 1
+                    width: control.width
+                    height: control.height - 2
+                    visible: true
+                }
+            },
+            State {
+                name: "hidden"
+                PropertyChanges {
+                    target: _bgRect
+                    x: control.moveX
+                    y: control.moveY
+                    width: 0
+                    height: 0
+                    visible: false
+                }
+            }
+        ]
+
+        transitions:[
+            Transition {
+                from: "hidden"
+                to: "shown"
+
+                SequentialAnimation{
+                    PropertyAnimation {
+                        target: _bgRect
+                        properties: "visible"
+                        duration: 0
+                        easing.type: Easing.OutQuart
+                    }
+                    PropertyAnimation {
+                        target: _bgRect
+                        properties: "x, y, width, height"
+                        duration: control.animationEnabled ? 400 : 0
+                        easing.type: Easing.OutQuart
+                    }
+                }
+            },
+            Transition {
+                from: "shown"
+                to: "hidden"
+
+                SequentialAnimation{
+                    PropertyAnimation {
+                        target: _bgRect
+                        properties: "x, y, width, height"
+                        duration: control.animationEnabled ? 200 : 0
+                        easing.type: Easing.OutQuart
+                    }
+                    PropertyAnimation {
+                        target: _bgRect
+                        properties: "visible"
+                        duration: 0
+                        easing.type: Easing.OutQuart
+                    }
+                }
+            }
+        ]
+
         color: {
             if (control.checked) {
                 return (rootItem.darkMode) ? Qt.rgba(255, 255, 255, 0.2) : Qt.rgba(0, 0, 0, 0.1)
             }
 
-            if (_mouseArea.containsMouse) {
-                if (_mouseArea.containsPress)
-                    return (rootItem.darkMode) ? Qt.rgba(255, 255, 255, 0.3) : Qt.rgba(0, 0, 0, 0.2)
-                else
-                    return (rootItem.darkMode) ? Qt.rgba(255, 255, 255, 0.2) : Qt.rgba(0, 0, 0, 0.1)
-            }
-
-            return "transparent"
+            if (_mouseArea.containsPress)
+                return (rootItem.darkMode) ? Qt.rgba(255, 255, 255, 0.3) : Qt.rgba(0, 0, 0, 0.2)
+            else
+                return (rootItem.darkMode) ? Qt.rgba(255, 255, 255, 0.2) : Qt.rgba(0, 0, 0, 0.1)
         }
     }
 }

qml/main.qml

@@ -233,10 +233,12 @@ Item {
             }
 
             delegate: StandardItem {
+                property bool darkMode: rootItem.darkMode
+
                 width: trayView.itemWidth
                 height: ListView.view.height
+                animationEnabled: true
 
-                property bool darkMode: rootItem.darkMode
                 onDarkModeChanged: updateTimer.restart()
 
                 Timer {
@@ -262,6 +264,7 @@ Item {
         StandardItem {
             id: controler
 
+            animationEnabled: true
             Layout.fillHeight: true
             Layout.preferredWidth: _controlerLayout.implicitWidth + FishUI.Units.largeSpacing
 
@@ -339,6 +342,7 @@ Item {
         StandardItem {
             id: datetimeItem
 
+            animationEnabled: true
             Layout.fillHeight: true
             Layout.preferredWidth: _dateTimeLayout.implicitWidth + FishUI.Units.smallSpacing