[#2813] Updating chat layout
Switched to StatusAppThreePanelLayout as per new design for members list Closes #2813
This commit is contained in:
parent
07142dc66b
commit
0a01e84b1c
|
@ -21,9 +21,7 @@ import "../Wallet"
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: chatColumnLayout
|
id: chatColumnLayout
|
||||||
Layout.fillWidth: true
|
anchors.fill: parent
|
||||||
Layout.fillHeight: true
|
|
||||||
Layout.minimumWidth: 300
|
|
||||||
|
|
||||||
property alias pinnedMessagesPopupComponent: pinnedMessagesPopupComponent
|
property alias pinnedMessagesPopupComponent: pinnedMessagesPopupComponent
|
||||||
property int chatGroupsListViewCount: 0
|
property int chatGroupsListViewCount: 0
|
||||||
|
@ -46,6 +44,7 @@ Item {
|
||||||
property var idMap: ({})
|
property var idMap: ({})
|
||||||
property var suggestionsObj: ([])
|
property var suggestionsObj: ([])
|
||||||
property Timer timer: Timer { }
|
property Timer timer: Timer { }
|
||||||
|
property var userList
|
||||||
property var onActivated: function () {
|
property var onActivated: function () {
|
||||||
chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
|
chatInput.textInput.forceActiveFocus(Qt.MouseFocusReason)
|
||||||
}
|
}
|
||||||
|
@ -305,11 +304,14 @@ Item {
|
||||||
Loader {
|
Loader {
|
||||||
active: stackLayoutChatMessages.currentIndex === index
|
active: stackLayoutChatMessages.currentIndex === index
|
||||||
sourceComponent: ChatMessages {
|
sourceComponent: ChatMessages {
|
||||||
|
id: chatMessages
|
||||||
messageList: model.messages
|
messageList: model.messages
|
||||||
currentTime: chatColumnLayout.currentTime
|
|
||||||
messageContextMenuInst: MessageContextMenu {
|
messageContextMenuInst: MessageContextMenu {
|
||||||
reactionModel: EmojiReactions { }
|
reactionModel: EmojiReactions { }
|
||||||
}
|
}
|
||||||
|
Component.onCompleted: {
|
||||||
|
chatColumnLayout.userList = chatMessages.messageList.userList;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,8 +14,10 @@ import "./MessageComponents"
|
||||||
import "../ContactsColumn"
|
import "../ContactsColumn"
|
||||||
import "../CommunityComponents"
|
import "../CommunityComponents"
|
||||||
|
|
||||||
SplitView {
|
Item {
|
||||||
id: svRoot
|
id: svRoot
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
property alias chatLogView: chatLogView
|
property alias chatLogView: chatLogView
|
||||||
property alias scrollToMessage: chatLogView.scrollToMessage
|
property alias scrollToMessage: chatLogView.scrollToMessage
|
||||||
|
|
||||||
|
@ -24,21 +26,12 @@ SplitView {
|
||||||
property bool loadingMessages: false
|
property bool loadingMessages: false
|
||||||
property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
|
property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
|
||||||
property int newMessages: 0
|
property int newMessages: 0
|
||||||
property var currentTime
|
|
||||||
|
|
||||||
Layout.fillWidth: true
|
|
||||||
Layout.fillHeight: true
|
|
||||||
|
|
||||||
handle: SplitViewHandle { implicitWidth: 5}
|
|
||||||
|
|
||||||
ScrollView {
|
ScrollView {
|
||||||
id: root
|
id: root
|
||||||
|
anchors.fill: parent
|
||||||
|
contentHeight: childrenRect.height
|
||||||
contentItem: chatLogView
|
contentItem: chatLogView
|
||||||
|
|
||||||
SplitView.fillWidth: true
|
|
||||||
SplitView.minimumWidth: 200
|
|
||||||
|
|
||||||
height: parent.height
|
|
||||||
ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
|
ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
|
||||||
ScrollBar.horizontal.policy: 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 { }
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*##^##
|
/*##^##
|
||||||
|
|
|
@ -14,39 +14,58 @@ import "./samples/"
|
||||||
import "./MessageComponents"
|
import "./MessageComponents"
|
||||||
import "../ContactsColumn"
|
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 {
|
ListView {
|
||||||
id: userListView
|
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
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
model: userListDelegate
|
model: userListDelegate
|
||||||
}
|
}
|
||||||
|
|
||||||
DelegateModelGeneralized {
|
DelegateModelGeneralized {
|
||||||
id: userListDelegate
|
id: userListDelegate
|
||||||
lessThan: [
|
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 {
|
delegate: User {
|
||||||
publicKey: model.publicKey
|
publicKey: model.publicKey
|
||||||
name: model.userName
|
name: model.userName
|
||||||
identicon: model.identicon
|
identicon: model.identicon
|
||||||
lastSeen: model.lastSeen
|
lastSeen: model.lastSeen
|
||||||
currentTime: svRoot.currentTime
|
currentTime: root.currentTime
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,12 +6,16 @@ import "../../../shared"
|
||||||
import "../../../shared/status"
|
import "../../../shared/status"
|
||||||
import "."
|
import "."
|
||||||
import "components"
|
import "components"
|
||||||
|
import "./ChatColumn"
|
||||||
|
import "./CommunityComponents"
|
||||||
|
|
||||||
import StatusQ.Layout 0.1
|
import StatusQ.Layout 0.1
|
||||||
|
|
||||||
StatusAppTwoPanelLayout {
|
StatusAppThreePanelLayout {
|
||||||
id: chatView
|
id: chatView
|
||||||
|
|
||||||
|
handle: SplitViewHandle { implicitWidth: 5 }
|
||||||
|
|
||||||
property alias chatColumn: chatColumn
|
property alias chatColumn: chatColumn
|
||||||
property bool stickersLoaded: false
|
property bool stickersLoaded: false
|
||||||
property bool profilePopupOpened: false
|
property bool profilePopupOpened: false
|
||||||
|
@ -31,17 +35,27 @@ StatusAppTwoPanelLayout {
|
||||||
|
|
||||||
leftPanel: Loader {
|
leftPanel: Loader {
|
||||||
id: contactColumnLoader
|
id: contactColumnLoader
|
||||||
anchors.fill: parent
|
|
||||||
anchors.horizontalCenter: parent.horizontalCenter
|
|
||||||
sourceComponent: appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communtiyColumnComponent : contactsColumnComponent
|
sourceComponent: appSettings.communitiesEnabled && chatsModel.communities.activeCommunity.active ? communtiyColumnComponent : contactsColumnComponent
|
||||||
}
|
}
|
||||||
|
|
||||||
rightPanel: ChatColumn {
|
centerPanel: ChatColumn {
|
||||||
id: chatColumn
|
id: chatColumn
|
||||||
anchors.fill: parent
|
|
||||||
chatGroupsListViewCount: contactColumnLoader.item.chatGroupsListViewCount
|
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 {
|
Component {
|
||||||
id: contactsColumnComponent
|
id: contactsColumnComponent
|
||||||
ContactsColumn {
|
ContactsColumn {
|
||||||
|
@ -104,7 +118,7 @@ StatusAppTwoPanelLayout {
|
||||||
confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
|
confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
|
||||||
onConfirmButtonClicked: {
|
onConfirmButtonClicked: {
|
||||||
if (profileModel.contacts.isAdded(chatColumn.contactToRemove)) {
|
if (profileModel.contacts.isAdded(chatColumn.contactToRemove)) {
|
||||||
profileModel.contacts.removeContact(chatColumn.contactToRemove)
|
profileModel.contacts.removeContact(chatColumn.contactToRemove)
|
||||||
}
|
}
|
||||||
removeContactConfirmationDialog.parentPopup.close();
|
removeContactConfirmationDialog.parentPopup.close();
|
||||||
removeContactConfirmationDialog.close();
|
removeContactConfirmationDialog.close();
|
||||||
|
|
|
@ -15,15 +15,14 @@ import "./CommunityComponents"
|
||||||
|
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
|
id: root
|
||||||
|
width: 304
|
||||||
|
height: parent.height
|
||||||
|
|
||||||
// TODO unhardcode
|
// TODO unhardcode
|
||||||
property int chatGroupsListViewCount: communityChatListAndCategories.chatList.count
|
property int chatGroupsListViewCount: communityChatListAndCategories.chatList.count
|
||||||
property Component pinnedMessagesPopupComponent
|
property Component pinnedMessagesPopupComponent
|
||||||
|
|
||||||
id: root
|
|
||||||
|
|
||||||
Layout.fillHeight: true
|
|
||||||
width: 304
|
|
||||||
|
|
||||||
StatusChatInfoToolBar {
|
StatusChatInfoToolBar {
|
||||||
id: communityHeader
|
id: communityHeader
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
|
|
|
@ -14,18 +14,42 @@ import "../ChatColumn/MessageComponents"
|
||||||
import "../ChatColumn/"
|
import "../ChatColumn/"
|
||||||
import "../ContactsColumn"
|
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
|
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 {
|
ListView {
|
||||||
id: userListView
|
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
|
boundsBehavior: Flickable.StopAtBounds
|
||||||
model: userListDelegate
|
model: userListDelegate
|
||||||
}
|
}
|
||||||
|
@ -33,8 +57,8 @@ Rectangle {
|
||||||
DelegateModelGeneralized {
|
DelegateModelGeneralized {
|
||||||
id: userListDelegate
|
id: userListDelegate
|
||||||
lessThan: [
|
lessThan: [
|
||||||
function(left, right) {
|
function(left, right) {
|
||||||
return left.lastSeen > right.lastSeen
|
return left.lastSeen > right.lastSeen
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
model: community.members
|
model: community.members
|
||||||
|
@ -45,8 +69,8 @@ Rectangle {
|
||||||
name: !model.userName.endsWith(".eth") && !!nickname ? nickname : Utils.removeStatusEns(model.userName)
|
name: !model.userName.endsWith(".eth") && !!nickname ? nickname : Utils.removeStatusEns(model.userName)
|
||||||
identicon: model.identicon
|
identicon: model.identicon
|
||||||
lastSeen: chatsModel.communities.activeCommunity.memberLastSeen(model.pubKey)
|
lastSeen: chatsModel.communities.activeCommunity.memberLastSeen(model.pubKey)
|
||||||
currentTime: svRoot.currentTime
|
|
||||||
statusType: chatsModel.communities.activeCommunity.memberStatus(model.pubKey)
|
statusType: chatsModel.communities.activeCommunity.memberStatus(model.pubKey)
|
||||||
|
currentTime: root.currentTime
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,13 +16,13 @@ import StatusQ.Popups 0.1
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
id: contactsColumn
|
id: contactsColumn
|
||||||
|
width: 304
|
||||||
|
height: parent.height
|
||||||
|
|
||||||
property int chatGroupsListViewCount: channelList.chatListItems.count
|
property int chatGroupsListViewCount: channelList.chatListItems.count
|
||||||
property alias searchStr: searchBox.text
|
property alias searchStr: searchBox.text
|
||||||
signal openProfileClicked()
|
signal openProfileClicked()
|
||||||
|
|
||||||
Layout.fillHeight: true
|
|
||||||
width: 304
|
|
||||||
|
|
||||||
MouseArea {
|
MouseArea {
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
onClicked: {
|
onClicked: {
|
||||||
|
|
Loading…
Reference in New Issue