feat: add chat command modal shell

It doesn't do anything for now
This commit is contained in:
Jonathan Rainville 2020-08-17 16:46:13 -04:00 committed by Iuri Matias
parent 59cba0f125
commit 474f68cf8a
8 changed files with 154 additions and 7 deletions

View File

@ -45,7 +45,6 @@ Row {
ChatInputButton { ChatInputButton {
id: emojiIconContainer id: emojiIconContainer
source: "../../../img/emojiBtn.svg" source: "../../../img/emojiBtn.svg"
anchors.verticalCenter: parent.verticalCenter
opened: emojiPopup.opened opened: emojiPopup.opened
close: function () { close: function () {
emojiPopup.close() emojiPopup.close()
@ -59,7 +58,6 @@ Row {
id: stickerIconContainer id: stickerIconContainer
visible: !chatColumn.isExtendedInput && txtData.length == 0 visible: !chatColumn.isExtendedInput && txtData.length == 0
source: "../../../img/stickers_icon.svg" source: "../../../img/stickers_icon.svg"
anchors.verticalCenter: parent.verticalCenter
opened: stickersPopup.opened opened: stickersPopup.opened
close: function () { close: function () {
stickersPopup.close() stickersPopup.close()
@ -73,7 +71,6 @@ Row {
id: imageIconContainer id: imageIconContainer
visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne) visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
source: "../../../img/images_icon.svg" source: "../../../img/images_icon.svg"
anchors.verticalCenter: parent.verticalCenter
opened: imageDialog.visible opened: imageDialog.visible
close: function () { close: function () {
imageDialog.close() 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 { StickersPopup {
id: stickersPopup id: stickersPopup
width: 360 width: 360
height: 440 height: 440
x: parent.width - width - 8 x: parent.width - width - Style.current.halfPadding
y: parent.height - sendBtns.height - height - 8 y: parent.height - sendBtns.height - height - Style.current.halfPadding
recentStickers: chatsModel.recentStickers recentStickers: chatsModel.recentStickers
stickerPackList: chatsModel.stickerPacks stickerPackList: chatsModel.stickerPacks
} }
@ -97,10 +107,16 @@ Row {
id: emojiPopup id: emojiPopup
width: 360 width: 360
height: 440 height: 440
x: parent.width - width - 8 x: parent.width - width - Style.current.halfPadding
y: parent.height - sendBtns.height - height - 8 y: parent.height - sendBtns.height - height - Style.current.halfPadding
addToChat: chatButtonsContainer.addToChat addToChat: chatButtonsContainer.addToChat
} }
ChatCommandsPopup {
id: chatCommandsPopup
x: parent.width - width - Style.current.halfPadding
y: parent.height - sendBtns.height - height - Style.current.halfPadding
}
} }
/*##^## /*##^##
Designer { Designer {

View File

@ -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
}
}

View File

@ -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")
}
}
}

View File

@ -16,6 +16,7 @@ Rectangle {
height: buttonIcon.height + chatButtonsContainer.iconPadding * 2 height: buttonIcon.height + chatButtonsContainer.iconPadding * 2
radius: Style.current.radius radius: Style.current.radius
color: hovered ? Style.current.secondaryBackground : Style.current.transparent color: hovered ? Style.current.secondaryBackground : Style.current.transparent
anchors.verticalCenter: parent.verticalCenter
SVGImage { SVGImage {
id: buttonIcon id: buttonIcon

View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 5.25C10.4142 5.25 10.75 5.58579 10.75 6V8.75C10.75 9.02614 10.9739 9.25 11.25 9.25H14C14.4142 9.25 14.75 9.58579 14.75 10C14.75 10.4142 14.4142 10.75 14 10.75H11.25C10.9739 10.75 10.75 10.9739 10.75 11.25V14C10.75 14.4142 10.4142 14.75 10 14.75C9.58579 14.75 9.25 14.4142 9.25 14V11.25C9.25 10.9739 9.02614 10.75 8.75 10.75H6C5.58579 10.75 5.25 10.4142 5.25 10C5.25 9.58579 5.58579 9.25 6 9.25H8.75C9.02614 9.25 9.25 9.02614 9.25 8.75V6C9.25 5.58579 9.58579 5.25 10 5.25Z" fill="#4360DF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10V16.6667C20 18.5076 18.5076 20 16.6667 20H10C4.47715 20 0 15.5228 0 10ZM18.5 10V16.6667C18.5 17.6792 17.6792 18.5 16.6667 18.5H10C5.30558 18.5 1.5 14.6944 1.5 10C1.5 5.30558 5.30558 1.5 10 1.5C14.6944 1.5 18.5 5.30558 18.5 10Z" fill="#4360DF"/>
</svg>

After

Width:  |  Height:  |  Size: 957 B

View File

@ -23,6 +23,8 @@ QtObject {
property color darkBlue property color darkBlue
property color darkBlueBtn property color darkBlueBtn
property color red property color red
property color purple: "#887AF9"
property color orange: "#FE8F59"
property color background property color background
property color border property color border
@ -34,6 +36,7 @@ QtObject {
property int xlPadding: 32 property int xlPadding: 32
property int bigPadding: 24 property int bigPadding: 24
property int padding: 16 property int padding: 16
property int halfPadding: 8
property int smallPadding: 10 property int smallPadding: 10
property int radius: 8 property int radius: 8

View File

@ -80,4 +80,8 @@ QtObject {
} }
return strNumber.replace(/(\.[0-9]*[1-9])0+$|\.0*$/,'$1') return strNumber.replace(/(\.[0-9]*[1-9])0+$|\.0*$/,'$1')
} }
function setColorAlpha(color, alpha) {
return Qt.hsla(color.hslHue, color.hslSaturation, color.hslLightness, alpha)
}
} }

View File

@ -113,6 +113,8 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target !isEmpty(target.path): INSTALLS += target
DISTFILES += \ 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/ChatComponents/ChatInputButton.qml \
app/AppLayouts/Chat/ChatColumn/CompactMessage.qml \ app/AppLayouts/Chat/ChatColumn/CompactMessage.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml \ app/AppLayouts/Chat/ChatColumn/MessageComponents/ChannelIdentifier.qml \