feat(StatusToastMessage): introduce duration property and `close` signal emit after animation
- `open` property set to `true` by default - `duration` property added (if set to anything greater than 0, will trigger close toast signal after `duration` milliseconds) - `close` signal is now emitted once animation gets completed
This commit is contained in:
Sale Djenic
Michał Cieślak
parent
52c8e3e2c1
commit
e6bd9b5627
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue