From 39388e204ede5d8b8a570c12258207901d12abfb Mon Sep 17 00:00:00 2001 From: James Graham Date: Tue, 28 Feb 2023 19:30:20 +0000 Subject: [PATCH] Roomlist Drag Improvements - Move the room list drag handler and logic to RoomList.qml. - Make the compact mode logic not rely on a saved width value from Config as this was causing the room list to have large icons the first launch after a recent update. - Instead save the compact mode state and initialise the width based upon that. --- src/neochatconfig.kcfg | 7 +-- src/qml/Page/RoomListPage.qml | 85 ++++++++++++++++++++++++++++++----- src/qml/main.qml | 66 +-------------------------- 3 files changed, 80 insertions(+), 78 deletions(-) diff --git a/src/neochatconfig.kcfg b/src/neochatconfig.kcfg index 09efb4049..e8ddf477f 100644 --- a/src/neochatconfig.kcfg +++ b/src/neochatconfig.kcfg @@ -41,9 +41,6 @@ true - - -1 - -1 @@ -108,6 +105,10 @@ true + + + false + diff --git a/src/qml/Page/RoomListPage.qml b/src/qml/Page/RoomListPage.qml index 1dcd4196d..4b5484a7c 100644 --- a/src/qml/Page/RoomListPage.qml +++ b/src/qml/Page/RoomListPage.qml @@ -15,8 +15,21 @@ import org.kde.neochat 1.0 Kirigami.ScrollablePage { id: page + /** + * @brief The current width of the room list. + * + * @note Other objects can access the value but the private function makes sure + * that only the internal members can modify it. + */ + readonly property int currentWidth: _private.currentWidth + + readonly property bool collapsed: Config.collapsed + onCollapsedChanged: if (collapsed) { + sortFilterRoomListModel.filterText = ""; + } + header: ColumnLayout { - visible: !page.collapsedMode + visible: !page.collapsed spacing: 0 ListView { @@ -116,11 +129,6 @@ Kirigami.ScrollablePage { } property var enteredRoom - property bool collapsedMode: Config.roomListPageWidth < applicationWindow().minPageWidth && applicationWindow().shouldUseSidebars - - onCollapsedModeChanged: if (collapsedMode) { - sortFilterRoomListModel.filterText = ""; - } Connections { target: RoomManager @@ -170,7 +178,7 @@ Kirigami.ScrollablePage { titleDelegate: ExploreComponent { Layout.fillWidth: true desiredWidth: page.width - Kirigami.Units.largeSpacing - collapsed: collapsedMode + collapsed: page.collapsed } ListView { @@ -180,7 +188,7 @@ Kirigami.ScrollablePage { clip: AccountRegistry.count > 1 header: QQC2.ItemDelegate { - visible: page.collapsedMode + visible: page.collapsed action: Kirigami.Action { id: enterRoomAction onTriggered: quickView.item.open(); @@ -243,7 +251,7 @@ Kirigami.ScrollablePage { } section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null - section.delegate: page.collapsedMode ? foldButton : sectionHeader + section.delegate: page.collapsed ? foldButton : sectionHeader Component { id: sectionHeader @@ -287,7 +295,7 @@ Kirigami.ScrollablePage { reuseItems: true currentIndex: -1 // we don't want any room highlighted by default - delegate: page.collapsedMode ? collapsedModeListComponent : normalModeListComponent + delegate: page.collapsed ? collapsedModeListComponent : normalModeListComponent Component { id: collapsedModeListComponent @@ -437,6 +445,61 @@ Kirigami.ScrollablePage { footer: UserInfo { width: parent.width - visible: !page.collapsedMode + visible: !page.collapsed + } + + MouseArea { + anchors.top: parent.top + anchors.bottom: parent.bottom + parent: applicationWindow().overlay.parent + + x: page.currentWidth - width / 2 + width: Kirigami.Units.smallSpacing * 2 + z: page.z + 1 + enabled: RoomManager.hasOpenRoom && applicationWindow().width >= Kirigami.Units.gridUnit * 35 + visible: enabled + cursorShape: Qt.SplitHCursor + + property int _lastX + + onPressed: mouse => { + _lastX = mouse.x; + } + onPositionChanged: mouse => { + if (_lastX == -1) { + return; + } + if (mouse.x > _lastX) { + // we moved to the right + if (_private.currentWidth < _private.collapseWidth && _private.currentWidth + (mouse.x - _lastX) >= _private.collapseWidth) { + // Here we get back directly to a more wide mode. + _private.currentWidth = _private.collapseWidth; + Config.collapsed = false; + } else if (_private.currentWidth >= _private.collapseWidth) { + // Increase page width + _private.currentWidth = Math.min(_private.defaultWidth, _private.currentWidth + (mouse.x - _lastX)); + } + } else if (mouse.x < _lastX) { + const tmpWidth = _private.currentWidth - (_lastX - mouse.x); + if (tmpWidth < _private.collapseWidth) { + _private.currentWidth = Qt.binding(() => _private.collapsedSize + (page.contentItem.QQC2.ScrollBar.vertical.visible ? page.contentItem.QQC2.ScrollBar.vertical.width : 0)); + Config.collapsed = true; + } else { + _private.currentWidth = tmpWidth; + } + } + } + } + + /* + * Hold the modifiable currentWidth in a private object so that only internal + * members can modify it. + */ + QtObject { + id: _private + property int currentWidth: Config.collapsed ? collapsedSize : defaultWidth + readonly property int defaultWidth: Kirigami.Units.gridUnit * 17 + readonly property int collapseWidth: Kirigami.Units.gridUnit * 10 + readonly property int collapsedSize: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3 } } diff --git a/src/qml/main.qml b/src/qml/main.qml index e740e0952..2973d12db 100644 --- a/src/qml/main.qml +++ b/src/qml/main.qml @@ -15,7 +15,7 @@ Kirigami.ApplicationWindow { property int columnWidth: Kirigami.Units.gridUnit * 13 - minimumWidth: Kirigami.Units.gridUnit * 15 + minimumWidth: Kirigami.Units.gridUnit * 20 minimumHeight: Kirigami.Units.gridUnit * 15 visible: false // Will be overridden in Component.onCompleted @@ -163,71 +163,9 @@ Kirigami.ApplicationWindow { handleVisible: enabled } - 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 + (roomListPage.contentItem.QQC2.ScrollBar.vertical.visible ? roomListPage.contentItem.QQC2.ScrollBar.vertical.width : 0) - readonly property bool shouldUseSidebars: RoomManager.hasOpenRoom && (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.defaultColumnWidth: roomListPage ? roomListPage.currentWidth : 0 pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar pageStack.globalToolBar.showNavigationButtons: pageStack.currentIndex > 0 ? Kirigami.ApplicationHeaderStyle.ShowBackButton : 0 - 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: 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; - } - } - } - } ConfirmLogoutDialog { id: confirmLogoutDialog