Have a separate PageLoader component from UI

This commit is contained in:
miruka 2019-12-18 17:00:02 -04:00
parent a1f89ca9c4
commit d3ee39bf7b
2 changed files with 100 additions and 94 deletions

92
src/gui/PageLoader.qml Normal file
View File

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

View File

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