3 files changed, 77 insertions, 0 deletions

diff --git a/components/mail/contents/ui/Mail.qml b/components/mail/contents/ui/Mail.qml
index 334e5a96..3cc0d4f4 100644
--- a/components/mail/contents/ui/Mail.qml
+++ b/components/mail/contents/ui/Mail.qml
@@ -48,6 +48,7 @@ Controls2.ApplicationWindow {
             if (n.type == KubeNotifications.Notification.Warning) {
                 console.warn("And it's a warning!", n.type)
             }
+            notificationPopup.notify(n.message);
         }
     }
 
@@ -325,6 +326,10 @@ Controls2.ApplicationWindow {
     }
     //END AccountWizard
 
+    KubeComponents.Notification {
+        id: notificationPopup
+    }
+
     //BEGIN Search
     Controls2.Popup {
         id: search
diff --git a/components/package/contents/ui/Notification.qml b/components/package/contents/ui/Notification.qml
new file mode 100644
index 00000000..62128961
--- /dev/null
+++ b/components/package/contents/ui/Notification.qml
@@ -0,0 +1,71 @@
+import QtQuick 2.0
+import QtQuick.Controls 2.0
+import org.kde.kirigami 1.0 as Kirigami
+
+MouseArea {
+    id: popup
+    anchors.top: parent.top
+    anchors.horizontalCenter: parent.horizontalCenter
+    width: Math.max(300, message.contentWidth + (Kirigami.Units.gridUnit * 2))
+    height: message.contentHeight + (Kirigami.Units.gridUnit * 2)
+    property alias title: message.text
+    property alias timeout: hideTimer.interval
+    property alias background: bg.color
+    visible: opacity > 0
+    opacity: 0.0
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 200
+            easing.type: Easing.InOutQuad
+            property: "opacity"
+        }
+    }
+
+    Rectangle {
+        id: bg
+        anchors.fill: parent
+    }
+
+    Timer {
+        id: hideTimer
+        triggeredOnStart: false
+        repeat: false
+        interval: 5000
+        onTriggered: popup.hide()
+    }
+
+    function hide() {
+        if (hideTimer.running)
+            hideTimer.stop()
+        popup.opacity = 0.0
+    }
+
+    function show() {
+        console.warn("Trying to show the notification", title);
+        popup.opacity = 1.0
+        hideTimer.restart()
+    }
+
+    function notify(text) {
+        popup.title = text
+        bg.color = Kirigami.Theme.highlightColor
+        show()
+    }
+
+    Label {
+        id: message
+        anchors.verticalCenter: popup.verticalCenter
+        font.pixelSize: 16
+        color: Kirigami.Theme.highlightedTextColor
+        anchors.left: parent.left
+        anchors.leftMargin: Kirigami.Units.gridUnit
+        anchors.right: parent.right
+        anchors.rightMargin: Kirigami.Units.gridUnit
+        horizontalAlignment: Text.AlignHCenter
+        elide: Text.ElideRight
+        wrapMode: Text.Wrap
+    }
+
+    onClicked: hide()
+}
diff --git a/components/qmldir b/components/qmldir
index 1135ce4e..94ac9caf 100644
--- a/components/qmldir
+++ b/components/qmldir
@@ -11,3 +11,4 @@ EditAccountDialog 1.0 EditAccountDialog.qml
 OverlayDialog 1.0 OverlayDialog.qml
 Outbox 1.0 Outbox.qml
 People 1.0 People.qml
+Notification 1.0 Notification.qml