Implement notification layer backend and qml component for tray window

Signed-off-by: Dominique Fuchs <[email protected]>

resources.qrc

@@ -1,6 +1,7 @@
 <RCC>
     <qresource prefix="/qml">
         <file>src/gui/tray/Window.qml</file>
+        <file>src/gui/tray/Notification.qml</file>
         <file>src/gui/tray/UserLine.qml</file>
         <file>src/gui/tray/HeaderButton.qml</file>
         <file>theme/Style/Style.qml</file>

src/gui/CMakeLists.txt

@@ -40,6 +40,8 @@ set(client_UI_SRCS
     mnemonicdialog.ui
     tray/Window.qml
     tray/UserLine.qml
+    tray/HeaderButton.qml
+    tray/Notification.qml
     wizard/flow2authwidget.ui
     wizard/owncloudadvancedsetuppage.ui
     wizard/owncloudconnectionmethoddialog.ui

src/gui/systray.cpp

@@ -60,7 +60,8 @@ void Systray::setTrayEngine(QQmlApplicationEngine *trayEngine)
 }
 
 Systray::Systray()
-    : QSystemTrayIcon(nullptr)
+    : QSystemTrayIcon(nullptr),
+      _notificationList(QStringList())
 {
     qmlRegisterSingletonType<UserModel>("com.nextcloud.desktopclient", 1, 0, "UserModel",
         [](QQmlEngine *, QJSEngine *) -> QObject * {
@@ -188,6 +189,20 @@ void Systray::pauseResumeSync()
     }
 }
 
+QString Systray::getLastNotification() const {
+    if (!_notificationList.isEmpty()) {
+        return _notificationList.last();
+    } else {
+        return QString();
+    }
+}
+
+void Systray::dismissLastNotification() {
+    if (!_notificationList.isEmpty()) {
+        _notificationList.removeLast();
+    }
+}
+
 /********************************************************************************************/
 /* Helper functions for cross-platform tray icon position and taskbar orientation detection */
 /********************************************************************************************/

src/gui/systray.h

@@ -57,6 +57,9 @@ class Systray
     Q_INVOKABLE void setOpened();
     Q_INVOKABLE void setClosed();
     Q_INVOKABLE void positionWindow(QQuickWindow *window) const;
+    Q_INVOKABLE bool hasNotification() const { return !_notificationList.isEmpty(); }
+    Q_INVOKABLE QString getLastNotification() const;
+    Q_INVOKABLE void dismissLastNotification();
 
 signals:
     void currentUserChanged();
@@ -71,6 +74,7 @@ class Systray
     Q_INVOKABLE void hideWindow();
     Q_INVOKABLE void showWindow();
     Q_INVOKABLE void openShareDialog(const QString &sharePath, const QString &localPath);
+    Q_INVOKABLE void newNotification();
 
 public slots:
     void slotNewUserSelected();
@@ -90,6 +94,8 @@ public slots:
     bool _isOpen = false;
     bool _syncIsPaused = true;
     QPointer<QQmlApplicationEngine> _trayEngine;
+
+    QStringList _notificationList;
 };
 
 } // namespace OCC

src/gui/tray/Notification.qml

