diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml index 095aa013bd..79b0469be2 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml @@ -45,7 +45,6 @@ Row { ChatInputButton { id: emojiIconContainer source: "../../../img/emojiBtn.svg" - anchors.verticalCenter: parent.verticalCenter opened: emojiPopup.opened close: function () { emojiPopup.close() @@ -59,7 +58,6 @@ Row { id: stickerIconContainer visible: !chatColumn.isExtendedInput && txtData.length == 0 source: "../../../img/stickers_icon.svg" - anchors.verticalCenter: parent.verticalCenter opened: stickersPopup.opened close: function () { stickersPopup.close() @@ -73,7 +71,6 @@ Row { id: imageIconContainer visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne) source: "../../../img/images_icon.svg" - anchors.verticalCenter: parent.verticalCenter opened: imageDialog.visible close: function () { imageDialog.close() @@ -83,12 +80,25 @@ Row { } } + ChatInputButton { + id: commandIconButton + visible: !chatColumn.isExtendedInput && chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne + source: "../../../img/chat-commands.svg" + opened: chatCommandsPopup.opened + close: function () { + chatCommandsPopup.close() + } + open: function () { + chatCommandsPopup.open() + } + } + StickersPopup { id: stickersPopup width: 360 height: 440 - x: parent.width - width - 8 - y: parent.height - sendBtns.height - height - 8 + x: parent.width - width - Style.current.halfPadding + y: parent.height - sendBtns.height - height - Style.current.halfPadding recentStickers: chatsModel.recentStickers stickerPackList: chatsModel.stickerPacks } @@ -97,10 +107,16 @@ Row { id: emojiPopup width: 360 height: 440 - x: parent.width - width - 8 - y: parent.height - sendBtns.height - height - 8 + x: parent.width - width - Style.current.halfPadding + y: parent.height - sendBtns.height - height - Style.current.halfPadding addToChat: chatButtonsContainer.addToChat } + + ChatCommandsPopup { + id: chatCommandsPopup + x: parent.width - width - Style.current.halfPadding + y: parent.height - sendBtns.height - height - Style.current.halfPadding + } } /*##^## Designer { diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml new file mode 100644 index 0000000000..8279e8d859 --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml @@ -0,0 +1,66 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import "../../../../../imports" +import "../../../../../shared" + +Rectangle { + property color iconColor + property string text: "My command" + property url iconSource: "../../../../img/send.svg" + property bool rotatedImage: false + property var onClicked: function () {} + + id: root + width: 168 + height: 95 + radius: 16 + color: Utils.setColorAlpha(iconColor, 0.2) + + Rectangle { + id: iconBox + radius: 50 + color: iconColor + anchors.top: parent.top + anchors.topMargin: Style.current.smallPadding + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + height: iconImage.height + Style.current.smallPadding * 2 + width: this.height + + SVGImage { + id: iconImage + source: "../../../../img/send.svg" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + width: 16 + fillMode: Image.PreserveAspectFit + rotation: rotatedImage ? 180 : 0 + antialiasing: true + } + + ColorOverlay { + anchors.fill: iconImage + source: iconImage + color: Style.current.white + rotation: rotatedImage ? 180 : 0 + antialiasing: true + } + } + + StyledText { + text: root.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 + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: root.onClicked + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml new file mode 100644 index 0000000000..3d1899573e --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml @@ -0,0 +1,51 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import "../../../../../imports" +import "../../../../../shared" + +Popup { + id: root + width: buttonRow.width + height: buttonRow.height + padding: 0 + margins: 0 + + background: Rectangle { + color: Style.current.background + radius: Style.current.radius + border.width: 0 + layer.enabled: true + layer.effect: DropShadow{ + verticalOffset: 3 + radius: 8 + samples: 15 + fast: true + cached: true + color: "#22000000" + } + } + + Row { + id: buttonRow + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 + padding: Style.current.halfPadding + spacing: Style.current.halfPadding + + ChatCommandButton { + iconColor: Style.current.purple + iconSource: "../../../../img/send.svg" + text: qsTr("Send transaction") + } + + ChatCommandButton { + iconColor: Style.current.orange + iconSource: "../../../../img/send.svg" + rotatedImage: true + text: qsTr("Request transaction") + } + } +} diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml index 36352c4e41..ce194170ad 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml @@ -16,6 +16,7 @@ Rectangle { height: buttonIcon.height + chatButtonsContainer.iconPadding * 2 radius: Style.current.radius color: hovered ? Style.current.secondaryBackground : Style.current.transparent + anchors.verticalCenter: parent.verticalCenter SVGImage { id: buttonIcon diff --git a/ui/app/img/chat-commands.svg b/ui/app/img/chat-commands.svg new file mode 100644 index 0000000000..563221ccbe --- /dev/null +++ b/ui/app/img/chat-commands.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index 69105578b1..fe8da564c3 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -23,6 +23,8 @@ QtObject { property color darkBlue property color darkBlueBtn property color red + property color purple: "#887AF9" + property color orange: "#FE8F59" property color background property color border @@ -34,6 +36,7 @@ QtObject { property int xlPadding: 32 property int bigPadding: 24 property int padding: 16 + property int halfPadding: 8 property int smallPadding: 10 property int radius: 8 diff --git a/ui/imports/Utils.qml b/ui/imports/Utils.qml index 5478979a44..20ab88618a 100644 --- a/ui/imports/Utils.qml +++ b/ui/imports/Utils.qml @@ -80,4 +80,8 @@ QtObject { } return strNumber.replace(/(\.[0-9]*[1-9])0+$|\.0*$/,'$1') } + + function setColorAlpha(color, alpha) { + return Qt.hsla(color.hslHue, color.hslSaturation, color.hslLightness, alpha) + } } diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 6304dd873f..7edba6eade 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -113,6 +113,8 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin !isEmpty(target.path): INSTALLS += target DISTFILES += \ + app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml \ + app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml \ app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml \ app/AppLayouts/Chat/ChatColumn/CompactMessage.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml \