gallery: basic model/view for notifications

app/qmlV2/component/MMInput.qml

@@ -23,6 +23,8 @@ Item {
   property string warningMsg
   property string errorMsg
 
+  signal enterPressed()
+
   width: 280 * __dp
   height: rect.height + messageItem.height
 
@@ -106,6 +108,13 @@ Item {
         background: Rectangle {
           color: Style.transparent
         }
+
+        Keys.onPressed: (event) => {
+          if ( event.key === Qt.Key_Return || event.key === Qt.Key_Enter ) {
+            control.enterPressed()
+            event.accepted = true
+          }
+        }
       }
 
       MMIcon {

app/qmlV2/component/MMNotification.qml

@@ -0,0 +1,52 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import "../Style.js" as Style
+
+Row {
+  id: notification
+
+  width: listView.width * 0.95
+  height: 25
+  anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
+
+  Rectangle {
+    width: parent.width
+    height: parent.height
+    color: "#BBFFFFFF" // Style.white
+    border.color: Style.mediumGreen
+    border.width: 1
+    radius: 5
+    Text {
+      anchors.fill: parent
+      anchors.leftMargin: 5
+      text: message
+      color: Style.forest
+      verticalAlignment: Text.AlignVCenter
+      horizontalAlignment: Text.AlignRight
+      rightPadding: 20
+    }
+    Text {
+      anchors.right: parent.right
+      anchors.rightMargin: 5
+      height: parent.height
+      verticalAlignment: Text.AlignVCenter
+      scale: maRemove.containsMouse ? 1.2 : 1
+      text: "✘"
+      color: maRemove.containsMouse ? Style.forest : Style.mediumGreen
+      MouseArea {
+        id: maRemove
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: _notificationModel.remove(id)
+      }
+    }
+  }
+}

app/qmlV2/component/MMNotificationView.qml

@@ -0,0 +1,53 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+import QtQuick
+import "../Style.js" as Style
+
+Item {
+  id: control
+
+  z: 100
+  anchors.top: parent.top
+  width: parent.width
+  height: parent.height
+
+  Rectangle {
+    anchors.bottom: parent.bottom
+    width: control.width
+    height: 20
+    color: Style.white
+
+    Text {
+      text: listView.count
+      anchors.centerIn: parent
+      color: Style.forest
+    }
+  }
+
+  ListView {
+    id: listView
+
+    anchors.top: parent.top
+    width: parent.width
+    height: 25 * listView.count + spacing * (listView.count - 1)
+    spacing: 3
+    clip: true
+    model: _notificationModel
+    delegate: MMNotification {
+
+    }
+
+    add: Transition {
+      NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }
+      NumberAnimation { property: "scale"; easing.type: Easing.OutCubic; from: 0; to: 1.0; duration: 200 }
+    }
+
+  }
+}

gallery/CMakeLists.txt

@@ -29,9 +29,9 @@ find_package(
 qt_standard_project_setup()
 qt_policy(SET QTP0001 NEW)
 
-set(GALLERY_HDRS helper.h)
+set(GALLERY_HDRS helper.h notificationmodel.h)
 
-set(GALLERY_SRCS helper.cpp)
+set(GALLERY_SRCS helper.cpp notificationmodel.cpp)
 
 if (IOS OR ANDROID)
   add_compile_definitions(MOBILE_OS)

gallery/main.cpp

@@ -16,6 +16,7 @@
 #include "helper.h"
 #include <QFont>
 #include <QFontDatabase>
+#include "notificationmodel.h"
 
 int main( int argc, char *argv[] )
 {
@@ -30,6 +31,9 @@ int main( int argc, char *argv[] )
   engine.rootContext()->setContextProperty( "_hotReload", &hotReload );
 #endif
 
+  NotificationModel notificationModel;
+  engine.rootContext()->setContextProperty("_notificationModel", &notificationModel);
+
   // path to local wrapper pages
   engine.rootContext()->setContextProperty( "_qmlWrapperPath", QGuiApplication::applicationDirPath() + "/HotReload/qml/pages/" );
   engine.rootContext()->setContextProperty( "__dp", Helper::calculateDpRatio() );

gallery/mobile.qrc

@@ -12,5 +12,7 @@
         <file>app/qmlV2/component/MMCheckBox.qml</file>
         <file>app/qmlV2/component/MMRadioButton.qml</file>
         <file>app/qmlV2/component/MMSwitch.qml</file>
+        <file>app/qmlV2/component/MMNotification.qml</file>
+        <file>app/qmlV2/component/MMNotificationView.qml</file>
     </qresource>
 </RCC>

gallery/notificationmodel.cpp

@@ -0,0 +1,86 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+#include "notificationmodel.h"
+
+Notification::Notification(uint id, const QString &message, uint interval, MessageType type = Information)
+{
+  mId = id;
+  mMessage = message;
+  mInterval = interval;
+  mType = type;
+}
+
+NotificationModel::NotificationModel(QObject *parent) : QAbstractListModel{parent}
+{
+  // Initial data
+  _notifications << Notification{ nextId(), "Ahoj", 10 };
+  _notifications << Notification{ nextId(), "Hello all", 5 };
+}
+
+QHash<int, QByteArray> NotificationModel::roleNames() const
+{
+  return {
+      { IdRole, "id" },
+      { MessageRole, "message" },
+      { TypeRole, "type" }
+  };
+}
+
+int NotificationModel::rowCount(const QModelIndex &parent) const
+{
+  Q_UNUSED(parent)
+  return _notifications.size();
+}
+
+QVariant NotificationModel::data(const QModelIndex &index, int role) const
+{
+  if (!hasIndex(index.row(), index.column(), index.parent()))
+    return {};
+
+  Notification notification = _notifications.at(index.row());
+  if (role == IdRole) return notification.id();
+  if (role == MessageRole) return notification.message();
+  if (role == TypeRole) return notification.type();
+
+  return {};
+}
+
+// remove item by message
+void NotificationModel::remove(uint id)
+{
+  for(int i=0; i<_notifications.count(); i++) {
+    if(_notifications[i].id() == id) {
+      beginRemoveRows(QModelIndex(), i, i);
+      _notifications.removeAt(i);
+      endRemoveRows();
+
+      emit dataChanged(createIndex(0, 0), createIndex(rowCount(), 0)); // refresh whole model
+      emit rowCountChanged();
+      return;
+    }
+  }
+}
+
+// add new unique message with interval
+void NotificationModel::add(const QString &message, uint interval, Notification::MessageType type = Notification::Information)
+{
+  for(Notification &notification : _notifications) {
+    if(notification.message() == message)
+      return;
+  }
+
+  beginInsertRows(QModelIndex(), rowCount(), rowCount());
+  _notifications << Notification{ nextId(), message, interval, type };
+  endInsertRows();
+
+  emit rowCountChanged();
+}
+
+

gallery/notificationmodel.h

@@ -0,0 +1,70 @@
+/***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU General Public License as published by  *
+ *   the Free Software Foundation; either version 2 of the License, or     *
+ *   (at your option) any later version.                                   *
+ *                                                                         *
+ ***************************************************************************/
+
+#ifndef NOTIFICATIONMODEL_H
+#define NOTIFICATIONMODEL_H
+
+#include "qqmlintegration.h"
+#include <QAbstractListModel>
+
+class Notification
+{
+  Q_GADGET
+
+  public:
+  enum MessageType {
+    Information,
+    Warning,
+    Error
+  };
+  Q_ENUM(MessageType)
+
+  Notification(uint id, const QString &message, uint interval, MessageType type);
+  uint id() { return mId; }
+  QString message() { return mMessage; }
+  MessageType type() { return mType; }
+
+  private:
+  uint mId;
+  QString mMessage;
+  uint mInterval; // [seconds]
+  MessageType mType = Information;
+};
+
+class NotificationModel : public QAbstractListModel
+{
+  Q_OBJECT
+
+  public:
+  enum MyRoles {
+    IdRole = Qt::UserRole + 1, MessageRole, TypeRole
+  };
+  Q_ENUM(MyRoles)
+
+  NotificationModel(QObject *parent = nullptr);
+
+  QHash<int,QByteArray> roleNames() const override;
+  int rowCount(const QModelIndex & parent = QModelIndex()) const override;
+  QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override;
+
+  Q_PROPERTY(int rowCount READ rowCount NOTIFY rowCountChanged);
+  Q_INVOKABLE void remove(uint id);
+  Q_INVOKABLE void add(const QString &message, uint interval, Notification::MessageType type);
+
+  private:
+  uint nextId() { static uint id = 0; return id++; }
+
+  signals:
+  void rowCountChanged();
+
+  private:
+  QList<Notification> _notifications;
+};
+
+#endif // NOTIFICATIONMODEL_H

gallery/qml.qrc

@@ -20,5 +20,8 @@
         <file>../app/qmlV2/component/MMCheckBox.qml</file>
         <file>../app/qmlV2/component/MMRadioButton.qml</file>
         <file>../app/qmlV2/component/MMSwitch.qml</file>
+        <file>qml/pages/NotificationPage.qml</file>
+        <file>../app/qmlV2/component/MMNotification.qml</file>
+        <file>../app/qmlV2/component/MMNotificationView.qml</file>
     </qresource>
 </RCC>

gallery/qml/Main.qml

@@ -100,6 +100,10 @@ ApplicationWindow {
       }
 
       model: ListModel {
+        ListElement {
+          title: "Initial"
+          source: "InitialGalleryPage.qml"
+        }
         ListElement {
           title: "Buttons"
           source: "ButtonsPage.qml"
@@ -120,6 +124,10 @@ ApplicationWindow {
           title: "Checks"
           source: "ChecksPage.qml"
         }
+        ListElement {
+          title: "Notifications"
+          source: "NotificationPage.qml"
+        }
       }
 
       ScrollIndicator.vertical: ScrollIndicator {}