@@ -0,0 +1,85 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.2
+
+// Custom qml modules are in /theme (and included by resources.qrc)
+import Style 1.0
+
+Item {
+    id: notificationItem
+    property alias text: notificationMessage.text
+    signal dismissNotification()
+
+    width: parent.width - Style.trayWindowBorderWidth*2
+    height: Style.notificationHeight
+    anchors.bottom: parent.bottom
+    anchors.horizontalCenter: parent.horizontalCente
+
+    Rectangle {
+        id: roundedBackground
+        width: parent.width
+        height: parent.height
+        anchors.bottom: parent.bottom
+        color: Style.lightMessage
+        radius: Style.trayWindowRadius
+    }
+
+    Rectangle {
+        width: parent.width
+        height: roundedBackground.radius
+        anchors.top: parent.top
+        color: Style.lightMessage
+    }
+
+    RowLayout {
+        width: parent.width
+        height: parent.height
+        spacing: 4
+        Layout.alignment: Qt.AlignVCenter
+
+        Image {
+            id: messageIcon
+            anchors.left: parent.left
+            anchors.leftMargin: 8
+            anchors.rightMargin: 8
+            Layout.preferredWidth: dismissButton.icon.width
+            Layout.preferredHeight: dismissButton.icon.height
+            verticalAlignment: Qt.AlignCenter
+            cache: true
+            source: "qrc:///client/theme/info.svg"
+            sourceSize.height: 64
+            sourceSize.width: 64
+        }
+
+        Text {
+            id: notificationMessage
+            anchors.left: messageIcon.right
+            anchors.leftMargin: 8
+            text: msgText
+            font.pixelSize: Style.topLinePixelSize
+            Layout.preferredWidth: Style.notificationLabelWidth
+            wrapMode: Text.WordWrap
+            maximumLineCount: 3
+            elide: Text.ElideRight
+        }
+
+        Button {
+            id: dismissButton
+            anchors.right: parent.right
+            anchors.rightMargin: 4
+            Layout.alignment: Qt.AlignRight
+            flat: true
+            hoverEnabled: true
+            display: AbstractButton.IconOnly
+            icon.source: "qrc:///client/theme/close.svg"
+            icon.color: "transparent"
+            background: Rectangle {
+                color: parent.hovered ? Style.lightHover : "transparent"
+            }
+            ToolTip.visible: hovered
+            ToolTip.delay: 1000
+            ToolTip.text: qsTr("Dismiss this message")
+            onClicked: notificationItem.dismissNotification()
+        }
+    }
+}

src/gui/tray/Window.qml

@@ -41,6 +41,15 @@ Window {
         userLineInstantiator.active = true;
     }
 
+    Connections {
+        target: notificationLayer
+        ignoreUnknownSignals: true
+        onDismissNotification: {
+            Systray.dismissLastNotification()
+            notificationLayer.visible = Systray.hasNotification()
+        }
+    }
+
     Connections {
         target: UserModel
         onRefreshCurrentUserGui: {
@@ -73,6 +82,10 @@ Window {
             trayWindow.hide();
             Systray.setClosed();
         }
+        onNewNotification: {
+            notificationLayer.text = Systray.getLastNotification();
+            notificationLayer.visible = true;
+        }
     }
 
     OpacityMask {
@@ -450,7 +463,8 @@ Window {
             anchors.top: trayWindowHeaderBackground.bottom
             anchors.horizontalCenter: trayWindowBackground.horizontalCenter
             width:  Style.trayWindowWidth - Style.trayWindowBorderWidth
-            height: Style.trayWindowHeight - Style.trayWindowHeaderHeight
+            height: notificationLayer.visible ? Style.trayWindowHeight - Style.trayWindowHeaderHeight - Style.notificationHeight
+                                              : Style.trayWindowHeight - Style.trayWindowHeaderHeight
             clip: true
             ScrollBar.vertical: ScrollBar {
                 id: listViewScrollbar
@@ -586,7 +600,14 @@ Window {
             displaced: Transition {
                 NumberAnimation { properties: "y"; duration: 100; easing.type: Easing.Linear }
             }*/
+
+        }   // ListView
+
+        Notification {
+            id: notificationLayer
+            visible: Systray.hasNotification()
+            text: Systray.getLastNotification()
         }
 
-    }       // Rectangle trayWindowBackground
+    }   // Rectangle trayWindowBackground
 }

theme.qrc

@@ -162,5 +162,6 @@
         <file>theme/colored/Nextcloud-sidebar.svg</file>
         <file>theme/add.svg</file>
         <file>theme/share.svg</file>
+        <file>theme/info.svg</file>
     </qresource>
 </RCC>

theme/Style/Style.qml

@@ -8,6 +8,7 @@ QtObject {
     property color ncBlue:      "#0082c9"
     property color ncBlueHover: "#009dd9"
     property color lightHover:  "#f7f7f7"
+    property color lightMessage:"#fafafa"
     property color menuBorder:  "#bdbdbd"
 
     // Fonts
@@ -39,6 +40,10 @@ QtObject {
 
     property int activityLabelBaseWidth: 240
 
+    property int notificationLabelWidth: 316
+
+    property int notificationHeight: 60
+
     // Visual behaviour
     property bool hoverEffectsEnabled: true
 }