Improve SidePane auto-sizing and appearance

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

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

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

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

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
 }

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

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

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

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

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

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:
+            spacing: collapsed ? 0 : normalSpacing
-                sidePane.width <= (sidePane.Layout.minimumWidth + spacing) ?
+            topMargin: spacing
-                0 : 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
+        }
+    }
 }

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 {