Have a separate PageLoader component from UI

src/gui/PageLoader.qml

@@ -0,0 +1,92 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Window 2.7
+import QtGraphicalEffects 1.12
+import "Base"
+import "MainPane"
+
+HLoader {
+    id: pageLoader
+    clip: appearAnimation.running
+
+    onLoaded: { takeFocus(); appearAnimation.start() }
+
+    Component.onCompleted: {
+        if (! py.startupAnyAccountsSaved) {
+            pageLoader.showPage("AddAccount/AddAccount")
+            return
+        }
+
+        let page  = window.uiState.page
+        let props = window.uiState.pageProperties
+
+        if (page === "Pages/Chat/Chat.qml") {
+            pageLoader.showRoom(props.userId, props.roomId)
+        } else {
+            pageLoader._show(page, props)
+        }
+    }
+
+
+    property bool isWide: width > theme.contentIsWideAbove
+
+    // List of previously loaded [componentUrl, {properties}]
+    property var history: []
+    property int historyLength: 20
+
+
+    function _show(componentUrl, properties={}) {
+        history.unshift([componentUrl, properties])
+        if (history.length > historyLength) history.pop()
+
+        pageLoader.setSource(componentUrl, properties)
+    }
+
+    function showPage(name, properties={}) {
+        let path = `Pages/${name}.qml`
+        _show(path, properties)
+
+        window.uiState.page           = path
+        window.uiState.pageProperties = properties
+        window.uiStateChanged()
+    }
+
+    function showRoom(userId, roomId) {
+        _show("Pages/Chat/Chat.qml", {userId, roomId})
+
+        window.uiState.page           = "Pages/Chat/Chat.qml"
+        window.uiState.pageProperties = {userId, roomId}
+        window.uiStateChanged()
+    }
+
+    function showPrevious(timesBack=1) {
+        timesBack = Math.min(timesBack, history.length - 1)
+        if (timesBack < 1) return false
+
+        let [componentUrl, properties] = history[timesBack]
+
+        _show(componentUrl, properties)
+
+        window.uiState.page           = componentUrl
+        window.uiState.pageProperties = properties
+        window.uiStateChanged()
+        return true
+    }
+
+    function takeFocus() {
+        pageLoader.item.forceActiveFocus()
+        if (mainPane.collapse) mainPane.close()
+    }
+
+
+    HNumberAnimation {
+        id: appearAnimation
+        target: pageLoader.item
+        property: "x"
+        from: -300
+        to: 0
+        easing.type: Easing.OutBack
+        duration: theme.animationDuration * 2
+    }
+}

src/gui/UI.qml

@@ -9,13 +9,19 @@ import "MainPane"
 Item {
     id: mainUI
     focus: true
+
     Component.onCompleted: window.mainUI = mainUI
 
+
+    property bool accountsPresent:
+        (modelSources["Account"] || []).length > 0 ||
+        py.startupAnyAccountsSaved
+
     readonly property alias shortcuts: shortcuts
     readonly property alias mainPane: mainPane
     readonly property alias pageLoader: pageLoader
     readonly property alias pressAnimation: pressAnimation
-    readonly property alias fullScreenPopup: fullScreenPopup
+
 
     SequentialAnimation {
         id: pressAnimation
@@ -27,10 +33,6 @@ Item {
         }
     }
 
-    property bool accountsPresent:
-        (modelSources["Account"] || []).length > 0 ||
-        py.startupAnyAccountsSaved
-
     GlobalShortcuts { id: shortcuts }
 
     HImage {
@@ -56,102 +58,14 @@ Item {
         }
     }
 
-
     MainPane {
         id: mainPane
     }
 
-    HLoader {
+    PageLoader {
         id: pageLoader
         anchors.fill: parent
         anchors.leftMargin: mainPane.visibleSize
         visible: ! mainPane.hidden || anchors.leftMargin < width
-        clip: appearAnimation.running
-        onLoaded: { takeFocus(); appearAnimation.start() }
-        // onSourceChanged: if (mainPane.collapse) mainPane.close()
-
-
-        property bool isWide: width > theme.contentIsWideAbove
-
-        // List of previously loaded [componentUrl, {properties}]
-        property var history: []
-        property int historyLength: 20
-
-        Component.onCompleted: {
-            if (! py.startupAnyAccountsSaved) {
-                pageLoader.showPage("AddAccount/AddAccount")
-                return
-            }
-
-            let page  = window.uiState.page
-            let props = window.uiState.pageProperties
-
-            if (page === "Pages/Chat/Chat.qml") {
-                pageLoader.showRoom(props.userId, props.roomId)
-            } else {
-                pageLoader._show(page, props)
-            }
-        }
-
-        function _show(componentUrl, properties={}) {
-            history.unshift([componentUrl, properties])
-            if (history.length > historyLength) history.pop()
-
-            pageLoader.setSource(componentUrl, properties)
-        }
-
-        function showPage(name, properties={}) {
-            let path = `Pages/${name}.qml`
-            _show(path, properties)
-
-            window.uiState.page           = path
-            window.uiState.pageProperties = properties
-            window.uiStateChanged()
-        }
-
-        function showRoom(userId, roomId) {
-            _show("Pages/Chat/Chat.qml", {userId, roomId})
-
-            window.uiState.page           = "Pages/Chat/Chat.qml"
-            window.uiState.pageProperties = {userId, roomId}
-            window.uiStateChanged()
-        }
-
-        function showPrevious(timesBack=1) {
-            timesBack = Math.min(timesBack, history.length - 1)
-            if (timesBack < 1) return false
-
-            let [componentUrl, properties] = history[timesBack]
-
-            _show(componentUrl, properties)
-
-            window.uiState.page           = componentUrl
-            window.uiState.pageProperties = properties
-            window.uiStateChanged()
-            return true
-        }
-
-        function takeFocus() {
-            pageLoader.item.forceActiveFocus()
-            if (mainPane.collapse) mainPane.close()
-        }
-
-
-        HNumberAnimation {
-            id: appearAnimation
-            target: pageLoader.item
-            property: "x"
-            from: -300
-            to: 0
-            easing.type: Easing.OutBack
-            duration: theme.animationDuration * 2
-        }
-    }
-
-    HPopup {
-        id: fullScreenPopup
-        dim: false
-        width: window.width
-        height: window.height
     }
 }