fix(StatusQ): Extend StatusToastNotification to support RichText and allow larger content

Changes:
1. StatusToastMessage now supports dynamic content height
2. Add new StatusToastMessage type: Danger
3. Update StatusToastMessage to support RichText content
4. Fix StatusQ sanboxapp compilation
5. Add the new StatusToastMessage content to sandbox

src/app/modules/main/ephemeral_notification_item.nim

@@ -4,6 +4,7 @@ type
   EphemeralNotificationType* {.pure.} = enum
     Default = 0
     Success
+    Danger
 
 type
   Item* = object

src/app/modules/main/module.nim

@@ -1228,6 +1228,9 @@ method displayEphemeralNotification*[T](self: Module[T], title: string, subTitle
   var finalEphNotifType = EphemeralNotificationType.Default
   if(ephNotifType == EphemeralNotificationType.Success.int):
     finalEphNotifType = EphemeralNotificationType.Success
+  elif(ephNotifType == EphemeralNotificationType.Danger.int):
+    finalEphNotifType = EphemeralNotificationType.Danger
+    
   let item = ephemeral_notification_item.initItem(id, title, TOAST_MESSAGE_VISIBILITY_DURATION_IN_MS, subTitle, icon,
   loading, finalEphNotifType, url, details)
   self.view.ephemeralNotificationModel().addItem(item)

ui/StatusQ/sandbox/CMakeLists.txt

@@ -1,5 +1,6 @@
 project(Sandbox)
-
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
 find_package(
         Qt5
         COMPONENTS Core Quick QuickControls2

ui/StatusQ/sandbox/pages/StatusToastMessagePage.qml

@@ -20,7 +20,8 @@ Item {
                 {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
                 {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
                 {"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000},
-                {"title":"This device is no longer the control node for the Socks Community", "subTitle":"", "icon":"info", "loading":false, "type":0,"url":"", "duration":0}
+                {"title":"This device is no longer the control node for the Socks Community", "subTitle":"", "icon":"info", "loading":false, "type":0,"url":"", "duration":0},
+                {"title":`This is, but not now, probably later on the road even it doesn't make sense, a very long title with <a style="text-decoration:none" href="www.qt.io">hyperlink</a>.`, "subTitle":"", "icon":"info", "loading":false, "type":2,"url":"", "duration":0},
             ]
             delegate: StatusToastMessage {
                 primaryText: modelData.title

ui/StatusQ/sandbox/sandboxapp.cpp

@@ -15,7 +15,7 @@ SandboxApp::SandboxApp(int &argc, char **argv)
     });
 #endif
 }
-
+#ifdef QT_DEBUG
 void SandboxApp::watchDirectoryChanges(const QString& path)
 {
     qDebug() << "Iterating to watch over:" << path;
@@ -29,7 +29,7 @@ void SandboxApp::watchDirectoryChanges(const QString& path)
         }
     }
 }
-
+#endif
 void SandboxApp::startEngine()
 {
 #ifdef QT_DEBUG

ui/StatusQ/sandbox/sandboxapp.h

@@ -23,6 +23,7 @@ private:
 
 #ifdef QT_DEBUG
     QFileSystemWatcher m_watcher;
+    void watchDirectoryChanges(const QString& path);
 #endif
 
     const QUrl m_url {
@@ -32,8 +33,6 @@ private:
         QStringLiteral("qrc:/main.qml")
 #endif
     };
-
-    void watchDirectoryChanges(const QString& path);
 };
 
 #endif // SANDBOXAPP_H

ui/StatusQ/src/StatusQ/Components/StatusToastMessage.qml

@@ -37,9 +37,12 @@ import StatusQ.Core.Theme 0.1
 
 Control {
     id: root
-    width: 343
+    implicitWidth: 374
-    height: !!secondaryText || title.lineCount > 1 ? 68 : 48
+
-    anchors.right: parent.right
+    topPadding: 15
+    bottomPadding: 15
+    leftPadding: 12
+    rightPadding: 8
 
     /*!
         \qmlproperty bool StatusToastMessage::open
@@ -95,7 +98,8 @@ Control {
     property int type: StatusToastMessage.Type.Default
     enum Type {
         Default,
-        Success
+        Success,
+        Danger
     }
 
     /*!
@@ -209,11 +213,8 @@ Control {
     }
 
     contentItem: Item {
-        anchors.left: parent.left
+        implicitWidth: layout.implicitWidth
-        anchors.leftMargin: 16
+        implicitHeight: layout.implicitHeight
-        anchors.right: parent.right
-        anchors.rightMargin: 4
-        height: parent.height
         MouseArea {
             anchors.fill: parent
             onMouseXChanged: {
@@ -224,15 +225,25 @@ Control {
             }
         }
         RowLayout {
+            id: layout
             anchors.fill: parent
-            spacing: 16
+            spacing: 12
             Rectangle {
                 implicitWidth: 32
                 implicitHeight: 32
                 Layout.alignment: Qt.AlignVCenter
                 radius: (root.width/2)
-                color: (root.type === StatusToastMessage.Type.Success) ?
+                color: {
-                        Theme.palette.successColor2 : Theme.palette.primaryColor3
+                    print("color type", root.type)
+                    switch(root.type) {
+                    case StatusToastMessage.Type.Success:
+                        return Theme.palette.successColor2
+                    case StatusToastMessage.Type.Danger:
+                        return Theme.palette.dangerColor3
+                    default:
+                        return Theme.palette.primaryColor3
+                    }
+                }
                 visible: loader.sourceComponent != undefined
                 Loader {
                     id: loader
@@ -244,8 +255,14 @@ Control {
                     Component {
                         id: loadingInd
                         StatusLoadingIndicator {
-                            color: (root.type === StatusToastMessage.Type.Success) ?
+                            color: switch(root.type) {
-                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                                case StatusToastMessage.Type.Success:
+                                    return Theme.palette.successColor1
+                                case StatusToastMessage.Type.Danger:
+                                    return Theme.palette.dangerColor1
+                                default:
+                                   return Theme.palette.primaryColor1
+                            }
                         }
                     }
                     Component {
@@ -254,8 +271,17 @@ Control {
                             anchors.centerIn: parent
                             width: root.icon.width
                             height: root.icon.height
-                            color: (root.type === StatusToastMessage.Type.Success) ?
+                            color: {
-                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                                print("color type", root.type)
+                                    switch(root.type) {
+                                    case StatusToastMessage.Type.Success:
+                                        return Theme.palette.successColor1
+                                    case StatusToastMessage.Type.Danger:
+                                        return Theme.palette.dangerColor1
+                                    default:
+                                        return Theme.palette.primaryColor1
+                                }
+                            }
                             icon: root.icon.name
                         }
                     }
@@ -271,8 +297,12 @@ Control {
                     color: Theme.palette.directColor1
                     elide: Text.ElideRight
                     wrapMode: Text.Wrap
+                    textFormat: Text.RichText
                     text: root.primaryText
-                    maximumLineCount: 2
+                    maximumLineCount: root.secondaryText ? 2 : 3
+                    onLinkActivated: {
+                        root.linkActivated(link);
+                    }
                 }
                 StatusBaseText {
                     Layout.fillWidth: true
@@ -293,7 +323,7 @@ Control {
                     hoveredLinkColor: Theme.palette.primaryColor1
                     text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
                     onLinkActivated: {
-                        root.linkActivated(root.linkUrl);
+                        root.linkActivated(link);
                     }
                 }
             }

ui/imports/utils/Constants.qml

@@ -607,6 +607,7 @@ QtObject {
     readonly property QtObject ephemeralNotificationType: QtObject {
         readonly property int normal: 0
         readonly property int success: 1
+        readonly property int danger: 2
     }
 
     readonly property QtObject translationsState: QtObject {