misc: use a layout for the smartlist sidepanel

Change-Id: I2a93999b3e8648bb1c7d2249a4f69d5b08c59ae5

src/app/constant/JamiQmlUtils.qml

@@ -74,8 +74,9 @@ Item {
     property bool isDonationBannerVisible: getIsDonationBannerVisible()
     Connections {
         target: UtilsAdapter
-        function onDonationCampaignSettingChanged() {
-            // Changing any of the donation campaign settings will trigger a recompute of the banner visibility.
+        function onDonationCampaignSettingsChanged() {
+            // Changing any of the donation campaign settings will trigger a recompute
+            // of the banner visibility.
             updateIsDonationBannerVisible();
         }
     }

src/app/mainview/components/ConversationListView.qml

@@ -26,10 +26,8 @@ import "../../commoncomponents"
 JamiListView {
     id: root
 
-    // the following should be marked required (Qtver >= 5.15)
-    // along with `required model`
-    property string headerLabel
-    property bool headerVisible
+    required property string headerLabel
+    required property bool headerVisible
 
     delegate: SmartListItemDelegate {
     }

src/app/mainview/components/DonationBanner.qml

@@ -14,141 +14,87 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+
 import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
 import net.jami.Enums 1.1
-import net.jami.Models 1.1
-import "../../commoncomponents"
-import "../../settingsview/components"
-
-Rectangle {
-    id: root
 
-    width: parent.width - 30
-    height: donationTextRect.height + 45 > donationIcon.height + 20 ? donationTextRect.height + 45 : donationIcon.height + 20
-    radius: 5
+import "../../commoncomponents"
 
-    color: JamiTheme.donationBackgroundColor
+Control {
+    id: control
 
     function bumpDonationReminderVisibility() {
         // Calculate the time 7 days from now
         var futureDate = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
-
-        // Format the date to 'yyyy-MM-dd hh:mm' format
         var formattedDate = Qt.formatDateTime(futureDate, "yyyy-MM-dd hh:mm");
-
-        // Set the application value
         UtilsAdapter.setAppValue(Settings.Key.Donation2023VisibleDate, formattedDate);
     }
 
-    GridLayout {
-        id: donationLayout
-
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
         anchors.fill: parent
-        columns: 3
-        rows: 2
-        rowSpacing: 0
-        columnSpacing: 10
-
-        Rectangle {
-            id: donationIcon
-
-            Layout.row: 0
-            Layout.column: 0
-            Layout.rowSpan: 2
-            Layout.preferredHeight: 70
-            Layout.preferredWidth: 45
-            Layout.leftMargin: 10
-            Layout.topMargin: 10
-            Layout.bottomMargin: 15
-
-            color: JamiTheme.transparentColor
+        onClicked: Qt.openUrlExternally(JamiTheme.donationUrl)
+    }
 
-            Image {
-                id: donationImage
-                height: parent.height
-                width: 50
-                anchors.centerIn: parent
-                source: JamiResources.icon_donate_svg
-            }
+    padding: 10
+    background: Rectangle {
+        color: JamiTheme.donationBackgroundColor
+        radius: 5
+    }
+    contentItem: RowLayout {
+        spacing: 16
+        Image {
+            // The image fades to the top, so align it to the bottom.
+            Layout.alignment: Qt.AlignBottom
+            source: JamiResources.icon_donate_svg
         }
 
-        Rectangle {
-            id: donationTextRect
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignTop
+            spacing: 8
 
-            Layout.topMargin: 10
-            Layout.row: 0
-            Layout.column: 1
-            Layout.columnSpan: 2
-            Layout.preferredHeight: donationText.height
-            Layout.preferredWidth: parent.width - 74
-            Layout.bottomMargin: 5
-            color: JamiTheme.transparentColor
+            Label {
+                Layout.fillWidth: true
+                Layout.preferredHeight: implicitHeight
+                Layout.alignment: Qt.AlignTop
 
-            Text {
-                id: donationText
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                width: parent.width
-                height: contentHeight
                 text: JamiStrings.donationText
                 wrapMode: Text.WordWrap
-
                 font.pointSize: JamiTheme.textFontSize
             }
-        }
-
-        Rectangle {
-            id: notNowRect
-
-            Layout.row: 1
-            Layout.column: 1
-            Layout.preferredHeight: 30
-            Layout.preferredWidth: (parent.width - 55) / 2
 
-            color: JamiTheme.transparentColor
-
-            // When the user clicks on "Not now", we set the donation date to 7 days from now
-            Text {
-                id: notNowText
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
+            RowLayout {
+                spacing: 32
+                Layout.alignment: Qt.AlignBaseline
+                component BannerButton : PushButton {
+                    id: bannerButton
+                    contentItem: Text {
+                        text: bannerButton.text
+                        color: JamiTheme.donationButtonTextColor
+                        font.pointSize: JamiTheme.textFontSize
+                        MouseArea {
+                            cursorShape: Qt.PointingHandCursor
+                            anchors.fill: parent
+                            onClicked: bannerButton.clicked()
+                        }
+                    }
+                    background: null
+                }
+                // Clicking "Not now" sets the donation date to 7 days from now.
+                BannerButton {
+                    text: JamiStrings.notNow
                     onClicked: bumpDonationReminderVisibility()
                 }
-                text: JamiStrings.notNow
-                color: JamiTheme.donationButtonTextColor
-                anchors.top: parent.top
-                anchors.left: parent.left
-                font.pointSize: JamiTheme.textFontSize
-            }
-        }
-
-        Rectangle {
-            id: donateRect
-            Layout.row: 1
-            Layout.column: 2
-            Layout.preferredHeight: 30
-            Layout.preferredWidth: (parent.width - 50) / 2
-            color: JamiTheme.transparentColor
-
-            Text {
-                id: donateText
-                MouseArea {
-                    cursorShape: Qt.PointingHandCursor
-                    anchors.fill: parent
-                    onClicked: {
-                        Qt.openUrlExternally(JamiTheme.donationUrl);
-                    }
+                BannerButton {
+                    text: JamiStrings.donation
+                    onClicked: Qt.openUrlExternally(JamiTheme.donationUrl)
                 }
-                text: JamiStrings.donation
-                font.pointSize: JamiTheme.textFontSize
-                color: JamiTheme.donationButtonTextColor
-                anchors.top: parent.top
-                anchors.left: parent.left
             }
         }
     }

src/app/mainview/components/FilterTabButton.qml

@@ -35,9 +35,9 @@ TabButton {
     property var textColorHovered: JamiTheme.textColorHovered
     property var underlineColor: textColor
     property var underlineColorHovered: textColorHovered
-    property var borderWidth: 2
-    property var bottomMargin: 1
-    property var underlineContentOnly: false
+    property real borderWidth: 2
+    property real bottomMargin: 1
+    property bool underlineContentOnly: false
     property var fontSize: JamiTheme.filterItemFontSize
 
     signal selected

src/app/mainview/components/SidePanel.qml

@@ -182,27 +182,29 @@ SidePanelBase {
             }
         }
 
-        Item {
+        topPadding: 10
+
+        ColumnLayout {
             anchors.fill: parent
+            spacing: 10
 
+            // We use this to update the donation banner visibility, instead of a timer.
             onVisibleChanged: JamiQmlUtils.updateIsDonationBannerVisible()
 
+            // Label/button to create a new swarm.
             RowLayout {
-                id: titleBar
+                id: createSwarmToggle
 
                 visible: swarmMemberSearchList.visible
 
+                width: parent.width
                 height: 40
-                anchors.top: parent.top
-                anchors.topMargin: 10
-                anchors.left: parent.left
-                anchors.leftMargin: 15
-                anchors.right: parent.right
-                anchors.rightMargin: 15
 
-                Label {
-                    id: title
+                Layout.leftMargin: 15
+                Layout.rightMargin: 15
+                Layout.alignment: Qt.AlignTop
 
+                Label {
                     height: parent.height
                     Layout.fillWidth: true
                     Layout.alignment: Qt.AlignVCenter
@@ -222,7 +224,7 @@ SidePanelBase {
                     imagePadding: 8
                     normalColor: JamiTheme.secondaryBackgroundColor
 
-                    preferredSize: titleBar.height
+                    preferredSize: createSwarmToggle.height
 
                     source: JamiResources.round_close_24dp_svg
                     toolTipText: JamiStrings.cancel
@@ -231,16 +233,16 @@ SidePanelBase {
                 }
             }
 
+            // Search conversations, start new conversations, etc.
             RowLayout {
                 id: startBar
 
+                width: parent.width
                 height: 40
-                anchors.top: titleBar.visible ? titleBar.bottom : parent.top
-                anchors.topMargin: 10
-                anchors.left: parent.left
-                anchors.leftMargin: 15
-                anchors.right: parent.right
-                anchors.rightMargin: 15
+
+                Layout.leftMargin: 15
+                Layout.rightMargin: 15
+                Layout.alignment: Qt.AlignTop
 
                 Shortcut {
                     sequence: "Ctrl+F"
@@ -253,7 +255,7 @@ SidePanelBase {
                 Searchbar {
                     id: contactSearchBar
 
-                    Layout.fillHeight: true
+                    height: parent.height
                     Layout.fillWidth: true
 
                     onSearchBarTextChanged: function (text) {
@@ -295,12 +297,18 @@ SidePanelBase {
             SidePanelTabBar {
                 id: sidePanelTabBar
 
-                visible: ConversationsAdapter.pendingRequestCount && !contactSearchBar.textContent && smartListLayout.visible
-                anchors.top: startBar.bottom
-                anchors.topMargin: visible ? 10 : 0
+                visible: ConversationsAdapter.pendingRequestCount &&
+                         !contactSearchBar.textContent &&
+                         smartListLayout.visible
+
+                contentHeight: childrenRect.height
                 width: page.width
-                height: visible ? 42 : 0
-                contentHeight: visible ? 42 : 0
+                Layout.preferredHeight: 42
+
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop
+
+                Layout.bottomMargin: -10
             }
 
             Rectangle {
@@ -308,10 +316,11 @@ SidePanelBase {
 
                 visible: searchStatusText.text !== "" && smartListLayout.visible
 
-                anchors.top: sidePanelTabBar.bottom
-                anchors.topMargin: visible ? 10 : 0
                 width: parent.width
-                height: visible ? 42 : 0
+                height: 42
+
+                Layout.bottomMargin: -10
+                Layout.alignment: Qt.AlignTop
 
                 color: JamiTheme.backgroundColor
                 Text {
@@ -329,12 +338,11 @@ SidePanelBase {
             }
 
             DonationBanner {
-                id: donationBanner
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.leftMargin: 15
-                anchors.rightMargin: 15
-                anchors.top: sidePanelTabBar.bottom
-                anchors.topMargin: 10
+                Layout.fillWidth: true
+                Layout.leftMargin: 15
+                Layout.rightMargin: 15
+                Layout.topMargin: 10
+
                 visible: JamiQmlUtils.isDonationBannerVisible
             }
 
@@ -342,9 +350,7 @@ SidePanelBase {
                 id: smartListLayout
 
                 width: parent.width
-                anchors.top: donationBanner.visible ? donationBanner.bottom : searchStatusRect.bottom
-                anchors.topMargin: !donationBanner.visible && (sidePanelTabBar.visible || searchStatusRect.visible) ? 0 : 12
-                anchors.bottom: parent.bottom
+                Layout.fillHeight: true
 
                 spacing: 4
 
@@ -360,6 +366,7 @@ SidePanelBase {
                     Layout.alignment: Qt.AlignTop
                     Layout.fillWidth: true
                     Layout.preferredHeight: visible ? contentHeight : 0
+
                     Layout.maximumHeight: {
                         var otherContentHeight = conversationListView.contentHeight + 16;
                         if (conversationListView.visible)
@@ -373,20 +380,18 @@ SidePanelBase {
 
                     model: SearchResultsListModel
                     headerLabel: JamiStrings.searchResults
-                    headerVisible: visible
+                    headerVisible: true
                 }
 
                 ConversationListView {
                     id: conversationListView
 
-                    visible: count
-
-                    Layout.preferredWidth: parent.width
+                    Layout.fillWidth: true
                     Layout.fillHeight: true
 
                     model: ConversationListModel
                     headerLabel: JamiStrings.conversations
-                    headerVisible: searchResultsListView.visible
+                    headerVisible: count && searchResultsListView.visible
                 }
             }
 
@@ -396,9 +401,7 @@ SidePanelBase {
                 visible: inNewSwarm
 
                 width: parent.width
-                anchors.top: donationBanner.visible ? donationBanner.bottom : sidePanelTabBar.bottom
-                anchors.topMargin: (sidePanelTabBar.visible || searchStatusRect.visible) ? 0 : 12
-                anchors.bottom: parent.bottom
+                Layout.fillHeight: true
 
                 spacing: 4
 

src/app/settingsview/components/SettingsPageBase.qml

@@ -27,7 +27,6 @@ JamiSplitView {
     id: root
     required property Item flickableContent
     property real contentFlickableWidth: Math.min(JamiTheme.maximumWidthSettingsView, settingsPage.width - 2 * JamiTheme.preferredSettingsMarginSize)
-    property real tableWidth: Math.min(JamiTheme.maximumWidthSettingsView * 2, settingsPage.width - 2 * JamiTheme.preferredSettingsMarginSize)
     property alias title: settingsPage.title
     property color backgroundColor: JamiTheme.secondaryBackgroundColor
     property alias pageContainer: settingsPage

src/app/settingsview/components/TroubleshootSettingsPage.qml

@@ -97,13 +97,7 @@ SettingsPageBase {
         Rectangle {
             id: connectionMonitoringTable
             height: listview.childrenRect.height + 60
-            width: {
-                if (tableWidth > 477) {
-                    return tableWidth;
-                } else {
-                    return 477;
-                }
-            }
+            width: Math.min(JamiTheme.maximumWidthSettingsView * 2, pageContainer.width - 2 * JamiTheme.preferredSettingsMarginSize)
             color: JamiTheme.transparentColor
 
             ConnectionMonitoringTable {

src/app/utilsadapter.cpp

@@ -96,7 +96,7 @@ UtilsAdapter::setAppValue(const Settings::Key key, const QVariant& value)
     else if (key == Settings::Key::IsDonationVisible
              || key == Settings::Key::Donation2023VisibleDate
              || key == Settings::Key::Donation2023EndDate)
-        Q_EMIT donationCampaignSettingChanged();
+        Q_EMIT donationCampaignSettingsChanged();
 }
 
 QVariant

src/app/utilsadapter.h

@@ -67,7 +67,6 @@ class UtilsAdapter final : public QmlAdapterBase
     Q_OBJECT
     QML_PROPERTY(QStringList, logList)
     QML_RO_PROPERTY(bool, isRTL)
-
 public:
     explicit UtilsAdapter(AppSettingsManager* settingsManager,
                           SystemTray* systemTray,
@@ -171,7 +170,7 @@ Q_SIGNALS:
     void appThemeChanged();
     void showExperimentalCallSwarm();
     void changeLanguage();
-    void donationCampaignSettingChanged();
+    void donationCampaignSettingsChanged();
 
 private:
     QClipboard* clipboard_;