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

fix(Profile): ContactsView layout and scrolling issues 

Closes #5876
This commit is contained in:
Alexandra Betouni 2022-06-03 18:32:03 +03:00 committed by Alexandra Betouni
parent 5ca9c9fadf
commit 1cda32470b
4 changed files with 153 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ui/app/AppLayouts/Profile/ProfileLayout.qml
View File

@ -83,8 +83,8 @@ StatusAppTwoPanelLayout {
}
MyProfileView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
profileStore: profileView.store.profileStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.profile)
@ -92,13 +92,11 @@ StatusAppTwoPanelLayout {
}
ContactsView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
contactsStore: profileView.store.contactsStore
sectionTitle: qsTr("Contacts")
contentWidth: d.contentWidth
backButtonName: profileView.store.getNameForSubsection(Constants.settingsSubsection.messaging)
onBackButtonClicked: {
@ -111,8 +109,8 @@ StatusAppTwoPanelLayout {
// TODO: handle structure for this subsection to match style used in onther sections
// using `SettingsContentBase` component as base.
id: ensContainer
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
ensUsernamesStore: profileView.store.ensUsernamesStore
contactsStore: profileView.store.contactsStore
@ -122,8 +120,8 @@ StatusAppTwoPanelLayout {
}
MessagingView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
messagingStore: profileView.store.messagingStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.messaging)
@ -131,8 +129,8 @@ StatusAppTwoPanelLayout {
}
WalletView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
walletStore: profileView.store.walletStore
emojiPopup: profileView.emojiPopup
@ -141,8 +139,8 @@ StatusAppTwoPanelLayout {
}
PrivacyView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
privacyStore: profileView.store.privacyStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.privacyAndSecurity)
@ -150,8 +148,8 @@ StatusAppTwoPanelLayout {
}
AppearanceView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
appearanceStore: profileView.store.appearanceStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.appearance)
@ -160,8 +158,8 @@ StatusAppTwoPanelLayout {
}
LanguageView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
languageStore: profileView.store.languageStore
currencyStore: profileView.store.walletStore.currencyStore
@ -170,8 +168,8 @@ StatusAppTwoPanelLayout {
}
NotificationsView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
notificationsStore: profileView.store.notificationsStore
devicesStore: profileView.store.devicesStore
@ -180,8 +178,8 @@ StatusAppTwoPanelLayout {
}
DevicesView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
devicesStore: profileView.store.devicesStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.devicesSettings)
@ -189,8 +187,8 @@ StatusAppTwoPanelLayout {
}
BrowserView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
store: profileView.store
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.browserSettings)
@ -198,8 +196,8 @@ StatusAppTwoPanelLayout {
}
AdvancedView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
advancedStore: profileView.store.advancedStore
sectionTitle: profileView.store.getNameForSubsection(Constants.settingsSubsection.advanced)
@ -207,8 +205,8 @@ StatusAppTwoPanelLayout {
}
AboutView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
store: profileView.store
globalStore: profileView.globalStore
@ -217,8 +215,8 @@ StatusAppTwoPanelLayout {
}
CommunitiesView {
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: parent.width
implicitHeight: parent.height
profileSectionStore: profileView.store
rootStore: profileView.globalStore

10
ui/app/AppLayouts/Profile/panels/ContactsListPanel.qml
View File

@ -16,6 +16,8 @@ Item {
property var contactsModel
property int panelUsage: Constants.contactsPanelUsage.unknownPosition
property int contactsListHeight: ((contactsList.count * contactsList.itemAtIndex(0).implicitHeight)+title.height)
property bool scrollbarOn: false
property string title: ""
property string searchString: ""
@ -35,7 +37,6 @@ Item {
StyledText {
id: title
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
visible: contactListRoot.title !== ""
@ -93,7 +94,11 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
interactive: false
clip: true
ScrollBar.vertical: ScrollBar {
policy: contactListRoot.scrollbarOn ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
}
model: delegateModel
}
@ -102,6 +107,7 @@ Item {
ContactPanel {
id: panelDelegate
width: (parent.width-10)
name: model.displayName
publicKey: model.pubKey
icon: model.icon

118
ui/app/AppLayouts/Profile/views/ContactsView.qml
View File

@ -22,7 +22,8 @@ import "../../Chat/panels"
SettingsContentBase {
id: root
onWidthChanged: { contentItem.width = width; }
onHeightChanged: { contentItem.height = height; }
property ContactsStore contactsStore
property alias searchStr: searchBox.text
@ -37,26 +38,23 @@ SettingsContentBase {
}
]
ColumnLayout {
spacing: 0
width: root.contentWidth
height: root.height
Item {
id: contentItem
SearchBox {
id: searchBox
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
input.implicitHeight: 44
input.placeholderText: qsTr("Search by a display name or chat key")
}
StatusTabBar {
id: contactsTabBar
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
Layout.topMargin: 2 * Style.current.padding
anchors.left: parent.left
anchors.right: parent.right
anchors.top: searchBox.bottom
anchors.topMargin: (2 * Style.current.padding)
StatusTabButton {
id: contactsBtn
@ -89,31 +87,27 @@ SettingsContentBase {
StackLayout {
id: stackLayout
Layout.fillWidth: true
Layout.fillHeight: true
anchors.left: parent.left
anchors.right: parent.right
anchors.top: contactsTabBar.bottom
anchors.bottom: parent.bottom
currentIndex: contactsTabBar.currentIndex
// CONTACTS
Item {
Layout.fillWidth: true
Layout.fillHeight: true
ColumnLayout {
anchors.fill: parent
Column {
ContactsListPanel {
Layout.fillWidth: true
Layout.preferredHeight: root.height * 0.5
contactsModel: root.contactsStore.myContactsModel
clip: true
id: verifiedContacts
width: parent.width
height: ((contactsListHeight < (stackLayout.height/2)) ? contactsListHeight :
(stackLayout.height-mutualContacts.contactsListHeight))
scrollbarOn: mutualContacts.contactsListHeight > (stackLayout.height/2) ?
(contactsListHeight > (stackLayout.height/2)) : (contactsListHeight > parent.height)
title: qsTr("Identity Verified Contacts")
contactsModel: root.contactsStore.myContactsModel
searchString: searchBox.text
panelUsage: Constants.contactsPanelUsage.verifiedMutualContacts
onOpenProfilePopup: {
Global.openProfilePopup(publicKey)
}
onSendMessageActionTriggered: {
root.contactsStore.joinPrivateChat(publicKey)
}
@ -124,13 +118,15 @@ SettingsContentBase {
}
ContactsListPanel {
Layout.fillWidth: true
Layout.preferredHeight: root.height * 0.5
id: mutualContacts
width: parent.width
height: (contactsListHeight+50)
scrollbarOn: verifiedContacts.contactsListHeight > (stackLayout.height/2) ?
(contactsListHeight > (stackLayout.height/2)) : (contactsListHeight > parent.height)
title: qsTr("Contacts")
contactsModel: root.contactsStore.myContactsModel
clip: true
searchString: searchBox.text
panelUsage: Constants.contactsPanelUsage.mutualContacts
onOpenProfilePopup: {
Global.openProfilePopup(publicKey)
}
@ -143,34 +139,28 @@ SettingsContentBase {
Global.openProfilePopup(publicKey, null, "openNickname")
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
width: parent.width
height: parent.height
NoFriendsRectangle {
anchors.centerIn: parent
visible: root.contactsStore.myContactsModel.count === 0
//% "You don’t have any contacts yet"
text: qsTrId("you-don-t-have-any-contacts-yet")
width: parent.width
anchors.centerIn: parent
}
}
}
// PENDING REQUESTS
Item {
Layout.fillWidth: true
Layout.fillHeight: true
ColumnLayout {
anchors.fill: parent
Column {
ContactsListPanel {
Layout.fillWidth: true
Layout.preferredHeight: root.height * 0.5
clip: true
id: receivedRequests
width: parent.width
height: ((contactsListHeight < (stackLayout.height/2)) ? contactsListHeight :
(stackLayout.height-sentRequests.contactsListHeight))
scrollbarOn: (sentRequests.contactsListHeight > (stackLayout.height/2)) ?
(contactsListHeight > (stackLayout.height/2)) :
(contactsListHeight > (stackLayout.height - sentRequests.contactsListHeight))
title: qsTr("Received")
searchString: searchBox.text
contactsModel: root.contactsStore.receivedContactRequestsModel
@ -189,14 +179,17 @@ SettingsContentBase {
}
onContactRequestRejected: {
root.contactsStore.dismissContactRequest(publicKey)
root.contactsStore.rejectContactRequest(publicKey)
}
}
ContactsListPanel {
Layout.fillWidth: true
Layout.preferredHeight: root.height * 0.5
clip: true
id: sentRequests
width: parent.width
height: (contactsListHeight+50)
scrollbarOn: (receivedRequests.contactsListHeight > (stackLayout.height/2)) ?
(contactsListHeight > (stackLayout.height/2)) :
(contactsListHeight > (stackLayout.height - receivedRequests.contactsListHeight))
title: qsTr("Sent")
searchString: searchBox.text
contactsModel: root.contactsStore.sentContactRequestsModel
@ -210,22 +203,16 @@ SettingsContentBase {
Global.openProfilePopup(publicKey, null, "openNickname")
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
// Temporary commented until we provide appropriate flags on the `status-go` side to cover all sections.
// // REJECTED REQUESTS
// Item {
// Layout.fillWidth: true
// Layout.fillHeight: true
// //Layout.fillHeight: true
// ColumnLayout {
// anchors.fill: parent
// //anchors.fill: parent
// ContactsListPanel {
// Layout.fillWidth: true
@ -276,14 +263,11 @@ SettingsContentBase {
// BLOCKED
ContactsListPanel {
Layout.fillWidth: true
Layout.fillHeight: true
clip: true
width: parent.width
height: (contactsListHeight+50)
searchString: searchBox.text
contactsModel: root.contactsStore.blockedContactsModel
panelUsage: Constants.contactsPanelUsage.blockedContacts
onOpenProfilePopup: {
Global.openProfilePopup(publicKey)
}

8
ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
View File

@ -8,7 +8,7 @@ import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
MouseArea {
Item {
id: root
property string sectionTitle
@ -30,7 +30,10 @@ MouseArea {
readonly property int titleRowHeight: 56
}
MouseArea {
anchors.fill: parent
onClicked: { root.baseAreaClicked() }
}
Component.onCompleted: {
content.parent = contentWrapper
@ -93,9 +96,8 @@ MouseArea {
anchors.right: parent.right
anchors.topMargin: Style.current.bigPadding
contentWidth: Math.max(contentWrapper.implicitWidth, width)
contentHeight: Math.max(contentWrapper.implicitHeight, height)
contentHeight: Math.max(contentWrapper.implicitHeight, height)+anchors.topMargin
clip: true
MouseArea {
anchors.fill: parent
onClicked: { root.baseAreaClicked() }