Add error message popup

qml/pages/ServerPage.qml

@@ -59,14 +59,77 @@ Page {
     }
 
     function showError( message ) {
-        // TODO: display this message to the user
+        errorMessageText.text = message
-        console.error( message )
+        showErrorWidget.start()
+        hideErrorWidgetTimer.start()
     }
 
     Component.onCompleted: {
         updateArticlesList()
     }
 
+    Rectangle {
+        id: errorMessageWidget
+        width: parent.width
+        height: errorMessageText.contentHeight + 2 * Theme.horizontalPageMargin
+        y: - height
+        z: 5
+        color: Theme.highlightBackgroundColor
+
+        Timer {
+            id: hideErrorWidgetTimer
+            repeat: false
+            interval: 5000
+
+            onTriggered: {
+                hideErrorWidget.start()
+            }
+        }
+
+        ParallelAnimation {
+            id: showErrorWidget
+
+            PropertyAnimation {
+                target: errorMessageWidget
+                property: "y"
+                to: 0
+                duration: 150
+                easing.type: Easing.InOutQuad
+            }
+        }
+
+        ParallelAnimation {
+            id: hideErrorWidget
+
+            PropertyAnimation {
+                target: errorMessageWidget
+                property: "y"
+                to: - errorMessageWidget.height
+                duration: 300
+                easing.type: Easing.InOutQuad
+            }
+        }
+
+        MouseArea {
+            id: errorMessageContainer
+            anchors.fill: parent
+
+            Label {
+                id: errorMessageText
+                x: Theme.horizontalPageMargin
+                width: parent.width - 2 * Theme.horizontalPageMargin
+                anchors.top: errorMessageContainer.top
+                anchors.topMargin: Theme.horizontalPageMargin
+                wrapMode: Text.WordWrap
+            }
+
+            onClicked: {
+                hideErrorWidgetTimer.stop()
+                hideErrorWidget.start()
+            }
+        }
+    }
+
     MouseArea {
         id: busyContainer
         visible: !articlesModel.loaded