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

[#2813] Updating chat layout 

Switched to StatusAppThreePanelLayout as per new
design for members list

Closes #2813
This commit is contained in:
Alexandra Betouni 2021-07-22 17:53:19 +03:00 committed by Iuri Matias
parent 07142dc66b
commit 0a01e84b1c
7 changed files with 108 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ui/app/AppLayouts/Chat/ChatColumn.qml
View File

@ -21,9 +21,7 @@ import "../Wallet"
Item {
id: chatColumnLayout
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: 300
anchors.fill: parent
property alias pinnedMessagesPopupComponent: pinnedMessagesPopupComponent
property int chatGroupsListViewCount: 0
@ -46,6 +44,7 @@ Item {
property var idMap: ({})
property var suggestionsObj: ([])
property Timer timer: Timer { }
property var userList
property var onActivated: function () {
chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
}
@ -305,11 +304,14 @@ Item {
Loader {
active: stackLayoutChatMessages.currentIndex === index
sourceComponent: ChatMessages {
id: chatMessages
messageList: model.messages
currentTime: chatColumnLayout.currentTime
messageContextMenuInst: MessageContextMenu {
reactionModel: EmojiReactions { }
}
Component.onCompleted: {
chatColumnLayout.userList = chatMessages.messageList.userList;
}
}
}
}

37
ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
View File

@ -14,8 +14,10 @@ import "./MessageComponents"
import "../ContactsColumn"
import "../CommunityComponents"
SplitView {
Item {
id: svRoot
anchors.fill: parent
property alias chatLogView: chatLogView
property alias scrollToMessage: chatLogView.scrollToMessage
@ -24,21 +26,12 @@ SplitView {
property bool loadingMessages: false
property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
property int newMessages: 0
property var currentTime
Layout.fillWidth: true
Layout.fillHeight: true
handle: SplitViewHandle { implicitWidth: 5}
ScrollView {
id: root
anchors.fill: parent
contentHeight: childrenRect.height
contentItem: chatLogView
SplitView.fillWidth: true
SplitView.minimumWidth: 200
height: parent.height
ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
@ -342,26 +335,6 @@ SplitView {
}
}
}
Loader {
property int defaultWidth: 250
SplitView.preferredWidth: active ? defaultWidth : 0
SplitView.minimumWidth: active ? 50 : 0
active: showUsers && chatsModel.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne
anchors.top: parent.top
anchors.bottom: parent.bottom
sourceComponent:appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communityUserListComponent : userListComponent
}
Component {
id: communityUserListComponent
CommunityUserList { }
}
Component {
id: userListComponent
UserList { }
}
}
/*##^##

41
ui/app/AppLayouts/Chat/ChatColumn/UserList.qml
View File

@ -14,21 +14,40 @@ import "./samples/"
import "./MessageComponents"
import "../ContactsColumn"
Item {
id: root
anchors.fill: parent
property var userList
property var currentTime
Rectangle {
id: userList
anchors.fill: parent
color: Style.current.secondaryMenuBackground
}
StyledText {
id: titleText
anchors.top: parent.top
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
opacity: (root.width > 50) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: Style.current.primaryTextFontSize
text: qsTr("Members")
}
ListView {
id: userListView
anchors.fill: parent
anchors.bottomMargin: Style.current.bigPadding
spacing: 0
anchors {
left: parent.left
top: titleText.bottom
topMargin: Style.current.padding
right: parent.right
rightMargin: Style.current.halfPadding
bottom: parent.bottom
bottomMargin: Style.current.bigPadding
}
boundsBehavior: Flickable.StopAtBounds
model: userListDelegate
}
@ -37,16 +56,16 @@ Rectangle {
id: userListDelegate
lessThan: [
function (left, right) {
return left.lastSeen > right.lastSeen
return (left.lastSeen > right.lastSeen);
}
]
model: messageList.userList
model: root.userList
delegate: User {
publicKey: model.publicKey
name: model.userName
identicon: model.identicon
lastSeen: model.lastSeen
currentTime: svRoot.currentTime
currentTime: root.currentTime
}
}
}

24
ui/app/AppLayouts/Chat/ChatLayout.qml
View File

@ -6,12 +6,16 @@ import "../../../shared"
import "../../../shared/status"
import "."
import "components"
import "./ChatColumn"
import "./CommunityComponents"
import StatusQ.Layout 0.1
StatusAppTwoPanelLayout {
StatusAppThreePanelLayout {
id: chatView
handle: SplitViewHandle { implicitWidth: 5 }
property alias chatColumn: chatColumn
property bool stickersLoaded: false
property bool profilePopupOpened: false
@ -31,17 +35,27 @@ StatusAppTwoPanelLayout {
leftPanel: Loader {
id: contactColumnLoader
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communtiyColumnComponent : contactsColumnComponent
}
rightPanel: ChatColumn {
centerPanel: ChatColumn {
id: chatColumn
anchors.fill: parent
chatGroupsListViewCount: contactColumnLoader.item.chatGroupsListViewCount
}
showRightPanel: chatColumn.showUsers && (chatsModel.channelView.activeChannel.chatType !== Constants.chatTypeOneToOne)
rightPanel: appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communityUserListComponent : userListComponent
Component {
id: communityUserListComponent
CommunityUserList { currentTime: chatColumn.currentTime }
}
Component {
id: userListComponent
UserList { currentTime: chatColumn.currentTime; userList: chatColumn.userList }
}
Component {
id: contactsColumnComponent
ContactsColumn {

9
ui/app/AppLayouts/Chat/CommunityColumn.qml
View File

@ -15,15 +15,14 @@ import "./CommunityComponents"
Item {
id: root
width: 304
height: parent.height
// TODO unhardcode
property int chatGroupsListViewCount: communityChatListAndCategories.chatList.count
property Component pinnedMessagesPopupComponent
id: root
Layout.fillHeight: true
width: 304
StatusChatInfoToolBar {
id: communityHeader
anchors.top: parent.top

38
ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml
View File

@ -14,18 +14,42 @@ import "../ChatColumn/MessageComponents"
import "../ChatColumn/"
import "../ContactsColumn"
Item {
id: root
anchors.fill: parent
property var userList
property var currentTime
Rectangle {
anchors.fill: parent
color: Style.current.secondaryMenuBackground
}
property QtObject community: chatsModel.communities.activeCommunity
id: root
color: Style.current.secondaryMenuBackground
StyledText {
id: titleText
anchors.top: parent.top
anchors.topMargin: Style.current.padding
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
opacity: (root.width > 50) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: Style.current.primaryTextFontSize
text: qsTr("Members")
}
ListView {
id: userListView
anchors.fill: parent
anchors.bottomMargin: Style.current.bigPadding
spacing: 0
anchors {
top: titleText.bottom
topMargin: Style.current.padding
left: parent.left
right: parent.right
rightMargin: Style.current.halfPadding
bottom: parent.bottom
bottomMargin: Style.current.bigPadding
}
boundsBehavior: Flickable.StopAtBounds
model: userListDelegate
}
@ -45,8 +69,8 @@ Rectangle {
name: !model.userName.endsWith(".eth") && !!nickname ? nickname : Utils.removeStatusEns(model.userName)
identicon: model.identicon
lastSeen: chatsModel.communities.activeCommunity.memberLastSeen(model.pubKey)
currentTime: svRoot.currentTime
statusType: chatsModel.communities.activeCommunity.memberStatus(model.pubKey)
currentTime: root.currentTime
}
}
}

6
ui/app/AppLayouts/Chat/ContactsColumn.qml
View File

@ -16,13 +16,13 @@ import StatusQ.Popups 0.1
Item {
id: contactsColumn
width: 304
height: parent.height
property int chatGroupsListViewCount: channelList.chatListItems.count
property alias searchStr: searchBox.text
signal openProfileClicked()
Layout.fillHeight: true
width: 304
MouseArea {
anchors.fill: parent
onClicked: {