feat: add chat command modal shell
It doesn't do anything for now
This commit is contained in:
parent
59cba0f125
commit
474f68cf8a
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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 |
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 \
|
||||||
|
|
Loading…
Reference in New Issue