Sidebar size fixes

TODO.md

@@ -1,3 +1,7 @@
+- Resizing pane sets the autoWidthRatio
+- Show sidepane when hovering on the left when collapsed/reduced
+- Header back button
+- Standardize "wide: width > 414..."
 - Way to round avatar corners to allow box radius
 - Devices and client settings in edit account page
 - If avatar is set, name color from average color?
@@ -11,7 +15,7 @@
 - Improve avatar tooltips position, add stuff to room tooltips (last msg?)
 - Accept drag and dropping a picture in account settings to set avatar
 - When all the events loaded on beginning in a room are name/avatar changes,
-  no last event room text is displayed
+  no last event room text is displayed (use sync filter?)
 -  `QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling)` ?
 
 - Qt 5.12

src/qml/Base/HPage.qml

@@ -9,6 +9,8 @@ import "../SidePane"
 SwipeView {
     default property alias columnChildren: contentColumn.children
     property alias page: innerPage
+    property alias header: innerPage.header
+    property alias footer: innerPage.header
     property alias flickable: innerFlickable
 
     property alias headerLabel: innerHeaderLabel
@@ -27,8 +29,11 @@ SwipeView {
     SidePane {
         canAutoSize: false
         autoWidthRatio: 1.0
+        collapse: false
+        reduce: false
+        currentSpacing: theme.spacing
         visible: swipeView.interactive
-        onVisibleChanged: swipeView.setCurrentIndex(1)
+        onVisibleChanged: if (currentIndex != 1) swipeView.setCurrentIndex(1)
     }
 
     Page {
@@ -36,8 +41,7 @@ SwipeView {
         background: null
 
         header: HRectangle {
-            width: parent.width
-            implicitWidth: parent.width
+            implicitWidth: parent ? parent.width : 0
             color: theme.pageHeadersBackground
 
             height: ! hideHeaderUnderHeight ||
@@ -55,9 +59,6 @@ SwipeView {
 
                 HLabel {
                     id: innerHeaderLabel
-                    text: qsTr("Account settings for %1").arg(
-                        Utils.coloredNameHtml(userInfo.displayName, userId)
-                    )
                     textFormat: Text.StyledText
                     font.pixelSize: theme.fontSize.big
                     elide: Text.ElideRight

src/qml/Chat/Chat.qml

@@ -8,7 +8,10 @@ import "Banners"
 import "Timeline"
 import "RoomSidePane"
 
-HColumnLayout {
+HPage {
+    id: chatPage
+    onFocusChanged: sendBox.setFocus()
+
     property var roomInfo: null
     onRoomInfoChanged: if (! roomInfo) { pageStack.showPage("Default") }
 
@@ -22,18 +25,15 @@ HColumnLayout {
          //category == "Rooms" ?
          //Backend.clients.get(userId).roomHasUnknownDevices(roomId) : false
 
-    id: chatPage
-    onFocusChanged: sendBox.setFocus()
-
-    RoomHeader {
+    header: RoomHeader {
         id: roomHeader
+        width: parent.width
         displayName: roomInfo.displayName
         topic: roomInfo.topic
-
-        Layout.fillWidth: true
-        Layout.preferredHeight: theme.avatar.size
     }
 
+    page.leftPadding: 0
+    page.rightPadding: 0
 
     HSplitView {
         id: chatSplitView

src/qml/Chat/RoomHeader.qml

@@ -17,6 +17,7 @@ HRectangle {
 
     id: roomHeader
     color: theme.chat.roomHeader.background
+    implicitHeight: theme.baseElementsHeight
 
     HRowLayout {
         id: row

src/qml/SidePane/SidePane.qml

@@ -8,7 +8,8 @@ import "../Base"
 HRectangle {
     id: sidePane
     clip: true  // Avoid artifacts when collapsed
-    visible: mainUI.accountsPresent && width > 0
+    // opacity: mainUI.accountsPresent && ! reduce ? 1 : 0
+    // visible: opacity > 0
 
 
     property bool canAutoSize: true
@@ -27,7 +28,7 @@ HRectangle {
     property bool collapse:
         canAutoSize ?
         autoWidth < theme.sidePane.autoCollapseBelowWidth :
-        width < theme.sidePane.autoCollapseBelowWidth
+        width <= theme.sidePane.collapsedWidth
 
     property bool reduce:
         window.width < theme.sidePane.autoReduceBelowWindowWidth
@@ -37,7 +38,8 @@ HRectangle {
         collapse ? theme.sidePane.collapsedWidth :
         autoWidth
 
-    property int currentSpacing: collapse ? 0 : theme.spacing
+    property int currentSpacing:
+        collapse || reduce ? 0 : theme.spacing
 
     Behavior on currentSpacing { HNumberAnimation {} }
     Behavior on implicitWidth  { HNumberAnimation {} }

src/qml/UI.qml

@@ -40,8 +40,11 @@ Item {
             id: sidePane
             canAutoSize: uiSplitView.canAutoSize
 
-            width: implicitWidth  // Initial width
+            // Initial width until user manually resizes
+            width: implicitWidth
             Layout.minimumWidth: reduce ? 0 : theme.sidePane.collapsedWidth
+            // -1: avoid making swipeview stuff disappear when dragged to max
+            Layout.maximumWidth: parent.width - 1
 
             Behavior on Layout.minimumWidth {
                 // Must run faster than SidePane implicitWidth anim