[#2813] Updating chat layout

Switched to StatusAppThreePanelLayout as per new
design for members list

Closes #2813

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -21,9 +21,7 @@ import "../Wallet"
 
 Item {
     id: chatColumnLayout
-    Layout.fillWidth: true
+    anchors.fill: parent
-    Layout.fillHeight: true
-    Layout.minimumWidth: 300
 
     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;
+                            }
                         }
                     }
                 }

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -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 { }
-    }
 }
 
 /*##^##

ui/app/AppLayouts/Chat/ChatColumn/UserList.qml

@@ -14,21 +14,40 @@ import "./samples/"
 import "./MessageComponents"
 import "../ContactsColumn"
 
+Item {
+    id: root
+    anchors.fill: parent
+    property var userList
+    property var currentTime
 
-Rectangle {
+    Rectangle {
-    id: userList
+        anchors.fill: parent
-
+        color: Style.current.secondaryMenuBackground
-
+    }
-    
-    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 {
-        anchors.bottomMargin: Style.current.bigPadding
+            left: parent.left
-        spacing: 0
+            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
     }
@@ -36,17 +55,17 @@ Rectangle {
     DelegateModelGeneralized {
         id: userListDelegate
         lessThan: [
-            function(left, right) { 
+            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
         }
     }
 }

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -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 {
@@ -104,7 +118,7 @@ StatusAppTwoPanelLayout {
         confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
         onConfirmButtonClicked: {
             if (profileModel.contacts.isAdded(chatColumn.contactToRemove)) {
-              profileModel.contacts.removeContact(chatColumn.contactToRemove)
+                profileModel.contacts.removeContact(chatColumn.contactToRemove)
             }
             removeContactConfirmationDialog.parentPopup.close();
             removeContactConfirmationDialog.close();

ui/app/AppLayouts/Chat/CommunityColumn.qml

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

ui/app/AppLayouts/Chat/CommunityComponents/CommunityUserList.qml

@@ -14,18 +14,42 @@ import "../ChatColumn/MessageComponents"
 import "../ChatColumn/"
 import "../ContactsColumn"
 
-Rectangle {
+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
+    StyledText {
-
+        id: titleText
-    color: Style.current.secondaryMenuBackground
+        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 {
-        anchors.bottomMargin: Style.current.bigPadding
+            top: titleText.bottom
-        spacing: 0
+            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
         }
     }
 }

ui/app/AppLayouts/Chat/ContactsColumn.qml

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