From 503252f1c7b9d6a823a8ccdac56d05b67c1ee74e Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Mon, 15 Jul 2019 17:43:53 -0400
Subject: [PATCH] Make edit account UI more scalable

Put content in flickable, reduce avatar height as needed.
The minimum supported resolution of the app should now be 240x120.
---
 src/qml/Pages/EditAccount/EditAccount.qml | 62 +++++++++++++----------
 src/qml/Pages/EditAccount/Profile.qml     |  4 +-
 src/qml/Theme.qml                         |  3 ++
 src/qml/Window.qml                        |  4 +-
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/src/qml/Pages/EditAccount/EditAccount.qml b/src/qml/Pages/EditAccount/EditAccount.qml
index 2c81e45b..a09d1ddf 100644
--- a/src/qml/Pages/EditAccount/EditAccount.qml
+++ b/src/qml/Pages/EditAccount/EditAccount.qml
@@ -9,11 +9,8 @@ import "../../utils.js" as Utils
 
 Page {
     id: editAccount
-    padding: currentSpacing < 8 ? 0 : currentSpacing
-    Behavior on padding { HNumberAnimation {} }
 
     property bool wide: width > 414 + padding * 2
-    property int thinMaxWidth: 240
     property int normalSpacing: 8
     property int currentSpacing:
         Math.min(normalSpacing * width / 400, normalSpacing * 2)
@@ -47,35 +44,48 @@ Page {
 
     background: null
 
-    HColumnLayout {
+    padding: currentSpacing < 8 ? 0 : currentSpacing
+    Behavior on padding { HNumberAnimation {} }
+
+    Flickable {
+        id: flickable
         anchors.fill: parent
-        spacing: 16
+        clip: true
+        contentWidth: parent.width
+        contentHeight: boxColumn.childrenRect.height
 
-        HRectangle {
-            color: theme.box.background
-            // radius: theme.box.radius
+        HColumnLayout {
+            id: boxColumn
+            spacing: 16
+            width: flickable.width
+            height: flickable.height
 
-            Layout.alignment: Qt.AlignCenter
+            HRectangle {
+                color: theme.box.background
+                // radius: theme.box.radius
 
-            Layout.preferredWidth: wide ? parent.width : thinMaxWidth
-            Layout.maximumWidth: Math.min(parent.width, 640)
+                Layout.alignment: Qt.AlignCenter
 
-            Layout.preferredHeight: childrenRect.height
-            Layout.maximumHeight: parent.height
+                Layout.maximumWidth: Math.min(parent.width, 640)
+                Layout.preferredWidth:
+                    wide ? parent.width : theme.minimumSupportedWidth
 
-            Profile { width: parent.width }
+                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 }
+            // }
         }
-
-        // 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 }
-        // }
     }
 }
diff --git a/src/qml/Pages/EditAccount/Profile.qml b/src/qml/Pages/EditAccount/Profile.qml
index 2b6d0bf2..07153ed1 100644
--- a/src/qml/Pages/EditAccount/Profile.qml
+++ b/src/qml/Pages/EditAccount/Profile.qml
@@ -47,9 +47,9 @@ HGridLayout {
         toolTipImageUrl: null
 
         Layout.alignment: Qt.AlignHCenter
-        Layout.topMargin: wide ? 0 : currentSpacing
 
-        Layout.preferredWidth: thinMaxWidth
+        Layout.preferredWidth:
+            Math.min(flickable.height, theme.minimumSupportedWidth)
         Layout.preferredHeight: Layout.preferredWidth
 
         HFileDialogOpener {
diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml
index d88b5414..7e35af02 100644
--- a/src/qml/Theme.qml
+++ b/src/qml/Theme.qml
@@ -8,6 +8,9 @@ QtObject {
 
     property int animationDuration: 100
 
+    property int minimumSupportedWidth: 240
+    property int minimumSupportedHeight: 120
+
     property QtObject fontSize: QtObject {
         property int smallest: 6
         property int smaller: 8
diff --git a/src/qml/Window.qml b/src/qml/Window.qml
index d9506701..86af2ca1 100644
--- a/src/qml/Window.qml
+++ b/src/qml/Window.qml
@@ -8,11 +8,13 @@ import "Models"
 
 ApplicationWindow {
     id: window
+    minimumWidth: theme.minimumSupportedWidth
+    minimumHeight: theme.minimumSupportedHeight
     width: 640
     height: 480
     visible: true
-    color: "black"
     title: "Harmony QML"
+    color: "black"
 
     property bool debug: false
     property bool ready: false