Make sidebar collapsible

2021-06-14 12:50:09 +00:00
parent 5c6a540807
commit a086964769
5 changed files with 260 additions and 78 deletions
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -166,7 +166,70 @@ Kirigami.ApplicationWindow {
        handleVisible: enabled && pageStack.layers.depth < 2 && pageStack.depth < 3
    }

-    pageStack.columnView.columnWidth: Kirigami.Units.gridUnit * 17
+    readonly property int defaultPageWidth: Kirigami.Units.gridUnit * 17
+    readonly property int minPageWidth: Kirigami.Units.gridUnit * 10
+    readonly property int collapsedPageWidth: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3
+    readonly property bool shouldUseSidebars: (Config.roomListPageWidth > minPageWidth ? root.width >= Kirigami.Units.gridUnit * 35 : root.width > Kirigami.Units.gridUnit * 27) && roomListLoaded
+    readonly property int pageWidth: {
+        if (Config.roomListPageWidth === -1) {
+            return defaultPageWidth;
+        } else if (Config.roomListPageWidth < minPageWidth) {
+            return collapsedPageWidth;
+        } else {
+            return Config.roomListPageWidth;
+        }
+    }
+
+    pageStack.defaultColumnWidth: pageWidth
+    pageStack.columnView.columnResizeMode: shouldUseSidebars ? Kirigami.ColumnView.FixedColumns : Kirigami.ColumnView.SingleColumn
+
+    MouseArea {
+        visible: root.pageStack.wideMode
+        z: 500
+
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        x: root.pageStack.defaultColumnWidth - (width / 2)
+        width: Kirigami.Units.devicePixelRatio * 2
+
+        property int _lastX: -1
+        enabled: !Kirigami.Settings.isMobile
+
+        cursorShape: !Kirigami.Settings.isMobile ? Qt.SplitHCursor : undefined
+
+        onPressed: _lastX = mouseX
+        onReleased: Config.save();
+
+        onPositionChanged: {
+            if (_lastX == -1) {
+                return;
+            }
+
+            if (mouse.x > _lastX) {
+                // we moved to the right
+                if (Config.roomListPageWidth === root.collapsedPageWidth && root.pageWidth + (mouse.x - _lastX) >= root.minPageWidth) {
+                    // Here we get back directly to a more wide mode.
+                    Config.roomListPageWidth = root.minPageWidth;
+                    if (root.width < Kirigami.Units.gridUnit * 35) {
+                        root.width = Kirigami.Units.gridUnit * 35;
+                    }
+                } else if (Config.roomListPageWidth !== root.collapsedPageWidth) {
+                    // Increase page width
+                    Config.roomListPageWidth = Math.min(root.defaultPageWidth, root.pageWidth + (mouse.x - _lastX));
+                }
+            } else if (mouse.x < _lastX) {
+                const tmpWidth = root.pageWidth - (_lastX - mouse.x);
+
+                if (tmpWidth < root.minPageWidth) {
+                    Config.roomListPageWidth = root.collapsedPageWidth;
+                } else {
+                    Config.roomListPageWidth = tmpWidth;
+                }
+            }
+        }
+    }
+

    globalDrawer: Kirigami.GlobalDrawer {
        property bool hasLayer