Animate Sidebar ContentView focus switch

2022-08-31 18:28:53 -04:00
parent 1d8d00a7f2
commit 552e18a42f
4 changed files with 63 additions and 4 deletions
@@ -5,11 +5,13 @@ import Ikinuki.Client 1.0
 Rectangle {
    id: rect
    property var providers
+    property bool maximized: true
    property int selectedElement: 0
    property var max_elements: providers.length
    width: parent.width * 0.2
    height: parent.height
    color: "#22282A"
+    state: maximized ? "maximized" : "minimized"
    //color: "#0a3d4a"
    Column {
        anchors.fill: parent
@@ -19,10 +21,36 @@ Rectangle {
            model: providers
            SidebarElement {
                provider: modelData
+                maximized: rect.maximized
                selected: (index == selectedElement) ? true : false
            }
        }
    }
+    states: [
+        State {
+            name: "minimized"
+            PropertyChanges {
+                target: rect
+                width: parent.width * 0.05
+            }
+        },
+        State {
+            name: "maximized"
+            PropertyChanges {
+                target: rect
+                width: parent.width * 0.2
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            NumberAnimation {
+                properties: "width"
+                duration: 150
+                easing.type: Easing.Linear
+            }
+        }
+    ]
    function mod(n, m) {
        return ((n % m) + m) % m;
    }