status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/app/AppLayouts/Chat/ChatLayout.qml

480 lines
18 KiB
QML
Raw Normal View History

chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
import "../../../imports"
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
SplitView {
feat: enable filtering the channels with the search Fixes #59
2020-05-19 20:23:22 +00:00
property alias searchStr: searchText.text
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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 {
feat: enable filtering the channels with the search Fixes #59
2020-05-19 20:23:22 +00:00
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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
feat: layouts for the Profile screens Work on this PR started before the build system was updated and at one point I upgraded `nim_status_client.nimble` to use NimScript so the nimble command would stop warning that the old format was being used. In team chat it was discussed that since we're no longer using nimble for package management we could simply delete `nim_status_client.nimble` to avoid confusion, which can be done in another PR. Introduce a BrowserLayout stub so the index will be calcualted correctly re: the active tab. Reorganize ChatLayout and NodeLayout into subdirs `Chat` and `Node`, respectively. Introduce ProfileLayout which uses a "LeftTab" approach similar to that of WalletLayout. There remains quite a bit of styling work to be done in ProfileLayout and its LeftTab. Also, it may be better to start over using a SplitView like the ChatLayout, I'm not really sure. It wasn't clear what should be the default view for the right-pane when Profile is selected in the left-most TabBar. In this PR, it defaults to showing the view corresponding to the ENS usernames button. In the archived Figma for the desktop design, it seemed a picture could be set, e.g. there is a headshot of a woman used in the Profile screen. To that end I explored how to take a square image and clip/mask it so it appears round and I included a larger placeholder image for that purpose. In the new design, and with respect to mobile, it may not be possible to set a profile picture so the code that rounds the image can maybe be dropped.
2020-05-19 19:44:45 +00:00
source: "../../img/search.svg"
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
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
}
feat: Join chats on demand
2020-05-13 17:46:12 +00:00
MouseArea {
anchors.fill: parent
onClicked : {
chatsModel.addNameTolist(searchText.text)
}
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
}
Item {
Layout.fillHeight: true
Layout.fillWidth: true
Component {
id: chatViewDelegate
Rectangle {
id: wrapper
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
feat: enable filtering the channels with the search Fixes #59
2020-05-19 20:23:22 +00:00
// Hide the box if it is filtered out
property bool isVisible: searchStr == "" || name.includes(searchStr)
visible: isVisible ? true : false
height: isVisible ? 64 : 0
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
MouseArea {
anchors.fill: parent
feat: enable filtering the channels with the search Fixes #59
2020-05-19 20:23:22 +00:00
onClicked: chatGroupsListView.currentIndex = index
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
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
fix: fix name and chat text in middle bar to have an ellipsis
2020-05-19 17:58:29 +00:00
text: name
anchors.right: contactTime.left
anchors.rightMargin: Theme.smallPadding
elide: Text.ElideRight
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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..."
fix: fix name and chat text in middle bar to have an ellipsis
2020-05-19 17:58:29 +00:00
anchors.right: contactNumberChatsCircle.left
anchors.rightMargin: Theme.smallPadding
elide: Text.ElideRight
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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 {
feat: enable filtering the channels with the search Fixes #59
2020-05-19 20:23:22 +00:00
id: chatGroupsListView
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
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
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
Image {
id: chatImage
width: 30
height: 30
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
anchors.left: !isCurrentUser ? parent.left : undefined
anchors.leftMargin: !isCurrentUser ? Theme.padding : 0
anchors.right: !isCurrentUser ? undefined : parent.right
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
anchors.top: parent.top
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
anchors.topMargin: Theme.padding
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
fillMode: Image.PreserveAspectFit
display identicons; display correct details for the user own messages
2020-05-19 23:39:04 +00:00
source: identicon
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
TextEdit {
id: chatName
Display chat messages
2020-05-18 20:08:40 +00:00
text: userName
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
anchors.top: parent.top
anchors.topMargin: 22
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
anchors.left: !isCurrentUser ? chatImage.right : undefined
anchors.leftMargin: Theme.padding
anchors.right: !isCurrentUser ? undefined : chatImage.left
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
font.bold: true
font.pixelSize: 14
readOnly: true
wrapMode: Text.WordWrap
selectByMouse: true
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
TextEdit {
id: chatText
text: message
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
font.family: "Inter"
wrapMode: Text.WordWrap
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
anchors.right: !isCurrentUser ? parent.right : chatName.right
anchors.rightMargin: !isCurrentUser ? 60 : 0
anchors.left: !isCurrentUser ? chatName.left : parent.left
anchors.leftMargin: !isCurrentUser ? 0 : 60
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
anchors.top: chatName.bottom
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
anchors.topMargin: Theme.padding
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
font.pixelSize: 14
readOnly: true
selectByMouse: true
Layout.fillWidth: true
}
TextEdit {
id: chatTime
color: Theme.darkGrey
font.family: "Inter"
text: timestamp
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
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
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
font.pixelSize: 10
readOnly: true
selectByMouse: true
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
ListView {
id: chatLogView
anchors.fill: parent
Display chat messages
2020-05-18 20:08:40 +00:00
model: chatsModel.messageList
display several chat logs; style then a bit, make it scrollable
2020-05-14 18:24:38 +00:00
Layout.fillWidth: true
Layout.fillHeight: true
delegate: chatLogViewDelegate
onCountChanged: {
chatLogView.positionViewAtEnd()
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
}
}
move views & logic into their respective folders; add initial tab for node management
2020-05-15 21:10:00 +00:00
// 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
// }
// }
// }
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
RowLayout {
id: chatInputContainer
height: 70
Layout.fillWidth: true
Layout.bottomMargin: 0
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
transformOrigin: Item.Bottom
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
Rectangle {
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
id: element2
width: 200
height: 70
Layout.fillWidth: true
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
color: "white"
border.width: 0
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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
send message when pressing enter; clear text area after sending
2020-05-13 19:14:02 +00:00
onClicked: {
move views & logic into their respective folders; add initial tab for node management
2020-05-15 21:10:00 +00:00
chatsModel.onSend(txtData.text)
send message when pressing enter; clear text area after sending
2020-05-13 19:14:02 +00:00
txtData.text = ""
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
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
send message when pressing enter; clear text area after sending
2020-05-13 19:14:02 +00:00
Keys.onEnterPressed: {
move views & logic into their respective folders; add initial tab for node management
2020-05-15 21:10:00 +00:00
chatsModel.onSend(txtData.text)
send message when pressing enter; clear text area after sending
2020-05-13 19:14:02 +00:00
txtData.text = ""
}
Keys.onReturnPressed: {
move views & logic into their respective folders; add initial tab for node management
2020-05-15 21:10:00 +00:00
chatsModel.onSend(txtData.text)
send message when pressing enter; clear text area after sending
2020-05-13 19:14:02 +00:00
txtData.text = ""
}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
background: Rectangle {
color: "#00000000"
}
}
MouseArea {
id: mouseArea1
anchors.rightMargin: 50
anchors.fill: parent
onClicked : {
txtData.forceActiveFocus(Qt.MouseFocusReason)
}
}
}
}
}
}
}
/*##^##
Designer {
feat: show your messages right aligned The messages you send will now be aligned right. Also fixes the issue of the chats being visible under the chat input
2020-05-15 15:39:42 +00:00
D{i:0;formeditorZoom:0.75;height:770;width:1152}
chore: split ChatLayout into a seprate file Preliminary work for the wallet. This way, AppLayout isn,t goign to be huge
2020-05-13 17:27:06 +00:00
}
##^##*/