diff --git a/sandbox/pages/StatusToastMessagePage.qml b/sandbox/pages/StatusToastMessagePage.qml index 58a67260..8dd0920c 100644 --- a/sandbox/pages/StatusToastMessagePage.qml +++ b/sandbox/pages/StatusToastMessagePage.qml @@ -15,10 +15,11 @@ Item { 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":""} + {"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":"", "duration":0}, + {"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000}, + {"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} ] delegate: StatusToastMessage { primaryText: modelData.title @@ -27,12 +28,12 @@ Item { loading: modelData.loading type: modelData.type linkUrl: modelData.url + duration: modelData.duration onLinkActivated: { Qt.openUrlExternally(link); } - //simulate open - Component.onCompleted: { - open = true; + onClose: { + console.warn("toast closed: ", modelData.title) } } } diff --git a/src/StatusQ/Components/StatusToastMessage.qml b/src/StatusQ/Components/StatusToastMessage.qml index c737df57..0252338e 100644 --- a/src/StatusQ/Components/StatusToastMessage.qml +++ b/src/StatusQ/Components/StatusToastMessage.qml @@ -25,6 +25,7 @@ import StatusQ.Core.Theme 0.1 loading: true type: 0 linkUrl: "http://google.com" + duration: 5000 } \endqml @@ -44,7 +45,7 @@ Control { \qmlproperty bool StatusToastMessage::open This property represents all steps and their descriptions as provided by the user. */ - property bool open: false + property bool open: true /*! \qmlproperty string StatusToastMessage::primaryText This property represents the title text of the ToastMessage. @@ -66,6 +67,13 @@ Control { */ property string linkUrl: "" + /*! + \qmlproperty int StatusToastMessage::duration + This property represents duration in milliseconds, for how long a toast will be visible. If 0 is set for + duration, that means a toast won't dissapear without user's interaction (click on close). + */ + property int duration: 0 + /*! \qmlproperty StatusIconSettings StatusToastMessage::icon This property holds a set of settings for the icon of the ToastMessage. @@ -119,7 +127,7 @@ Control { /*! \qmlsignal - This signal is emitted when the ToastMessage is closed. + This signal is emitted when the ToastMessage is closed (after animation). */ signal close() /*! @@ -129,9 +137,24 @@ Control { */ signal linkActivated(var link) + QtObject { + id: d + + readonly property string openedState: "opened" + readonly property string closedState: "closed" + } + + Timer { + interval: root.duration + running: root.duration > 0 + onTriggered: { + root.open = false; + } + } + states: [ State { - name: "opened" + name: d.openedState when: root.open PropertyChanges { target: root @@ -140,16 +163,13 @@ Control { } }, State { - name: "closed" + name: d.closedState when: !root.open PropertyChanges { target: root anchors.rightMargin: -width opacity: 0.0 } - StateChangeScript { - script: { root.close(); } - } } ] @@ -157,6 +177,12 @@ Control { Transition { to: "*" NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 } + + onRunningChanged: { + if(!running && state == d.closedState) { + root.close(); + } + } } ] @@ -199,9 +225,14 @@ Control { radius: (root.width/2) color: (root.type === StatusToastMessage.Type.Success) ? Theme.palette.successColor2 : Theme.palette.primaryColor3 + visible: loader.sourceComponent != undefined Loader { + id: loader anchors.centerIn: parent - sourceComponent: root.loading ? loadingInd : statusIcon + sourceComponent: root.loading ? loadingInd : + root.icon.name != ""? statusIcon : + undefined + Component { id: loadingInd StatusLoadingIndicator {