Somewhat reenable the adaptive layout

resources/qml/ChatPage.qml

@@ -5,6 +5,7 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.3
+import "components"
 import im.nheko 1.0
 
 Rectangle {
@@ -12,34 +13,48 @@ Rectangle {
 
     color: Nheko.colors.window
 
-    SplitView {
+    AdaptiveLayout {
         anchors.fill: parent
+        singlePageMode: width < communityListC.maximumWidth + roomListC.maximumWidth + timlineViewC.minimumWidth
+
+        AdaptiveLayoutElement {
+            id: communityListC
+
+            minimumWidth: Nheko.avatarSize * 2 + Nheko.paddingSmall * 2
+            collapsedWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
+            preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
+            maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
 
             Rectangle {
-            SplitView.minimumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
-            SplitView.preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
-            SplitView.maximumWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
                 color: Nheko.theme.sidebarBackground
             }
 
-        RoomList {
-            //SplitView.maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
-
-            SplitView.minimumWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
-            SplitView.preferredWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
         }
 
+        AdaptiveLayoutElement {
+            id: roomListC
+
+            minimumWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
+            preferredWidth: Nheko.avatarSize * 5 + Nheko.paddingSmall * 2
+            maximumWidth: Nheko.avatarSize * 10 + Nheko.paddingSmall * 2
+            collapsedWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
+
+            RoomList {
+            }
+
+        }
+
+        AdaptiveLayoutElement {
+            id: timlineViewC
+
+            minimumWidth: 400
+
             TimelineView {
                 id: timeline
 
                 room: Rooms.currentRoom
-            SplitView.fillWidth: true
-            SplitView.minimumWidth: 400
             }
 
-        handle: Rectangle {
-            implicitWidth: 2
-            color: SplitHandle.pressed ? Nheko.colors.highlight : (SplitHandle.hovered ? Nheko.colors.light : Nheko.theme.separator)
         }
 
     }

resources/qml/RoomList.qml

@@ -11,6 +11,9 @@ import QtQuick.Layouts 1.3
 import im.nheko 1.0
 
 Page {
+    //leftPadding: Nheko.paddingSmall
+    //rightPadding: Nheko.paddingSmall
+
     ListView {
         id: roomlist
 
@@ -145,6 +148,7 @@ Page {
             ]
 
             TapHandler {
+                margin: -2
                 acceptedButtons: Qt.RightButton
                 onSingleTapped: {
                     if (!TimelineManager.isInvite)
@@ -155,6 +159,7 @@ Page {
             }
 
             TapHandler {
+                margin: -2
                 onSingleTapped: Rooms.setCurrentRoom(model.roomId)
                 onLongPressed: {
                     if (!TimelineManager.isInvite)
@@ -164,6 +169,7 @@ Page {
             }
 
             HoverHandler {
+                margin: -2
                 id: hovered
             }
 
@@ -390,6 +396,7 @@ Page {
             }
 
             TapHandler {
+                margin: -2
                 acceptedButtons: Qt.LeftButton
                 onSingleTapped: userInfoPanel.openUserProfile()
                 onLongPressed: userInfoMenu.open()
@@ -397,6 +404,7 @@ Page {
             }
 
             TapHandler {
+                margin: -2
                 acceptedButtons: Qt.RightButton
                 onSingleTapped: userInfoMenu.open()
                 gesturePolicy: TapHandler.ReleaseWithinBounds

resources/qml/components/AdaptiveLayout.qml

@@ -0,0 +1,130 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import im.nheko 1.0
+
+Container {
+    //Component.onCompleted: {
+    //    parent.width = Qt.binding(function() { return calculatedWidth; })
+    //}
+
+    id: container
+
+    property bool singlePageMode: width < 800
+    property int splitterGrabMargin: Nheko.paddingSmall
+    property int pageIndex: 0
+    property Component handle
+
+    handle: Rectangle {
+        z: 3
+        color: Nheko.theme.separator
+        height: container.height
+        width: visible ? 1 : 0
+        anchors.right: parent.right
+    }
+
+    property Component handleToucharea
+
+    handleToucharea: Item {
+        id: splitter
+
+        property int minimumWidth: parent.minimumWidth
+        property int maximumWidth: parent.maximumWidth
+        property int collapsedWidth: parent.collapsedWidth
+        property bool collapsible: parent.collapsible
+        property int calculatedWidth: {
+            if (!visible)
+                return 0;
+            else if (container.singlePageMode)
+                return container.width;
+            else
+                return (collapsible && x < minimumWidth) ? collapsedWidth : x;
+        }
+
+        //visible: !container.singlePageMode
+        enabled: !container.singlePageMode
+        height: container.height
+        width: 1
+        x: parent.preferredWidth
+        z: 3
+
+        DragHandler {
+            id: dragHandler
+
+            enabled: !container.singlePageMode
+            xAxis.enabled: true
+            yAxis.enabled: false
+            xAxis.minimum: splitter.minimumWidth - 1
+            xAxis.maximum: splitter.maximumWidth
+            margin: container.splitterGrabMargin
+            dragThreshold: 0
+            grabPermissions: PointerHandler.CanTakeOverFromAnything | PointerHandler.ApprovesTakeOverByHandlersOfSameType
+            cursorShape: Qt.SizeHorCursor
+            onActiveChanged: {
+                if (!active)
+                    splitter.parent.preferredWidth = splitter.x;
+
+            }
+        }
+
+        HoverHandler {
+            enabled: !container.singlePageMode
+            margin: container.splitterGrabMargin
+            cursorShape: Qt.SizeHorCursor
+        }
+
+    }
+
+    anchors.fill: parent
+    Component.onCompleted: {
+        for (var i = 0; i < count - 1; i++) {
+            let handle_ = handle.createObject(contentChildren[i]);
+            let split_ = handleToucharea.createObject(contentChildren[i]);
+            contentChildren[i].width = Qt.binding(function() {
+                return split_.calculatedWidth;
+            });
+            contentChildren[i].splitterWidth = Qt.binding(function() {
+                return handle_.width;
+            });
+        }
+        contentChildren[count - 1].width = Qt.binding(function() {
+            if (container.singlePageMode) {
+                return container.width;
+            } else {
+                var w = container.width;
+                for (var i = 0; i < count - 1; i++) {
+                    if (contentChildren[i].width)
+                        w = w - contentChildren[i].width;
+
+                }
+                return w;
+            }
+        });
+        contentChildren[count - 1].splitterWidth = 0;
+        for (var i = 0; i < count; i++) {
+            contentChildren[i].height = Qt.binding(function() {
+                return container.height;
+            });
+            contentChildren[i].children[0].height = Qt.binding(function() {
+                return container.height;
+            });
+        }
+    }
+
+    contentItem: ListView {
+        id: view
+
+        model: container.contentModel
+        snapMode: ListView.SnapOneItem
+        orientation: ListView.Horizontal
+        highlightRangeMode: ListView.StrictlyEnforceRange
+        interactive: false
+        highlightMoveDuration: container.singlePageMode ? 200 : 0
+        currentIndex: container.singlePageMode ? container.pageIndex : 0
+    }
+
+}

resources/qml/components/AdaptiveLayoutElement.qml

@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Item {
+    property int minimumWidth: 100
+    property int maximumWidth: 400
+    property int collapsedWidth: 40
+    property bool collapsible: true
+    property bool collapsed: width < minimumWidth
+    property int splitterWidth: 1
+    property int preferredWidth: 100
+
+    Component.onCompleted: {
+        children[0].width = Qt.binding(() => {
+            return parent.singlePageMode ? parent.width : width - splitterWidth;
+        });
+        children[0].height = Qt.binding(() => {
+            return parent.height;
+        });
+    }
+}

resources/res.qrc

@@ -178,6 +178,8 @@
         <file>qml/voip/PlaceCall.qml</file>
         <file>qml/voip/ScreenShare.qml</file>
         <file>qml/voip/VideoCall.qml</file>
+        <file>qml/components/AdaptiveLayout.qml</file>
+        <file>qml/components/AdaptiveLayoutElement.qml</file>
     </qresource>
     <qresource prefix="/media">
         <file>media/ring.ogg</file>