diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 54c17240d8..ec60e32362 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -362,6 +362,7 @@ DISTFILES += \ shared/StyledTextField.qml \ shared/SVGImage.qml \ shared/TextWithLabel.qml \ + shared/ToastMessage.qml \ shared/TransactionPreview.qml \ shared/TransactionFormGroup.qml \ shared/TransactionStackView.qml \ diff --git a/ui/shared/ToastMessage.qml b/ui/shared/ToastMessage.qml new file mode 100644 index 0000000000..b4809df598 --- /dev/null +++ b/ui/shared/ToastMessage.qml @@ -0,0 +1,104 @@ +import QtQuick 2.13 +import QtGraphicalEffects 1.13 +import QtQuick.Controls 2.13 +import "../imports" + +Popup { + property url source: "../app/img/check-circle.svg" + property string title: "Transaction pending..." + property string linkText: qsTr("View on Etherscan") + + id: root + height: 68 + padding: 0 + margins: 0 + width: 343 + x: parent.width - width - Style.current.bigPadding + y: parent.height - height - Style.current.bigPadding + + background: Rectangle { + radius: Style.current.radius + color: Style.current.background + + layer.enabled: true + layer.effect: DropShadow{ + width: container.width + height: container.height + x: container.x + y: container.y + 10 + visible: container.visible + source: container + horizontalOffset: 0 + verticalOffset: 2 + radius: 10 + samples: 15 + color: "#22000000" + } + } + + RoundedIcon { + id: toastImage + width: 32 + height: 32 + iconHeight: 20 + iconWidth: 20 + color: Style.current.secondaryBackground + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + source: root.source + anchors.leftMargin: 12 + } + + StyledText { + id: titleText + text: root.title + anchors.left: toastImage.right + anchors.top: parent.top + font.pixelSize: 13 + font.weight: Font.Medium + anchors.topMargin: Style.current.padding + anchors.leftMargin: 12 + } + + StyledText { + text: root.linkText + color: Style.current.textColorTertiary + anchors.left: toastImage.right + anchors.top: titleText.bottom + font.pixelSize: 13 + font.weight: Font.Medium + anchors.leftMargin: 12 + } + + SVGImage { + id: closeImage + anchors.right: parent.right + anchors.top: parent.top + source: "../app/img/plusSign.svg" + anchors.topMargin: Style.current.padding + anchors.rightMargin: Style.current.padding + width: 9 + height: 9 + rotation: 45 + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + root.close() + } + } + } + ColorOverlay { + anchors.fill: closeImage + source: closeImage + rotation: 45 + color: Style.current.textColor + } +} + +/*##^## +Designer { + D{i:0;formeditorColor:"#4c4e50";formeditorZoom:1.5;height:68;width:343} +} +##^##*/