From 4653182bc010e37d9bc89ea087730acf4e7b1b39 Mon Sep 17 00:00:00 2001
From: Dorian Zedler <dorian@itsblue.de>
Date: Sun, 15 Jul 2018 22:03:10 +0200
Subject: [PATCH] added animation to error field

---
 qml/AppToolBar.qml | 52 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/qml/AppToolBar.qml b/qml/AppToolBar.qml
index 1e1f341..efe3643 100644
--- a/qml/AppToolBar.qml
+++ b/qml/AppToolBar.qml
@@ -3,18 +3,40 @@ import QtQuick.Controls 2.1
 import QtQuick.Controls.Material 2.1
 
 ToolBar {
+    id: toolBar
     property bool showErrorBar: true
     Material.theme: Material.Light
     Rectangle {
         id: errorField
         width: parent.width
         height: 30
-        visible: window.is_error & stackView.currentItem.objectName !== "LoginPage" & showErrorBar
+        enabled: window.is_error & stackView.currentItem.objectName !== "LoginPage" & showErrorBar
         anchors.top: parent.bottom
+
         color: "red"
+        onEnabledChanged: {
+            if(enabled){
+                toolBar.state = 'moveIn'
+            }
+            else {
+                toolBar.state = 'moveOut'
+            }
+        }
+
+        MouseArea { anchors.fill: parent; onClicked: {
+                toolBar.state = 'moveOut'
+
+                console.log("clicked")
+            }
+        }
+
         Text {
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors {
+                top: parent.top
+                horizontalCenter: parent.horizontalCenter
+                topMargin: ( parent.height / 2 ) - ( height / 2 )
+            }
+
             id: errorText
             font.family: "Helvetica"
             color: "White"
@@ -23,4 +45,28 @@ ToolBar {
             text: window.error
         }
     }
+
+    states: [
+            State {
+                name: "moveOut"
+                PropertyChanges { target: errorField; height: 0 }
+                PropertyChanges { target: errorText; height: 0 }
+            },
+            State {
+                name: "moveIn"
+                PropertyChanges { target: errorField; height: 30 }
+                PropertyChanges { target: errorText; height: 0 }
+            }
+        ]
+
+    transitions: [
+        Transition {
+            to: "moveOut"
+            NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: 200 }
+        },
+        Transition {
+            to: "moveIn"
+            NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: 200 }
+        }
+    ]
 }