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.
This commit is contained in:
James Graham
2023-02-28 19:30:20 +00:00
parent 6ccb201110
commit 39388e204e
3 changed files with 80 additions and 78 deletions

View File

@@ -41,9 +41,6 @@
<label>"Show your messages on the right</label>
<default>true</default>
</entry>
<entry name="RoomListPageWidth" type="int">
<default>-1</default>
</entry>
<entry name="RoomDrawerWidth" type="int">
<default>-1</default>
</entry>
@@ -108,6 +105,10 @@
<label>Show avatar in the room drawer</label>
<default>true</default>
</entry>
<entry name="Collapsed" type="bool">
<label>Save the collapsed state of the room list</label>
<default>false</default>
</entry>
</group>
<group name="NetworkProxy">
<entry name="ProxyType" type="Enum">

View File

@@ -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
}
}

View File

@@ -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