Updated notification design

MerginMaps · Oct 18, 2023 · 01de745 · 01de745 · inputapp-bot · Oct 18, 2023
1 parent 9a38dbe
commit 01de745
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/app/qmlV2/Style.js b/app/qmlV2/Style.js
@@ -70,6 +70,7 @@ const arrowDownIcon = "qrc:/Arrow Down.svg"
 const qrCodeIcon = "qrc:/QR Code.svg"
 const checkmarkIcon = "qrc:/Checkmark.svg"
 const closeButtonIcon = "qrc:/CloseButton.svg"
+const closeIcon = "qrc:/Close.svg"
 
 // Images
 const uploadImage = "qrc:/UploadImage.svg"
@@ -78,6 +79,11 @@ const ReachedDataLimitImage = "qrc:/ReachedDataLimitImage.svg"
 // Spacing
 const commonSpacing = 20 * __dp
 
+// Notification
+const notificationHeight = 66 * __dp
+const notificationRadius = 12 * __dp
+const notificationSpace = 3 * __dp
+
 function dynamicText() {
   return "Dynamic text"
 }
diff --git a/app/qmlV2/component/MMNotification.qml b/app/qmlV2/component/MMNotification.qml
@@ -23,25 +23,14 @@ Row {
   Rectangle {
     width: parent.width
     height: parent.height
-    color: Style.forest
     radius: Style.notificationRadius
-
-    Rectangle {
-      id: borderRect
-
-      anchors.centerIn: parent
-      width: parent.width - notification.innerSpacing
-      height: parent.height - notification.innerSpacing
-      radius: Style.notificationRadius
-      color: Style.transparent
-      border.width: __dp
-      border.color: {
-        switch( type ) {
-        case NotificationType.Information: return Style.sky
-        case NotificationType.Warning: return Style.warning
-        case NotificationType.Error: return Style.negative
-        default: return Style.positive
-        }
+    color: {
+      switch( type ) {
+      case NotificationType.Information: return Style.informative
+      case NotificationType.Success: return Style.positive
+      case NotificationType.Warning: return Style.warning
+      case NotificationType.Error: return Style.negative
+      default: return Style.positive
       }
     }
 
@@ -53,31 +42,41 @@ Row {
       anchors.leftMargin: Style.commonSpacing
       width: 18 * __dp
       height: 18 * __dp
-      color: borderRect.border.color
+      color: text.color
       radius: width/2
     }
 
     Text {
+      id: text
+
       anchors.verticalCenter: parent.verticalCenter
       anchors.left: icon.right
       width: parent.width - 3 * Style.commonSpacing - closeButton.width - icon.width
       text: message
-      color: Style.white
       verticalAlignment: Text.AlignVCenter
       horizontalAlignment: Text.AlignLeft
       leftPadding: Style.commonSpacing - notification.innerSpacing
       font: Qt.font(Style.t3)
       clip: true
+      color: {
+        switch( type ) {
+        case NotificationType.Information: return Style.deepOcean
+        case NotificationType.Success: return Style.forest
+        case NotificationType.Warning: return Style.earth
+        case NotificationType.Error: return Style.grape
+        }
+      }
     }
 
-    Image {
+    MMIcon {
       id: closeButton
 
       anchors.right: parent.right
       anchors.rightMargin: Style.commonSpacing
       anchors.verticalCenter: parent.verticalCenter
       scale: maRemove.containsMouse ? 1.2 : 1
       source: Style.closeIcon
+      color: text.color
 
       MouseArea {
         id: maRemove

diff --git a/gallery/notificationmodel.h b/gallery/notificationmodel.h
@@ -21,6 +21,7 @@ class NotificationType
 
   enum MessageType {
     Information,
+    Success,
     Warning,
     Error
   };

diff --git a/gallery/qml/pages/NotificationPage.qml b/gallery/qml/pages/NotificationPage.qml
@@ -31,22 +31,28 @@ Page {
       type: MMInput.Type.SendButton
       anchors.horizontalCenter: parent.horizontalCenter
       placeholderText: "Write an informative message"
-      onSendButtonClicked: { notificationModel.add(text, 100, NotificationType.Information); text = "" }
+      onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Information); text = "" }
+    }
+    MMInput {
+      type: MMInput.Type.SendButton
+      anchors.horizontalCenter: parent.horizontalCenter
+      placeholderText: "Write a success message"
+      onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Success); text = "" }
     }
     MMInput {
       type: MMInput.Type.SendButton
       anchors.horizontalCenter: parent.horizontalCenter
       placeholderText: "Write a warning message"
-      onSendButtonClicked: { notificationModel.add(text, 100, NotificationType.Warning); text = "" }
+      onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Warning); text = "" }
     }
     MMInput {
       type: MMInput.Type.SendButton
       anchors.horizontalCenter: parent.horizontalCenter
       placeholderText: "Write an error message"
-      onSendButtonClicked: { notificationModel.add(text, 100, NotificationType.Error); text = "" }
+      onSendButtonClicked: { notificationModel.add(text, 60, NotificationType.Error); text = "" }
     }
     Text {
-      text: "Note: Notification will be removed in 10s"
+      text: "Note: Notification will be removed in 1 minute"
       anchors.horizontalCenter: parent.horizontalCenter
       color: "green"
     }