From c0fdeb3f34200c1efa105c4dd49ed90a369cc863 Mon Sep 17 00:00:00 2001
From: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
Date: Fri, 3 Feb 2023 13:49:25 -0300
Subject: [PATCH] misc: improve minimum width swarm panels in chatview
GitLab: #954
Change-Id: I6fe7537b0de7fb904a05159072476003ee835eea
---
.../mainview/components/AddMemberPanel.qml | 13 ++---
src/app/mainview/components/ChatView.qml | 54 +++++++++++++++----
.../mainview/components/SwarmDetailsPanel.qml | 16 ++++--
3 files changed, 59 insertions(+), 24 deletions(-)
diff --git a/src/app/mainview/components/AddMemberPanel.qml b/src/app/mainview/components/AddMemberPanel.qml
index b6bfbc86c..a111dcc7a 100644
--- a/src/app/mainview/components/AddMemberPanel.qml
+++ b/src/app/mainview/components/AddMemberPanel.qml
@@ -32,14 +32,10 @@ Rectangle {
color: JamiTheme.backgroundColor
property int type: ContactList.ADDCONVMEMBER
- width: 250
-
ColumnLayout {
id: contactPickerPopupRectColumnLayout
- anchors.top: root.top
- anchors.bottom: root.bottom
- anchors.margins: 16
+ anchors.fill: parent
ContactSearchBar {
id: contactPickerContactSearchBar
@@ -59,9 +55,10 @@ Rectangle {
JamiListView {
id: contactPickerListView
- Layout.alignment: Qt.AlignCenter
- Layout.preferredWidth: root.width - 8
- Layout.preferredHeight: contactPickerPopupRectColumnLayout.height - contactPickerContactSearchBar.height
+ Layout.fillHeight: true
+ Layout.fillWidth: true
+ Layout.leftMargin: 4
+ Layout.rightMargin: 4
model: ContactAdapter.getContactSelectableModel(type)
diff --git a/src/app/mainview/components/ChatView.qml b/src/app/mainview/components/ChatView.qml
index 1c19ac459..eb16cd6ba 100644
--- a/src/app/mainview/components/ChatView.qml
+++ b/src/app/mainview/components/ChatView.qml
@@ -35,6 +35,11 @@ Rectangle {
property bool allMessagesLoaded
property var mapPositions: PositionManager.mapStatus
+
+ property int lastContentsSplitSize: JamiTheme.detailsPageMinWidth
+ property int lastDetailsSplitSize: JamiTheme.detailsPageMinWidth
+ property int previousWidth: width
+
signal needToHideConversationInCall
signal messagesCleared
signal messagesLoaded
@@ -107,9 +112,33 @@ Rectangle {
onShowDetailsClicked: {
addMemberPanel.visible = false
+ if (swarmDetailsPanel.visible) {
+ chatContents.visible = true
+ } else {
+ if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.chatViewHeaderMinimumWidth)
+ chatContents.visible = false
+ }
swarmDetailsPanel.visible = !swarmDetailsPanel.visible
}
+ onWidthChanged: {
+ var isExpanding = previousWidth < width
+
+ if (!swarmDetailsPanel.visible && !addMemberPanel.visible)
+ return
+
+ if (chatViewHeader.width < JamiTheme.detailsPageMinWidth + JamiTheme.chatViewHeaderMinimumWidth
+ && !isExpanding && chatContents.visible) {
+ lastContentsSplitSize = chatContents.width
+ lastDetailsSplitSize = swarmDetailsPanel.visible ? swarmDetailsPanel.width : addMemberPanel.width
+ chatContents.visible = false
+ } else if (chatViewHeader.width >= JamiTheme.chatViewHeaderMinimumWidth + lastDetailsSplitSize
+ && isExpanding && !layoutManager.isFullScreen && !chatContents.visible) {
+ chatContents.visible = true
+ }
+ previousWidth = width
+ }
+
Connections {
target: CurrentConversation
@@ -127,6 +156,12 @@ Rectangle {
onAddToConversationClicked: {
swarmDetailsPanel.visible = false
+ if (addMemberPanel.visible) {
+ chatContents.visible = true
+ } else {
+ if (chatViewHeader.width - JamiTheme.detailsPageMinWidth < JamiTheme.chatViewHeaderMinimumWidth)
+ chatContents.visible = false
+ }
addMemberPanel.visible = !addMemberPanel.visible
}
@@ -212,10 +247,13 @@ Rectangle {
}
ColumnLayout {
+ id: chatContents
SplitView.maximumWidth: splitView.width
- // Note, without JamiTheme.detailsPageMinWidth, sometimes the details page is hidden at the right
- SplitView.preferredWidth: Math.max(0, 2 * splitView.width / 3 - JamiTheme.detailsPageMinWidth)
- SplitView.fillHeight: true
+ SplitView.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
+
+ SplitView.preferredWidth: chatViewHeader.width -
+ (swarmDetailsPanel.visible ? swarmDetailsPanel.width :
+ ( addMemberPanel.visible ? addMemberPanel.width : 0))
StackLayout {
id: chatViewStack
@@ -288,11 +326,8 @@ Rectangle {
visible: false
SplitView.maximumWidth: splitView.width
- SplitView.preferredWidth: Math.max(JamiTheme.detailsPageMinWidth, splitView.width / 3)
+ SplitView.preferredWidth: JamiTheme.detailsPageMinWidth
SplitView.minimumWidth: JamiTheme.detailsPageMinWidth
- SplitView.fillHeight: true
- Layout.fillHeight: true
- Layout.fillWidth: true
}
AddMemberPanel {
@@ -300,11 +335,8 @@ Rectangle {
visible: false
SplitView.maximumWidth: splitView.width
- SplitView.preferredWidth: Math.max(JamiTheme.detailsPageMinWidth, splitView.width / 3)
+ SplitView.preferredWidth: JamiTheme.detailsPageMinWidth
SplitView.minimumWidth: JamiTheme.detailsPageMinWidth
- SplitView.fillHeight: true
- Layout.fillHeight: true
- Layout.fillWidth: true
}
}
}
diff --git a/src/app/mainview/components/SwarmDetailsPanel.qml b/src/app/mainview/components/SwarmDetailsPanel.qml
index 3a5e793cc..e13a2e7af 100644
--- a/src/app/mainview/components/SwarmDetailsPanel.qml
+++ b/src/app/mainview/components/SwarmDetailsPanel.qml
@@ -43,8 +43,7 @@ Rectangle {
ColumnLayout {
id: swarmProfileDetails
- Layout.fillHeight: true
- Layout.fillWidth: true
+ anchors.fill: parent
spacing: 0
ColumnLayout {
@@ -71,7 +70,9 @@ Rectangle {
id: titleLine
Layout.alignment: Qt.AlignHCenter
- Layout.preferredWidth: parent.width - 32
+ Layout.fillWidth: true
+ Layout.leftMargin: 16
+ Layout.rightMargin: 16
Layout.topMargin: 5
TextMetrics {
@@ -130,7 +131,9 @@ Rectangle {
id: descriptionLine
Layout.alignment: Qt.AlignHCenter
- Layout.preferredWidth: parent.width - 32
+ Layout.fillWidth: true
+ Layout.leftMargin: 16
+ Layout.rightMargin: 16
font.pointSize: JamiTheme.menuFontSize
@@ -616,6 +619,8 @@ Rectangle {
RowLayout {
spacing: 10
+ anchors.fill: parent
+ anchors.rightMargin: JamiTheme.preferredMarginSize
Avatar {
width: JamiTheme.smartListAvatarSize
@@ -638,9 +643,10 @@ Rectangle {
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.topMargin: JamiTheme.preferredMarginSize / 2
+ Layout.fillWidth: true
eText: UtilsAdapter.getContactBestName(CurrentAccount.id, modelData)
- maxWidth: JamiTheme.preferredFieldWidth
+ maxWidth: width
font.pointSize: JamiTheme.participantFontSize
color: JamiTheme.primaryForegroundColor
--
GitLab