From 7b290ddd56bb228c5341147699246a0fe7680b70 Mon Sep 17 00:00:00 2001
From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com>
Date: Tue, 1 Feb 2022 17:28:47 +0200
Subject: [PATCH] feat(StatusQ.Components): Adding StatusToastMessage
Added StatusToastMessage component, an example page
as well as a demonstration in chat view
Closes #521
---
sandbox/main.qml | 8 +-
sandbox/pages/StatusToastMessagePage.qml | 40 ++++
src/StatusQ/Components/StatusToastMessage.qml | 182 ++++++++++++++++++
src/StatusQ/Components/qmldir | 1 +
src/StatusQ/Core/Theme/StatusDarkTheme.qml | 4 +
src/StatusQ/Core/Theme/StatusLightTheme.qml | 4 +
src/StatusQ/Core/Theme/ThemePalette.qml | 4 +
statusq.qrc | 1 +
8 files changed, 242 insertions(+), 2 deletions(-)
create mode 100644 sandbox/pages/StatusToastMessagePage.qml
create mode 100644 src/StatusQ/Components/StatusToastMessage.qml
diff --git a/sandbox/main.qml b/sandbox/main.qml
index 15acad15..a014a02a 100644
--- 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
diff --git a/sandbox/pages/StatusToastMessagePage.qml b/sandbox/pages/StatusToastMessagePage.qml
new file mode 100644
index 00000000..58a67260
--- /dev/null
+++ 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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/StatusQ/Components/StatusToastMessage.qml b/src/StatusQ/Components/StatusToastMessage.qml
new file mode 100644
index 00000000..28bef92b
--- /dev/null
+++ 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: "" + root.secondaryText + "
"
+ 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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir
index 51c84c91..b6812aed 100644
--- 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
diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 94b374d4..5470740a 100644
--- 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
diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml
index f873fcdb..31fae90e 100644
--- 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')
diff --git a/src/StatusQ/Core/Theme/ThemePalette.qml b/src/StatusQ/Core/Theme/ThemePalette.qml
index 64493e2a..5a7d4554 100644
--- 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
diff --git a/statusq.qrc b/statusq.qrc
index 3e118610..d8ff7b53 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -321,5 +321,6 @@
src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml
src/StatusQ/Components/StatusMemberListItem.qml
src/StatusQ/Components/StatusTagSelector.qml
+ src/StatusQ/Components/StatusToastMessage.qml