feat(StatusQ.Components): Adding StatusToastMessage

Added StatusToastMessage component, an example page as well as a demonstration in chat view Closes #521
2022-02-01 17:28:47 +02:00 · 2022-02-01 17:28:47 +02:00 · 7b290ddd56
parent 094dee4928
commit 7b290ddd56
8 changed files with 242 additions and 2 deletions
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@ -260,6 +260,11 @@ StatusWindow {
                            selected: viewLoader.source.toString().includes(title)
                            onClicked: mainPageView.page(title);
                        }
+                        StatusNavigationListItem {
+                            title: "StatusToastMessage"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
@ -375,8 +380,7 @@ StatusWindow {
            }
            DemoApp {
                id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
            }
            DropShadow {
                anchors.fill: demoApp
--- a/sandbox/pages/StatusToastMessagePage.qml
+++ b/sandbox/pages/StatusToastMessagePage.qml
@ -0,0 +1,40 @@
+import QtQuick 2.14
+
+import StatusQ.Components 0.1
+
+Item {
+    id: root
+    anchors.fill: parent
+
+    Column {
+        id: toastArea
+        anchors.centerIn: parent
+        spacing: 8
+        Repeater {
+            id: toastRepeater
+            width: parent.width
+            height: childrenRect.height
+            model: [
+                {"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":""},
+                {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
+                {"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
+                {"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
+            ]
+            delegate: StatusToastMessage {
+                primaryText: modelData.title
+                secondaryText: modelData.subTitle
+                icon.name: modelData.icon
+                loading: modelData.loading
+                type: modelData.type
+                linkUrl: modelData.url
+                onLinkActivated: {
+                    Qt.openUrlExternally(link);
+                }
+                //simulate open
+                Component.onCompleted: {
+                    open = true;
+                }
+            }
+        }
+    }
+}
--- a/src/StatusQ/Components/StatusToastMessage.qml
+++ b/src/StatusQ/Components/StatusToastMessage.qml
@ -0,0 +1,182 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+import QtGraphicalEffects 1.13
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Core.Theme 0.1
+
+Control {
+    id: root
+    width: 343
+    height: !!secondaryText ? 68 : 48
+    anchors.right: parent.right
+
+    property bool open: false
+    property string primaryText: ""
+    property string secondaryText: ""
+    property bool loading: false
+    property string iconName: ""
+    property string linkUrl: ""
+
+    property StatusIconSettings icon: StatusIconSettings {
+        width: 23
+        height: 23
+    }
+
+    property int type: StatusToastMessage.Type.Default
+    enum Type {
+        Default,
+        Success
+    }
+
+    function open(title, subTitle, iconName, type, loading, url) {
+        root.primaryText = title;
+        root.secondaryText = subTitle;
+        root.icon.name = iconName;
+        root.type = type;
+        root.loading = loading;
+        root.linkUrl = url;
+        root.open = true;
+    }
+
+    signal close()
+    signal linkActivated(var link)
+
+    states: [
+        State {
+            name: "opened"
+            when: root.open
+            PropertyChanges {
+                target: root
+                anchors.rightMargin: 0
+                opacity: 1.0
+            }
+        },
+        State {
+            name: "closed"
+            when: !root.open
+            PropertyChanges {
+                target: root
+                anchors.rightMargin: -width
+                opacity: 0.0
+            }
+            StateChangeScript {
+                script: { root.close(); }
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "*"
+            NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 }
+        }
+    ]
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        color: Theme.palette.statusToastMessage.backgroundColor
+        radius: 8
+        border.color: Theme.palette.baseColor2
+        layer.enabled: true
+        layer.effect: DropShadow {
+            verticalOffset: 3
+            radius: 8
+            samples: 15
+            fast: true
+            cached: true
+            color: Theme.palette.dropShadow
+        }
+    }
+
+    contentItem: Item {
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.right: parent.right
+        anchors.rightMargin: 4
+        height: parent.height
+        MouseArea {
+            anchors.fill: parent
+            onMouseXChanged: {
+                root.open = (mouseX < (root.width/3));
+            }
+        }
+        RowLayout {
+            anchors.fill: parent
+            spacing: 16
+            Rectangle {
+                implicitWidth: 32
+                implicitHeight: 32
+                Layout.alignment: Qt.AlignVCenter
+                radius: (root.width/2)
+                color: (root.type === StatusToastMessage.Type.Success) ?
+                        Theme.palette.successColor2 : Theme.palette.primaryColor3
+                Loader {
+                    anchors.centerIn: parent
+                    sourceComponent: root.loading ? loadingInd : statusIcon
+                    Component {
+                        id: loadingInd
+                        StatusLoadingIndicator {
+                            color: (root.type === StatusToastMessage.Type.Success) ?
+                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                        }
+                    }
+                    Component {
+                        id: statusIcon
+                        StatusIcon {
+                            anchors.centerIn: parent
+                            width: root.icon.width
+                            height: root.icon.height
+                            color: (root.type === StatusToastMessage.Type.Success) ?
+                                   Theme.palette.successColor1 : Theme.palette.primaryColor1
+                            icon: root.icon.name
+                        }
+                    }
+                }
+            }
+            Column {
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
+                StatusBaseText {
+                    width: parent.width
+                    font.pixelSize: 13
+                    color: Theme.palette.directColor1
+                    elide: Text.ElideRight
+                    text: root.primaryText
+                }
+                StatusBaseText {
+                    width: parent.width
+                    visible: (!root.linkUrl && !!root.secondaryText)
+                    height: visible ? contentHeight : 0
+                    font.pixelSize: 13
+                    color: Theme.palette.baseColor1
+                    text: root.secondaryText
+                    elide: Text.ElideRight
+                }
+                StatusSelectableText {
+                    visible: (!!root.linkUrl)
+                    height: visible ? implicitHeight : 0
+                    font.pixelSize: 13
+                    hoveredLinkColor: Theme.palette.primaryColor1
+                    text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
+                    onLinkActivated: {
+                        root.linkActivated(root.linkUrl);
+                    }
+                }
+            }
+            StatusFlatRoundButton {
+                type: StatusFlatRoundButton.Type.Secondary
+                icon.name: "close"
+                icon.color: Theme.palette.directColor1
+                implicitWidth: 30
+                implicitHeight: 30
+                onClicked: {
+                    root.open = false;
+                }
+            }
+        }
+    }
+}
--- a/src/StatusQ/Components/qmldir
+++ b/src/StatusQ/Components/qmldir
@ -27,3 +27,4 @@ StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
 StatusMessage 0.1 StatusMessage.qml
 StatusMessageDetails 0.1 StatusMessageDetails.qml
 StatusTagSelector 0.1 StatusTagSelector.qml
+StatusToastMessage 0.1 StatusToastMessage.qml
--- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@ -167,6 +167,10 @@ ThemePalette {
        property color backgroundColor: baseColor5
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor: baseColor3
        property color secondaryHoverBackgroundColor: primaryColor3
--- a/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml
@ -165,6 +165,10 @@ ThemePalette {
        property color backgroundColor: baseColor2
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: white
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor: white
        property color secondaryHoverBackgroundColor: getColor('blue6')
--- a/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/src/StatusQ/Core/Theme/ThemePalette.qml
@ -101,6 +101,10 @@ QtObject {
        property color backgroundColor
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor
        property color secondaryHoverBackgroundColor
--- a/statusq.qrc
+++ b/statusq.qrc
@ -321,5 +321,6 @@
        <file>src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
        <file>src/StatusQ/Components/StatusMemberListItem.qml</file>
        <file>src/StatusQ/Components/StatusTagSelector.qml</file>
+        <file>src/StatusQ/Components/StatusToastMessage.qml</file>
    </qresource>
 </RCC>