From c6d30fdb0a48a10ef56b44b816e78d757f38c7b9 Mon Sep 17 00:00:00 2001
From: restitux <restitux@ohea.xyz>
Date: Mon, 22 Aug 2022 21:38:35 -0400
Subject: [PATCH] Add animations for ContentViewElement selector

---
 layouts/components/ContentViewElement.qml | 34 +++++++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/layouts/components/ContentViewElement.qml b/layouts/components/ContentViewElement.qml
index addfae5..c9b4457 100644
--- a/layouts/components/ContentViewElement.qml
+++ b/layouts/components/ContentViewElement.qml
@@ -41,8 +41,9 @@ Column {
                     property int childWidth: 300 * 0.68
                     property int borderWidth: 7
                     property int borderRadius: 7
-                    height: 300
-                    width: (300 * 0.68) + 14
+                    height: 300 + (borderWidth * 2)
+                    width: (300 * 0.68) + (borderWidth * 2)
+                    state: (elemSelected && (index == xIndex)) ? "selected" : "deselected"
                     Image {
                         height: parent.childHeight
                         width: parent.childWidth
@@ -52,14 +53,41 @@ Column {
                         mipmap: true
                     }
                     Rectangle {
+                        id: rect
                         color: "transparent"
                         border.color: "orange"
                         width: parent.width
                         height: parent.height
                         border.width: parent.borderWidth
                         radius: parent.borderRadius
-                        visible: elemSelected && (index == xIndex)
                     }
+                    states: [
+                        State {
+                            name: "deselected"
+                            PropertyChanges {
+                                target: rect
+                                border.width: 0
+                                //visible: false
+                            }
+                        },
+                        State {
+                            name: "selected"
+                            PropertyChanges {
+                                target: rect
+                                border.width: parent.borderWidth
+                            }
+                        }
+                    ]
+                    transitions: [
+                        Transition {
+                            NumberAnimation {
+                                properties: "border.width"
+                                duration: 50
+                                easing.type: Easing.Linear
+                            }
+                        }
+                    ]
+
                 }
                 Item {width: 1; height: 15}
                 Text {