diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml index 9b79a4f05f..1b46dd590c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.13 import QtGraphicalEffects 1.13 import "../../../../../imports" import "../../../../../shared" +import "../../../../../shared/status" Popup { id: root @@ -52,12 +53,13 @@ Popup { padding: Style.current.halfPadding spacing: Style.current.halfPadding - - ChatCommandButton { - iconColor: Style.current.purple - iconSource: "../../../../img/send.svg" + StatusChatCommandButton { //% "Send transaction" text: qsTrId("send-transaction") + icon.color: Style.current.purple + icon.name: "send" + icon.width: 16 + icon.height: 18 onClicked: function () { chatCommandModal.sendChatCommand = root.requestAddressForTransaction chatCommandModal.isRequested = false @@ -78,12 +80,14 @@ Popup { } - ChatCommandButton { - iconColor: Style.current.orange - iconSource: "../../../../img/send.svg" - rotatedImage: true + StatusChatCommandButton { //% "Request transaction" text: qsTrId("request-transaction") + icon.color: Style.current.orange + icon.name: "send" + icon.width: 16 + icon.height: 18 + iconRotation: 180 onClicked: function () { chatCommandModal.sendChatCommand = root.requestTransaction chatCommandModal.isRequested = true diff --git a/ui/shared/status/StatusChatCommandButton.qml b/ui/shared/status/StatusChatCommandButton.qml new file mode 100644 index 0000000000..68822f00da --- /dev/null +++ b/ui/shared/status/StatusChatCommandButton.qml @@ -0,0 +1,71 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import "../../imports" +import "../../shared" + +Button { + id: control + property int iconRotation: 0 + implicitWidth: 168 + implicitHeight: 95 + icon.width: 12 + icon.height: 12 + + onIconChanged: { + icon.source = icon.name ? "../../app/img/" + icon.name + ".svg" : "" + } + + contentItem: Item { + anchors.fill: parent + Rectangle { + radius: 50 + width: 40 + height: 40 + color: control.icon.color + anchors.top: parent.top + anchors.topMargin: Style.current.smallPadding + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + + SVGImage { + id: iconImage + source: control.icon.source + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + width: control.icon.width + height: control.icon.height + fillMode: Image.PreserveAspectFit + rotation: control.iconRotation + antialiasing: true + } + + ColorOverlay { + anchors.fill: iconImage + source: iconImage + color: Style.current.white + rotation: control.iconRotation + antialiasing: true + } + } + StyledText { + text: control.text + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + anchors.bottom: parent.bottom + anchors.bottomMargin: Style.current.smallPadding + font.weight: Font.Medium + font.pixelSize: 13 + } + } + background: Rectangle { + radius: 16 + color: Utils.setColorAlpha(icon.color, 0.2) + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + onPressed: mouse.accepted = false + } +} diff --git a/ui/shared/status/qmldir b/ui/shared/status/qmldir index 9d313df5c2..967c5f286e 100644 --- a/ui/shared/status/qmldir +++ b/ui/shared/status/qmldir @@ -1,4 +1,5 @@ StatusButton 1.0 StatusButton.qml +StatusChatCommandButton 1.0 StatusChatCommandButton.qml StatusChatInfo 1.0 StatusChatInfo.qml StatusChatInfoButton 1.0 StatusChatInfoButton.qml StatusIconButton 1.0 StatusIconButton.qml