HPage with SwipeView to show reduced side pane

TODO.md

@@ -1,3 +1,4 @@
+- Way to round avatar corners to allow box radius
 - If avatar is set, name color from average color?
 - Wrong avatar for group rooms
 - Reduce messages ListView cacheBuffer height once http thumbnails

src/qml/Base/HPage.qml

@@ -0,0 +1,55 @@
+// Copyright 2019 miruka
+// This file is part of harmonyqml, licensed under LGPLv3.
+
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import "../SidePane"
+
+SwipeView {
+    default property alias columnChildren: contentColumn.children
+    property alias page: innerPage
+    property alias flickable: innerFlickable
+
+    property bool wide: width > 414 + leftPadding + rightPadding
+
+    property int currentSpacing:
+        Math.min(theme.spacing * width / 400, theme.spacing * 2)
+
+    id: swipeView
+    currentIndex: 1
+    clip: true
+    interactive: sidePane.reduce
+
+    SidePane {
+        canAutoSize: false
+        autoWidthRatio: 1.0
+        visible: swipeView.interactive
+        onVisibleChanged: swipeView.setCurrentIndex(1)
+    }
+
+    Page {
+        id: innerPage
+        background: null
+
+        leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing
+        rightPadding: leftPadding
+        Behavior on leftPadding { HNumberAnimation {} }
+
+        Flickable {
+            id: innerFlickable
+            anchors.fill: parent
+            clip: true
+            contentWidth: parent.width
+            contentHeight: contentColumn.childrenRect.height
+            interactive: contentWidth > width || contentHeight > height
+
+            HColumnLayout {
+                id: contentColumn
+                spacing: theme.spacing
+                width: innerFlickable.width
+                height: innerFlickable.height
+            }
+        }
+    }
+}

src/qml/Pages/EditAccount/EditAccount.qml

@@ -7,18 +7,15 @@ import QtQuick.Layouts 1.12
 import "../../Base"
 import "../../utils.js" as Utils
 
-Page {
+HPage {
     id: editAccount
 
-    property bool wide: width > 414 + padding * 2
     property int avatarPreferredSize: theme.minimumSupportedWidth
-    property int currentSpacing:
-        Math.min(theme.spacing * width / 400, theme.spacing * 2)
 
     property string userId: ""
     readonly property var userInfo: users.find(userId)
 
-    header: HRectangle {
+    page.header: HRectangle {
         width: parent.width
         color: theme.pageHeadersBackground
 
@@ -50,52 +47,29 @@ Page {
         }
     }
 
-    background: null
+    HRectangle {
+        color: theme.box.background
 
-    leftPadding: currentSpacing < theme.spacing ? 0 : currentSpacing
-    rightPadding: leftPadding
-    Behavior on leftPadding { HNumberAnimation {} }
+        Layout.alignment: Qt.AlignCenter
 
-    Flickable {
-        id: flickable
-        anchors.fill: parent
-        clip: true
-        contentWidth: parent.width
-        contentHeight: boxColumn.childrenRect.height
-        interactive: contentWidth > width || contentHeight > height
+        Layout.maximumWidth: Math.min(parent.width, 640)
+        Layout.preferredWidth:
+            wide ? parent.width : avatarPreferredSize
 
-        HColumnLayout {
-            id: boxColumn
-            spacing: theme.spacing * 2
-            width: flickable.width
-            height: flickable.height
+        Layout.preferredHeight: childrenRect.height
 
-            HRectangle {
-                color: theme.box.background
-                // radius: theme.box.radius
-
-                Layout.alignment: Qt.AlignCenter
-
-                Layout.maximumWidth: Math.min(parent.width, 640)
-                Layout.preferredWidth:
-                    wide ? parent.width : avatarPreferredSize
-
-                Layout.preferredHeight: childrenRect.height
-
-                Profile { width: parent.width }
-            }
-
-            // HRectangle {
-                // color: theme.box.background
-                // radius: theme.box.radius
-                // ClientSettings { width: parent.width }
-            // }
-
-            // HRectangle {
-                // color: theme.box.background
-                // radius: theme.box.radius
-                // Devices { width: parent.width }
-            // }
-        }
+        Profile { width: parent.width }
     }
+
+    // HRectangle {
+        // color: theme.box.background
+        // radius: theme.box.radius
+        // ClientSettings { width: parent.width }
+    // }
+
+    // HRectangle {
+        // color: theme.box.background
+        // radius: theme.box.radius
+        // Devices { width: parent.width }
+    // }
 }

src/qml/SidePane/SidePane.qml

@@ -13,6 +13,7 @@ HRectangle {
 
     property bool canAutoSize: true
     property int parentWidth: parent.width
+    property real autoWidthRatio: theme.sidePane.autoWidthRatio
 
     // Needed for SplitView because it breaks the binding on collapse
     onParentWidthChanged: if (canAutoSize) {
@@ -21,10 +22,7 @@ HRectangle {
 
 
     property int autoWidth:
-        Math.min(
-            parentWidth * theme.sidePane.autoWidthRatio,
-            theme.sidePane.maximumAutoWidth
-        )
+        Math.min(parentWidth * autoWidthRatio, theme.sidePane.maximumAutoWidth)
 
     property bool collapse:
         canAutoSize ?

src/qml/UI.qml

@@ -41,10 +41,11 @@ Item {
             canAutoSize: uiSplitView.canAutoSize
 
             width: implicitWidth  // Initial width
-            Layout.maximumWidth: parent.width
             Layout.minimumWidth: reduce ? 0 : theme.sidePane.collapsedWidth
 
-            Behavior on Layout.minimumWidth { HNumberAnimation {} }
+            Behavior on Layout.minimumWidth {
+                HNumberAnimation { duration: theme.animationDuration / 2 }
+            }
         }
 
         StackView {