status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml
View File

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

66
ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandButton.qml Normal file
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
}
}

51
ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatCommandsPopup.qml Normal file
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")
}
}
}

1
ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml
View File

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

4
ui/app/img/chat-commands.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 957 B

3
ui/imports/Themes/Theme.qml
View File

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

4
ui/imports/Utils.qml
View File

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

2
ui/nim-status-client.pro
View File

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