misc: improve minimum width swarm panels in chatview

GitLab: #954

Change-Id: I6fe7537b0de7fb904a05159072476003ee835eea

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.fill: parent
-        anchors.bottom: root.bottom
-        anchors.margins: 16
 
         ContactSearchBar {
             id: contactPickerContactSearchBar
@@ -59,9 +55,10 @@ Rectangle {
         JamiListView {
             id: contactPickerListView
 
-            Layout.alignment: Qt.AlignCenter
+            Layout.fillHeight: true
-            Layout.preferredWidth: root.width - 8
+            Layout.fillWidth: true
-            Layout.preferredHeight: contactPickerPopupRectColumnLayout.height - contactPickerContactSearchBar.height
+            Layout.leftMargin: 4
+            Layout.rightMargin: 4
 
             model: ContactAdapter.getContactSelectableModel(type)
 

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.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
-                SplitView.preferredWidth: Math.max(0, 2 * splitView.width / 3 - JamiTheme.detailsPageMinWidth)
+
-                SplitView.fillHeight: true
+                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
             }
         }
     }

src/app/mainview/components/SwarmDetailsPanel.qml

@@ -43,8 +43,7 @@ Rectangle {
 
     ColumnLayout {
         id: swarmProfileDetails
-        Layout.fillHeight: true
+        anchors.fill: parent
-        Layout.fillWidth: true
         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