From f9a5902545f9629d6a89dd382b4b25d282325860 Mon Sep 17 00:00:00 2001 From: miruka Date: Sun, 12 May 2019 15:57:18 -0400 Subject: [PATCH] Improve SidePane auto-sizing and appearance --- TODO.md | 2 -- harmonyqml/components/Base/HAvatar.qml | 2 +- harmonyqml/components/Base/HInterfaceBox.qml | 2 +- harmonyqml/components/Base/HSplitView.qml | 19 +++++++++++++++- harmonyqml/components/Base/HStyle.qml | 3 +++ harmonyqml/components/Chat/Banners/Banner.qml | 2 +- harmonyqml/components/Chat/Chat.qml | 4 ++-- harmonyqml/components/Chat/SendBox.qml | 2 +- .../components/SidePane/AccountList.qml | 4 ---- .../components/SidePane/PaneToolBar.qml | 4 ++-- harmonyqml/components/SidePane/SidePane.qml | 22 ++++++++++++++++--- harmonyqml/components/UI.qml | 19 +++++++++++----- 12 files changed, 62 insertions(+), 23 deletions(-) diff --git a/TODO.md b/TODO.md index c3f9ad6f..5da975e1 100644 --- a/TODO.md +++ b/TODO.md @@ -4,7 +4,6 @@ - Bug fixes - dataclass-like `default_factory` for ListItem - - Dragging SidePane to max size makes messages disappear - Local echo messages all have the same time - Prevent briefly seeing login screen if there are accounts to resumeSession for but they take time to appear @@ -15,7 +14,6 @@ - UI - "the tree arrows could be smaller" - - Improve SidePane appearance when at min width - Accounts delegates background - Server selection - Register/Forgot? for SignIn dialog diff --git a/harmonyqml/components/Base/HAvatar.qml b/harmonyqml/components/Base/HAvatar.qml index d4537786..01480627 100644 --- a/harmonyqml/components/Base/HAvatar.qml +++ b/harmonyqml/components/Base/HAvatar.qml @@ -4,7 +4,7 @@ import "../Base" Rectangle { property var name: null property var imageUrl: null - property int dimension: 36 + property int dimension: HStyle.avatar.size property bool hidden: false width: dimension diff --git a/harmonyqml/components/Base/HInterfaceBox.qml b/harmonyqml/components/Base/HInterfaceBox.qml index b76966f6..b282c65d 100644 --- a/harmonyqml/components/Base/HInterfaceBox.qml +++ b/harmonyqml/components/Base/HInterfaceBox.qml @@ -52,7 +52,7 @@ HScalingBox { onClicked: buttonCallbacks[modelData.name](button) Layout.fillWidth: true - Layout.preferredHeight: 32 + Layout.preferredHeight: HStyle.avatar.size } } } diff --git a/harmonyqml/components/Base/HSplitView.qml b/harmonyqml/components/Base/HSplitView.qml index 8ed5541d..aad71aed 100644 --- a/harmonyqml/components/Base/HSplitView.qml +++ b/harmonyqml/components/Base/HSplitView.qml @@ -3,5 +3,22 @@ import QtQuick.Controls 1.4 as Controls1 //https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html Controls1.SplitView { - handleDelegate: Item {} + id: splitView + + property bool anyHovered: false + property bool anyPressed: false + property bool anyResizing: false + + property bool canAutoSize: true + onAnyPressedChanged: canAutoSize = false + + handleDelegate: Item { + readonly property bool hovered: styleData.hovered + readonly property bool pressed: styleData.pressed + readonly property bool resizing: styleData.resizing + + onHoveredChanged: splitView.anyHovered = hovered + onPressedChanged: splitView.anyPressed = pressed + onResizingChanged: splitView.anyResizing = resizing + } } diff --git a/harmonyqml/components/Base/HStyle.qml b/harmonyqml/components/Base/HStyle.qml index 3eba3a25..5439fa3c 100644 --- a/harmonyqml/components/Base/HStyle.qml +++ b/harmonyqml/components/Base/HStyle.qml @@ -115,6 +115,7 @@ QtObject { } readonly property QtObject avatar: QtObject { + property int size: 36 property int radius: style.radius property color letter: "white" @@ -130,4 +131,6 @@ QtObject { property real saturation: 0.32 property real lightness: 0.3 } + + property int bottomElementsHeight: 32 } diff --git a/harmonyqml/components/Chat/Banners/Banner.qml b/harmonyqml/components/Chat/Banners/Banner.qml index b9d54287..0c087770 100644 --- a/harmonyqml/components/Chat/Banners/Banner.qml +++ b/harmonyqml/components/Chat/Banners/Banner.qml @@ -5,7 +5,7 @@ import "../../Base" HRectangle { id: banner Layout.fillWidth: true - Layout.preferredHeight: 32 + Layout.preferredHeight: HStyle.avatar.size property alias avatar: bannerAvatar property alias icon: bannerIcon diff --git a/harmonyqml/components/Chat/Chat.qml b/harmonyqml/components/Chat/Chat.qml index da12c594..c30b660c 100644 --- a/harmonyqml/components/Chat/Chat.qml +++ b/harmonyqml/components/Chat/Chat.qml @@ -38,7 +38,7 @@ HColumnLayout { topic: roomInfo.topic || "" Layout.fillWidth: true - Layout.preferredHeight: 32 + Layout.preferredHeight: HStyle.avatar.size } @@ -82,7 +82,7 @@ HColumnLayout { property int referenceWidth: roomHeader.buttonsWidth onReferenceWidthChanged: width = referenceWidth - Layout.minimumWidth: 36 + Layout.minimumWidth: HStyle.avatar.size Layout.maximumWidth: parent.width } } diff --git a/harmonyqml/components/Chat/SendBox.qml b/harmonyqml/components/Chat/SendBox.qml index 2ca93dce..61b8f06d 100644 --- a/harmonyqml/components/Chat/SendBox.qml +++ b/harmonyqml/components/Chat/SendBox.qml @@ -7,7 +7,7 @@ HRectangle { id: root Layout.fillWidth: true - Layout.minimumHeight: 32 + Layout.minimumHeight: HStyle.bottomElementsHeight Layout.preferredHeight: textArea.implicitHeight // parent.height / 2 causes binding loop? Layout.maximumHeight: pageStack.height / 2 diff --git a/harmonyqml/components/SidePane/AccountList.qml b/harmonyqml/components/SidePane/AccountList.qml index 1a74def1..e4c3d0c9 100644 --- a/harmonyqml/components/SidePane/AccountList.qml +++ b/harmonyqml/components/SidePane/AccountList.qml @@ -5,10 +5,6 @@ ListView { id: accountList clip: true - spacing: 8 - topMargin: spacing - bottomMargin: topMargin - model: Backend.accounts delegate: AccountDelegate {} } diff --git a/harmonyqml/components/SidePane/PaneToolBar.qml b/harmonyqml/components/SidePane/PaneToolBar.qml index 4fa66c06..4cecb7f5 100644 --- a/harmonyqml/components/SidePane/PaneToolBar.qml +++ b/harmonyqml/components/SidePane/PaneToolBar.qml @@ -5,7 +5,7 @@ HRowLayout { id: toolBar Layout.fillWidth: true - Layout.preferredHeight: 32 + Layout.preferredHeight: HStyle.bottomElementsHeight HButton { iconName: "settings" @@ -20,6 +20,6 @@ HRowLayout { onTextChanged: Backend.setRoomFilter(text) Layout.fillWidth: true - Layout.preferredHeight: 32 + Layout.preferredHeight: parent.height } } diff --git a/harmonyqml/components/SidePane/SidePane.qml b/harmonyqml/components/SidePane/SidePane.qml index 221a3d31..fa882eed 100644 --- a/harmonyqml/components/SidePane/SidePane.qml +++ b/harmonyqml/components/SidePane/SidePane.qml @@ -1,9 +1,13 @@ +import QtQuick 2.7 import QtQuick.Layouts 1.3 import "../Base" HRectangle { id: sidePane + property int normalSpacing: 8 + property bool collapsed: false + HColumnLayout { anchors.fill: parent @@ -11,11 +15,23 @@ HRectangle { Layout.fillWidth: true Layout.fillHeight: true - Layout.leftMargin: - sidePane.width <= (sidePane.Layout.minimumWidth + spacing) ? - 0 : spacing + spacing: collapsed ? 0 : normalSpacing + topMargin: spacing + bottomMargin: spacing + Layout.leftMargin: spacing + + Behavior on spacing { + NumberAnimation { duration: 150 } + } } PaneToolBar {} } + + Behavior on width { + NumberAnimation { + // Don't slow down the user manually resizing + duration: uiSplitView.canAutoSize ? 150 : 0 + } + } } diff --git a/harmonyqml/components/UI.qml b/harmonyqml/components/UI.qml index 13937af8..246a2217 100644 --- a/harmonyqml/components/UI.qml +++ b/harmonyqml/components/UI.qml @@ -20,15 +20,24 @@ Item { property bool accountsLoggedIn: Backend.clients.count > 0 HSplitView { + id: uiSplitView anchors.fill: parent SidePane { - property int parentWidth: parent.width - onParentWidthChanged: width = Math.min(parent.width * 0.3, 300) - - Layout.minimumWidth: 36 - Layout.maximumWidth: parent.width visible: accountsLoggedIn + collapsed: width < Layout.minimumWidth + normalSpacing + + function set_width() { + width = parent.width * 0.3 < 120 ? + Layout.minimumWidth : Math.min(parent.width * 0.3, 300) + } + + property int parentWidth: parent.width + onParentWidthChanged: if (uiSplitView.canAutoSize) { set_width() } + + width: set_width() // Initial width + Layout.minimumWidth: HStyle.avatar.size + Layout.maximumWidth: parent.width } StackView {