gallery: basic model/view for notifications

app/icons/icons.qrc

@@ -11,5 +11,8 @@
         <file>Arrow Up.svg</file>
         <file>QR Code.svg</file>
         <file>Checkmark.svg</file>
+        <file>CloseButton.svg</file>
+        <file>UploadImage.svg</file>
+        <file>ReachedDataLimitImage.svg</file>
     </qresource>
 </RCC>

app/qmlV2/Style.js

@@ -69,8 +69,14 @@ const arrowUpIcon = "qrc:/Arrow Up.svg"
 const arrowDownIcon = "qrc:/Arrow Down.svg"
 const qrCodeIcon = "qrc:/QR Code.svg"
 const checkmarkIcon = "qrc:/Checkmark.svg"
+const closeButtonIcon = "qrc:/CloseButton.svg"
 
-const textColor = "black"
+// Images
+const uploadImage = "qrc:/UploadImage.svg"
+const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
+
+// Spacing
+const commonSpacing = 20 * __dp
 
 function dynamicText() {
   return "Dynamic text"

app/qmlV2/component/MMButton.qml

@@ -16,6 +16,8 @@ import "."
 Button {
   id: control
 
+  property bool transparent: false
+
   contentItem: Text {
     anchors.centerIn: control
     font: Qt.font(Style.t3)
@@ -31,7 +33,7 @@ Button {
   }
 
   background: Rectangle {
-    color: control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen
+    color: transparent ? "transparent" : control.enabled ? control.down || control.hovered ? Style.forest : Style.grass : Style.mediumGreen
     radius: height / 2
   }
 

app/qmlV2/component/MMDrawer.qml

@@ -0,0 +1,150 @@
+/***************************************************************************
+ *                                                                         *
+ *   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 QtQuick.Controls
+import QtQuick.Controls.Basic
+import "../Style.js" as Style
+import "."
+
+Drawer {
+  id: control
+
+  property alias picture: picture.source
+  property alias title: title.text
+  property alias description: description.text
+  property alias boundedDescription: boundedDescription.text
+  property alias primaryButton: primaryButton.text
+  property alias secondaryButton: secondaryButton.text
+  property alias specialComponent: loader.sourceComponent
+
+  width: window.width
+  height: mainColumn.height
+  edge: Qt.BottomEdge
+
+  Rectangle {
+    id: roundedRect
+
+    anchors.fill: parent
+    color: Style.white
+    radius: Style.commonSpacing
+
+    // Make the bottom corners more rounded by masking them
+    Rectangle {
+      anchors.bottom: parent.bottom
+      anchors.left: parent.left
+      anchors.right: parent.right
+      height: roundedRect.radius
+      color: Style.white
+    }
+
+    Column {
+      id: mainColumn
+
+      width: parent.width
+      spacing: Style.commonSpacing
+      padding: Style.commonSpacing
+
+      Image {
+        id: closeButton
+
+        source: Style.closeButtonIcon
+        anchors.right: parent.right
+        anchors.rightMargin: Style.commonSpacing
+
+        MouseArea {
+          anchors.fill: parent
+          onClicked: control.visible = false
+        }
+      }
+
+      Image {
+        id: picture
+
+        anchors.horizontalCenter: parent.horizontalCenter
+      }
+
+      Text {
+        id: title
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        font: Qt.font(Style.t1)
+        width: parent.width - 2*Style.commonSpacing
+        color: Style.forest
+        visible: text.length > 0
+        horizontalAlignment: Text.AlignHCenter
+      }
+
+      Text {
+        id: description
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        font: Qt.font(Style.p5)
+        width: parent.width - 2*Style.commonSpacing
+        color: Style.night
+        visible: text.length > 0
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.WordWrap
+        lineHeight: 1.6
+      }
+
+      Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: boundedDescription.text.length > 0
+        width: parent.width - 2*Style.commonSpacing
+        height: boundedDescription.height
+        radius: 16 * __dp
+
+        color: Style.lightGreen
+
+        Text {
+          id: boundedDescription
+
+          anchors.horizontalCenter: parent.horizontalCenter
+          font: Qt.font(Style.p6)
+          width: parent.width
+          color: Style.night
+          visible: text.length > 0
+          horizontalAlignment: Text.AlignLeft
+          wrapMode: Text.WordWrap
+          lineHeight: 1.6
+          padding: Style.commonSpacing
+        }
+      }
+
+      Loader {
+        id: loader
+
+        anchors.horizontalCenter: parent.horizontalCenter
+      }
+
+      Item { width: 1; height: 1 }
+
+      MMButton {
+        id: primaryButton
+
+        width: parent.width - 2*Style.commonSpacing
+        visible: text.length > 0
+
+        onClicked: control.visible = false
+      }
+
+      MMButton {
+        id: secondaryButton
+
+        width: parent.width - 2*Style.commonSpacing
+        visible: text.length > 0
+        transparent: true
+        topPadding: 0
+
+        onClicked: control.visible = false
+      }
+    }
+  }
+}

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,8 @@
         <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>
+        <file>app/qmlV2/component/MMDrawer.qml</file>
     </qresource>
 </RCC>