mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-04 18:55:44 +00:00
acf0dcbf7a
The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
518 lines
21 KiB
QML
518 lines
21 KiB
QML
import QtQuick 2.3
|
||
import QtQuick.Controls 1.3
|
||
import QtQuick.Controls 2.3
|
||
import QtQuick.Layouts 1.3
|
||
import Qt.labs.platform 1.1
|
||
import "../../imports"
|
||
|
||
SplitView {
|
||
id: chatView
|
||
x: 0
|
||
y: 0
|
||
Layout.fillHeight: true
|
||
Layout.fillWidth: true
|
||
// Those anchors show a warning too, but whithout them, there is a gap on the right
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 0
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 0
|
||
|
||
Item {
|
||
id: contactsColumn
|
||
width: 300
|
||
height: parent.height
|
||
Layout.minimumWidth: 200
|
||
|
||
ColumnLayout {
|
||
anchors.fill: parent
|
||
|
||
Item {
|
||
Layout.preferredHeight: 100
|
||
Layout.fillHeight: false
|
||
Layout.fillWidth: true
|
||
|
||
Text {
|
||
id: element
|
||
x: 772
|
||
text: qsTr("Chat")
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 17
|
||
font.bold: true
|
||
anchors.horizontalCenter: parent.horizontalCenter
|
||
font.pixelSize: 17
|
||
}
|
||
|
||
Rectangle {
|
||
id: searchBox
|
||
height: 36
|
||
color: Theme.grey
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 59
|
||
radius: 8
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 65
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 16
|
||
|
||
TextField {
|
||
id: searchText
|
||
placeholderText: qsTr("Search")
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 32
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
font.pixelSize: 12
|
||
background: Rectangle {
|
||
color: "#00000000"
|
||
}
|
||
}
|
||
|
||
Image {
|
||
id: image4
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 10
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
fillMode: Image.PreserveAspectFit
|
||
source: "../img/search.svg"
|
||
}
|
||
|
||
MouseArea {
|
||
id: mouseArea
|
||
anchors.fill: parent
|
||
onClicked : {
|
||
searchText.forceActiveFocus(Qt.MouseFocusReason)
|
||
}
|
||
}
|
||
}
|
||
|
||
Rectangle {
|
||
id: addChat
|
||
width: 36
|
||
height: 36
|
||
color: Theme.blue
|
||
radius: 50
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 16
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 59
|
||
|
||
Text {
|
||
id: element3
|
||
color: "#ffffff"
|
||
text: qsTr("+")
|
||
anchors.verticalCenterOffset: -1
|
||
anchors.horizontalCenterOffset: 1
|
||
anchors.horizontalCenter: parent.horizontalCenter
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
lineHeight: 1
|
||
fontSizeMode: Text.FixedSize
|
||
font.bold: true
|
||
font.pixelSize: 28
|
||
}
|
||
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
onClicked : {
|
||
chatsModel.addNameTolist(searchText.text)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
Item {
|
||
Layout.fillHeight: true
|
||
Layout.fillWidth: true
|
||
|
||
Component {
|
||
id: chatViewDelegate
|
||
|
||
Rectangle {
|
||
id: wrapper
|
||
height: 64
|
||
color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: Theme.padding
|
||
anchors.top: applicationWindow.top
|
||
anchors.topMargin: 0
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: Theme.padding
|
||
radius: 8
|
||
|
||
MouseArea {
|
||
anchors.fill: parent
|
||
onClicked: listView.currentIndex = index
|
||
}
|
||
|
||
Rectangle {
|
||
id: contactImage
|
||
width: 40
|
||
color: Theme.darkGrey
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: Theme.padding
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 12
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: 12
|
||
radius: 50
|
||
}
|
||
|
||
Text {
|
||
id: contactInfo
|
||
text: "Name:" + name
|
||
font.weight: Font.Medium
|
||
font.pixelSize: 15
|
||
anchors.left: contactImage.right
|
||
anchors.leftMargin: Theme.padding
|
||
anchors.top: parent.top
|
||
anchors.topMargin: Theme.smallPadding
|
||
color: "black"
|
||
}
|
||
Text {
|
||
id: lastChatMessage
|
||
text: "Chatting blah blah..."
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: Theme.smallPadding
|
||
font.pixelSize: 15
|
||
anchors.left: contactImage.right
|
||
anchors.leftMargin: Theme.padding
|
||
color: Theme.darkGrey
|
||
}
|
||
Text {
|
||
id: contactTime
|
||
text: "12:22 AM"
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: Theme.padding
|
||
anchors.top: parent.top
|
||
anchors.topMargin: Theme.smallPadding
|
||
font.pixelSize: 11
|
||
color: Theme.darkGrey
|
||
}
|
||
Rectangle {
|
||
id: contactNumberChatsCircle
|
||
width: 22
|
||
height: 22
|
||
radius: 50
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: Theme.smallPadding
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: Theme.padding
|
||
color: Theme.blue
|
||
Text {
|
||
id: contactNumberChats
|
||
text: qsTr("1")
|
||
anchors.horizontalCenter: parent.horizontalCenter
|
||
anchors.verticalCenter: parent.verticalCenter
|
||
color: "white"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ListView {
|
||
id: listView
|
||
anchors.topMargin: 24
|
||
anchors.fill: parent
|
||
model: chatsModel
|
||
delegate: chatViewDelegate
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
ColumnLayout {
|
||
id: chatColumn
|
||
spacing: 0
|
||
anchors.left: contactsColumn.right
|
||
anchors.leftMargin: 0
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 0
|
||
anchors.bottom: parent.bottom
|
||
anchors.bottomMargin: 0
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 0
|
||
|
||
RowLayout {
|
||
id: chatContainer
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
|
||
|
||
Component {
|
||
id: chatLogViewDelegate
|
||
Rectangle {
|
||
id: chatBox
|
||
height: 140
|
||
color: "#00000000"
|
||
border.color: "#00000000"
|
||
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
|
||
Layout.fillWidth: true
|
||
width: chatLogView.width
|
||
|
||
Image {
|
||
id: chatImage
|
||
width: 30
|
||
height: 30
|
||
anchors.left: !isCurrentUser ? parent.left : undefined
|
||
anchors.leftMargin: !isCurrentUser ? Theme.padding : 0
|
||
anchors.right: !isCurrentUser ? undefined : parent.right
|
||
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
|
||
anchors.top: parent.top
|
||
anchors.topMargin: Theme.padding
|
||
fillMode: Image.PreserveAspectFit
|
||
source: "../img/placeholder-profile.png"
|
||
}
|
||
|
||
TextEdit {
|
||
id: chatName
|
||
text: username
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 22
|
||
anchors.left: !isCurrentUser ? chatImage.right : undefined
|
||
anchors.leftMargin: Theme.padding
|
||
anchors.right: !isCurrentUser ? undefined : chatImage.left
|
||
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
|
||
font.bold: true
|
||
font.pixelSize: 14
|
||
readOnly: true
|
||
wrapMode: Text.WordWrap
|
||
selectByMouse: true
|
||
}
|
||
|
||
TextEdit {
|
||
id: chatText
|
||
text: message
|
||
horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
|
||
font.family: "Inter"
|
||
wrapMode: Text.WordWrap
|
||
anchors.right: !isCurrentUser ? parent.right : chatName.right
|
||
anchors.rightMargin: !isCurrentUser ? 60 : 0
|
||
anchors.left: !isCurrentUser ? chatName.left : parent.left
|
||
anchors.leftMargin: !isCurrentUser ? 0 : 60
|
||
anchors.top: chatName.bottom
|
||
anchors.topMargin: Theme.padding
|
||
font.pixelSize: 14
|
||
readOnly: true
|
||
selectByMouse: true
|
||
Layout.fillWidth: true
|
||
}
|
||
|
||
TextEdit {
|
||
id: chatTime
|
||
color: Theme.darkGrey
|
||
font.family: "Inter"
|
||
text: timestamp
|
||
anchors.top: chatText.bottom
|
||
anchors.bottomMargin: Theme.padding
|
||
anchors.right: !isCurrentUser ? parent.right : undefined
|
||
anchors.rightMargin: !isCurrentUser ? Theme.padding : 0
|
||
anchors.left: !isCurrentUser ? undefined : parent.left
|
||
anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding
|
||
font.pixelSize: 10
|
||
readOnly: true
|
||
selectByMouse: true
|
||
}
|
||
}
|
||
}
|
||
|
||
ListView {
|
||
id: chatLogView
|
||
anchors.fill: parent
|
||
// model: chatLogModel
|
||
Layout.fillWidth: true
|
||
Layout.fillHeight: true
|
||
model: ListModel {
|
||
ListElement {
|
||
username: "You"
|
||
message: "First Message - I’m generally against putting too many rules on social interaction because it makes interaction anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:30 AM"
|
||
isCurrentUser: true
|
||
}
|
||
ListElement {
|
||
username: qsTr("Slushy Welltodo Woodborer")
|
||
message: "Lorem ipsum ion anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:31 AM"
|
||
isCurrentUser: false
|
||
}
|
||
ListElement {
|
||
username: "You"
|
||
message: "I’m generally against putting too many rules on social interaction because it makes interaction anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:32 AM"
|
||
isCurrentUser: true
|
||
}
|
||
ListElement {
|
||
username: qsTr("Slushy Welltodo Woodborer")
|
||
message: "Lorem ipsum ionanything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:33 AM"
|
||
isCurrentUser: false
|
||
}
|
||
ListElement {
|
||
username: "You"
|
||
message: "I’m generally against putting too many rules on social interaction because it makes interaction anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:34 AM"
|
||
isCurrentUser: true
|
||
}
|
||
ListElement {
|
||
username: qsTr("Slushy Welltodo Woodborer")
|
||
message: "Lorem ipsum ion anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:35 AM"
|
||
isCurrentUser: false
|
||
}
|
||
ListElement {
|
||
username: "You"
|
||
message: "I’m generally against putting too many rules on social interaction because it makes interaction anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:36 AM"
|
||
isCurrentUser: true
|
||
}
|
||
ListElement {
|
||
username: qsTr("Slushy Welltodo Woodborer")
|
||
message: "Last Message - Lorem ipsum ion anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue."
|
||
timestamp: "7:36 AM"
|
||
isCurrentUser: false
|
||
}
|
||
}
|
||
delegate: chatLogViewDelegate
|
||
onCountChanged: {
|
||
chatLogView.positionViewAtEnd()
|
||
}
|
||
}
|
||
}
|
||
|
||
// RowLayout {
|
||
// id: separator
|
||
// height: 16
|
||
// Layout.fillWidth: true
|
||
// Layout.alignment: Qt.AlignLeft | Qt.AlignTop
|
||
|
||
// Item {
|
||
// id: separatorContent
|
||
// width: 200
|
||
// height: 16
|
||
// Layout.fillHeight: false
|
||
// Layout.fillWidth: true
|
||
|
||
// Rectangle {
|
||
// id: lineSeparator1
|
||
// height: 1
|
||
// color: "#00000000"
|
||
// border.color: "#eef2f5"
|
||
// anchors.top: parent.top
|
||
// anchors.topMargin: 8
|
||
// anchors.right: separatorText.left
|
||
// anchors.rightMargin: 14
|
||
// anchors.left: parent.left
|
||
// anchors.leftMargin: 16
|
||
// }
|
||
|
||
// Text {
|
||
// id: separatorText
|
||
// color: Theme.darkGrey
|
||
// text: qsTr("Yesterday")
|
||
// font.pixelSize: 12
|
||
// anchors.centerIn: parent
|
||
// }
|
||
|
||
// Rectangle {
|
||
// id: lineSeparator2
|
||
// height: 1
|
||
// color: "#00000000"
|
||
// anchors.right: parent.right
|
||
// anchors.rightMargin: 16
|
||
// anchors.left: separatorText.right
|
||
// border.color: "#eef2f5"
|
||
// anchors.top: parent.top
|
||
// anchors.leftMargin: 14
|
||
// anchors.topMargin: 8
|
||
// }
|
||
// }
|
||
|
||
// }
|
||
|
||
RowLayout {
|
||
id: chatInputContainer
|
||
height: 70
|
||
Layout.fillWidth: true
|
||
Layout.bottomMargin: 0
|
||
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
|
||
transformOrigin: Item.Bottom
|
||
|
||
Rectangle {
|
||
id: element2
|
||
width: 200
|
||
height: 70
|
||
Layout.fillWidth: true
|
||
color: "white"
|
||
border.width: 0
|
||
|
||
Rectangle {
|
||
id: rectangle
|
||
color: "#00000000"
|
||
border.color: Theme.grey
|
||
anchors.fill: parent
|
||
|
||
Button {
|
||
id: chatSendBtn
|
||
x: 100
|
||
width: 30
|
||
height: 30
|
||
text: "\u2191"
|
||
font.bold: true
|
||
font.pointSize: 12
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 20
|
||
anchors.right: parent.right
|
||
anchors.rightMargin: 16
|
||
onClicked: {
|
||
chatsModel.onSend(txtData.text)
|
||
txtData.text = ""
|
||
}
|
||
enabled: txtData.text !== ""
|
||
background: Rectangle {
|
||
color: parent.enabled ? Theme.blue : Theme.grey
|
||
radius: 50
|
||
}
|
||
}
|
||
|
||
TextField {
|
||
id: txtData
|
||
text: ""
|
||
leftPadding: 0
|
||
padding: 0
|
||
font.pixelSize: 14
|
||
placeholderText: qsTr("Type a message...")
|
||
anchors.right: chatSendBtn.left
|
||
anchors.rightMargin: 16
|
||
anchors.top: parent.top
|
||
anchors.topMargin: 24
|
||
anchors.left: parent.left
|
||
anchors.leftMargin: 24
|
||
Keys.onEnterPressed: {
|
||
chatsModel.onSend(txtData.text)
|
||
txtData.text = ""
|
||
}
|
||
Keys.onReturnPressed: {
|
||
chatsModel.onSend(txtData.text)
|
||
txtData.text = ""
|
||
}
|
||
background: Rectangle {
|
||
color: "#00000000"
|
||
}
|
||
}
|
||
|
||
MouseArea {
|
||
id: mouseArea1
|
||
anchors.rightMargin: 50
|
||
anchors.fill: parent
|
||
onClicked : {
|
||
txtData.forceActiveFocus(Qt.MouseFocusReason)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/*##^##
|
||
Designer {
|
||
D{i:0;formeditorZoom:0.75;height:770;width:1152}
|
||
}
|
||
##^##*/
|