feat(onboarding): Added SplashScreen

- Added SplashScreen as initial screen before
onboard as per new designs.
- Also moved all onboarding related code from
main to onboarding section and switched to
import this and all other sections as
qml modules, exposing this way only
necessary files.
- Cleaned up unecessary qmldir files and
imports.

Closes #4954
This commit is contained in:
Alexandra Betouni 2022-03-04 00:50:53 +02:00 committed by Iuri Matias
parent e5e6914947
commit c2977e468f
32 changed files with 283 additions and 196 deletions

View File

@ -63,6 +63,7 @@ int main(int argc, char* argv[])
Global::Singleton::instance()->engine()->addImportPath("qrc:/./StatusQ/src"); Global::Singleton::instance()->engine()->addImportPath("qrc:/./StatusQ/src");
Global::Singleton::instance()->engine()->addImportPath("qrc:/./imports"); Global::Singleton::instance()->engine()->addImportPath("qrc:/./imports");
Global::Singleton::instance()->engine()->addImportPath("qrc:/./app");
const QUrl url(QStringLiteral("qrc:/main.qml")); const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect( QObject::connect(

View File

@ -104,6 +104,7 @@ proc mainProc() =
singletonInstance.engine.addImportPath("qrc:/./StatusQ/src") singletonInstance.engine.addImportPath("qrc:/./StatusQ/src")
singletonInstance.engine.addImportPath("qrc:/./imports") singletonInstance.engine.addImportPath("qrc:/./imports")
singletonInstance.engine.addImportPath("qrc:/./app");
singletonInstance.engine.setNetworkAccessManagerFactory(networkAccessFactory) singletonInstance.engine.setNetworkAccessManagerFactory(networkAccessFactory)
singletonInstance.engine.setRootContextProperty("uiScaleFilePath", newQVariant(uiScaleFilePath)) singletonInstance.engine.setRootContextProperty("uiScaleFilePath", newQVariant(uiScaleFilePath))
singletonInstance.engine.setRootContextProperty("singleInstance", newQVariant(singleInstance)) singletonInstance.engine.setRootContextProperty("singleInstance", newQVariant(singleInstance))

View File

@ -0,0 +1 @@
BrowserLayout 1.0 BrowserLayout.qml

View File

@ -0,0 +1 @@
Contact 1.0 Contact.qml

View File

@ -0,0 +1 @@
SuggestionBoxPanel 1.0 SuggestionBoxPanel.qml

View File

@ -0,0 +1,5 @@
PinnedMessagesPopup 1.0 PinnedMessagesPopup.qml
ChooseBrowserPopup 1.0 ChooseBrowserPopup.qml
InviteFriendsToCommunityPopup 1.0 community/InviteFriendsToCommunityPopup.qml
CommunityProfilePopup 1.0 community/CommunityProfilePopup.qml
CreateCommunityPopup 1.0 community/CreateCommunityPopup.qml

View File

@ -0,0 +1 @@
ChatLayout 1.0 ChatLayout.qml

View File

@ -0,0 +1,2 @@
StickerData 1.0 StickerData.qml
StickerPackData 1.0 StickerPackData.qml

View File

@ -0,0 +1 @@
NodeLayout 1.0 NodeLayout.qml

View File

@ -0,0 +1,183 @@
import QtQuick 2.12
import QtQml.StateMachine 1.14 as DSM
import utils 1.0
import "views"
import "stores"
QtObject {
id: root
property bool hasAccounts
signal loadApp()
signal onBoardingStepChanged(var view)
property var stateMachine: DSM.StateMachine {
id: stateMachine
initialState: onboardingState
running: true
DSM.State {
id: onboardingState
initialState: root.hasAccounts ? stateLogin : keysMainState
DSM.State {
id: keysMainState
onEntered: { onBoardingStepChanged(keysMain); }
DSM.SignalTransition {
targetState: genKeyState
signal: Global.applicationWindow.navigateTo
guard: path === "GenKey"
}
}
DSM.State {
id: existingKeyState
onEntered: { onBoardingStepChanged(existingKey); }
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state === Constants.appState.main
}
}
DSM.State {
id: genKeyState
onEntered: { onBoardingStepChanged(genKey); }
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state === Constants.appState.main
}
}
DSM.State {
id: keycardState
onEntered: { onBoardingStepChanged(keycardFlowSelection); }
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state === Constants.appState.main
}
}
DSM.State {
id: stateLogin
onEntered: { onBoardingStepChanged(login); }
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state === Constants.appState.main
}
DSM.SignalTransition {
targetState: genKeyState
signal: Global.applicationWindow.navigateTo
guard: path === "GenKey"
}
}
DSM.SignalTransition {
targetState: root.hasAccounts ? stateLogin : keysMainState
signal: Global.applicationWindow.navigateTo
guard: path === "InitialState"
}
DSM.SignalTransition {
targetState: existingKeyState
signal: Global.applicationWindow.navigateTo
guard: path === "ExistingKey"
}
DSM.SignalTransition {
targetState: keysMainState
signal: Global.applicationWindow.navigateTo
guard: path === "KeysMain"
}
DSM.SignalTransition {
targetState: keycardState
signal: Global.applicationWindow.navigateTo
guard: path === "KeycardFlowSelection"
}
DSM.FinalState {
id: onboardingDoneState
}
}
DSM.State {
id: appState
onEntered: loadApp();
DSM.SignalTransition {
targetState: stateLogin
signal: startupModule.logOut
}
}
}
property var keysMainComponent: Component {
id: keysMain
KeysMainView {
btnGenKey.onClicked: Global.applicationWindow.navigateTo("GenKey")
btnExistingKey.onClicked: Global.applicationWindow.navigateTo("ExistingKey")
btnKeycard.onClicked: Global.applicationWindow.navigateTo("KeycardFlowSelection")
}
}
property var existingKeyComponent: Component {
id: existingKey
ExistingKeyView {
onClosed: function () {
if (root.hasAccounts) {
Global.applicationWindow.navigateTo("InitialState")
} else {
Global.applicationWindow.navigateTo("KeysMain")
}
}
}
}
property var genKeyComponent: Component {
id: genKey
GenKeyView {
onClosed: function () {
if (root.hasAccounts) {
Global.applicationWindow.navigateTo("InitialState")
} else {
Global.applicationWindow.navigateTo("KeysMain")
}
}
}
}
property var keycardFlowSelectionComponent: Component {
id: keycardFlowSelection
KeycardFlowSelectionView {
onClosed: function () {
if (root.hasAccounts) {
Global.applicationWindow.navigateTo("InitialState")
} else {
Global.applicationWindow.navigateTo("KeysMain")
}
}
}
}
property var loginComponent: Component {
id: login
LoginView {
onGenKeyClicked: function () {
Global.applicationWindow.navigateTo("GenKey")
}
onExistingKeyClicked: function () {
Global.applicationWindow.navigateTo("ExistingKey")
}
}
}
}

View File

@ -0,0 +1 @@
OnboardingLayout 1.0 OnboardingLayout.qml

View File

@ -0,0 +1,2 @@
ChangeProfilePicModal 1.0 ChangeProfilePicModal.qml
BackupSeedModal 1.0 BackupSeedModal.qml

View File

@ -1 +1 @@
LeftTab 1.0 LeftTab.qml ProfileLayout 1.0 ProfileLayout.qml

View File

@ -2,3 +2,4 @@ LeftTabView 1.0 LeftTabView.qml
WalletHeader 1.0 WalletHeader.qml WalletHeader 1.0 WalletHeader.qml
AssetsView 1.0 AssetsView.qml AssetsView 1.0 AssetsView.qml
CollectiblesView 1.0 CollectiblesView.qml CollectiblesView 1.0 CollectiblesView.qml
WalletLayout 1.0 WalletLayout.qml

View File

@ -1,6 +0,0 @@
BrowserLayout 1.0 Browser/BrowserLayout.qml
ChatLayout 1.0 Chat/ChatLayout.qml
NodeLayout 1.0 Node/NodeLayout.qml
ProfileLayout 1.0 Profile/ProfileLayout.qml
WalletLayout 1.0 Wallet/WalletLayout.qml
UIComponents 1.0 UIComponents/UIComponents.qml

View File

@ -0,0 +1 @@
RootStore 1.0 RootStore.qml

View File

@ -3,22 +3,22 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import QtMultimedia 5.13 import QtMultimedia 5.13
import Qt.labs.qmlmodels 1.0 import Qt.labs.qmlmodels 1.0
import Qt.labs.platform 1.1
import Qt.labs.settings 1.0
import applayouts.Wallet 1.0
import applayouts.Node 1.0
import applayouts.Browser 1.0
import applayouts.Chat 1.0
import applayouts.Chat.popups 1.0
import applayouts.Profile 1.0
import applayouts.Profile.popups 1.0
import utils 1.0 import utils 1.0
import shared 1.0 import shared 1.0
import shared.panels 1.0 import shared.panels 1.0
import shared.popups 1.0 import shared.popups 1.0
import shared.status 1.0 import shared.status 1.0
import "./AppLayouts"
import "./AppLayouts/Wallet"
import "./AppLayouts/Chat/popups"
import "./AppLayouts/Chat/popups/community"
import "./AppLayouts/Profile/popups"
import "./AppLayouts/stores"
import "./AppLayouts/Browser/stores" as BrowserStores
import Qt.labs.platform 1.1
import Qt.labs.settings 1.0
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
@ -27,6 +27,8 @@ import StatusQ.Layout 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import applayouts.stores 1.0
Item { Item {
id: appMain id: appMain
anchors.fill: parent anchors.fill: parent

View File

@ -0,0 +1,40 @@
import QtQuick 2.12
import utils 1.0
import Qt.labs.lottieqt 1.0
Item {
id: root
anchors.fill: parent
visible: (opacity > 0.0001)
Behavior on opacity { NumberAnimation { duration: 250 }}
Timer {
running: true
interval: 2000
onTriggered: {
root.opacity = 0.0;
}
}
Image {
width: 150
height: 150
fillMode: Image.PreserveAspectFit
anchors.centerIn: parent
source: Style.svg("status-logo-circle")
}
LottieAnimation {
anchors.centerIn: parent
autoPlay: false
loops: LottieAnimation.Infinite
quality: LottieAnimation.MediumQuality
source: Style.lottie("status_splash")
onStatusChanged: {
if (status === LottieAnimation.Ready) {
start();
}
}
}
}

2
ui/app/mainui/qmldir Normal file
View File

@ -0,0 +1,2 @@
AppMain 1.0 AppMain.qml
SplashScreen 1.0 SplashScreen.qml

View File

@ -1 +0,0 @@
AppMain 1.0 AppMain.qml

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,7 @@ import StatusQ.Controls 0.1
import shared.views 1.0 import shared.views 1.0
import shared.panels 1.0 import shared.panels 1.0
import shared.popups 1.0 import shared.popups 1.0
import "../../../app/AppLayouts/Wallet" import applayouts.Wallet 1.0
StatusModal { StatusModal {
id: root id: root

View File

@ -14,7 +14,7 @@ import shared.popups 1.0
import shared.stores 1.0 import shared.stores 1.0
//TODO remove this dependency //TODO remove this dependency
import "../../../app/AppLayouts/Chat/panels" import applayouts.Chat.panels 1.0
import "./emojiList.js" as EmojiJSON import "./emojiList.js" as EmojiJSON
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1

View File

@ -9,7 +9,7 @@ import shared.panels 1.0
import shared.popups 1.0 import shared.popups 1.0
import shared.status 1.0 import shared.status 1.0
//TODO remove this dependency! //TODO remove this dependency!
import "../../../app/AppLayouts/Chat/stores" import applayouts.Chat.stores 1.0
Item { Item {
id: root id: root

View File

@ -7,8 +7,6 @@ import utils 1.0
import shared 1.0 import shared 1.0
import shared.popups 1.0 import shared.popups 1.0
import shared.status 1.0 import shared.status 1.0
//TODO remove this dependency!
import "../../../app/AppLayouts/Chat/stores"
// TODO: replace with StatusModal // TODO: replace with StatusModal
ModalPopup { ModalPopup {

View File

@ -9,7 +9,7 @@ import shared.panels 1.0
import StatusQ.Controls 0.1 as StatusQControls import StatusQ.Controls 0.1 as StatusQControls
import StatusQ.Components 0.1 import StatusQ.Components 0.1
//TODO improve this! //TODO improve this!
import "../../../app/AppLayouts/Chat/stores" import applayouts.Chat.stores 1.0
Popup { Popup {
id: root id: root

View File

@ -6,7 +6,7 @@ import utils 1.0
import shared.status 1.0 import shared.status 1.0
import shared.stores 1.0 import shared.stores 1.0
// TODO move Contact into shared to get rid of that import // TODO move Contact into shared to get rid of that import
import "../../../app/AppLayouts/Chat/controls" import applayouts.Chat.controls 1.0
Item { Item {
id: root id: root

View File

@ -10,8 +10,6 @@ import StatusQ.Controls 0.1
import "../" import "../"
import "../status" import "../status"
import "../panels" import "../panels"
// TODO move Contact into shared to get rid of that import
import "../../../app/AppLayouts/Chat/controls"
import "./" import "./"
import StatusQ.Components 0.1 import StatusQ.Components 0.1

View File

@ -1,7 +1,7 @@
pragma Singleton pragma Singleton
import QtQuick 2.13 import QtQuick 2.13
import "../../app/AppLayouts/Chat/popups" import applayouts.Chat.popups 1.0
QtObject { QtObject {
id: root id: root

View File

@ -52,4 +52,7 @@ QtObject {
function emoji(name) { function emoji(name) {
return assetPath + "twemoji/" +name + ".png"; return assetPath + "twemoji/" +name + ".png";
} }
function lottie(name) {
return assetPath + "lottie/" +name + ".json";
}
} }

View File

@ -2,7 +2,6 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import Qt.labs.platform 1.1 import Qt.labs.platform 1.1
import QtQml.StateMachine 1.14 as DSM
import Qt.labs.settings 1.0 import Qt.labs.settings 1.0
import QtQuick.Window 2.12 import QtQuick.Window 2.12
import QtQml 2.13 import QtQml 2.13
@ -16,8 +15,8 @@ import shared 1.0
import shared.panels 1.0 import shared.panels 1.0
import shared.popups 1.0 import shared.popups 1.0
import "./app/AppLayouts/Onboarding/views" import mainui 1.0
import "./app" import applayouts.Onboarding 1.0
StatusWindow { StatusWindow {
property bool hasAccounts: startupModule.appState !== Constants.appState.onboarding property bool hasAccounts: startupModule.appState !== Constants.appState.onboarding
@ -298,119 +297,13 @@ StatusWindow {
} }
} }
DSM.StateMachine {
id: stateMachine
initialState: onboardingState
running: true
DSM.State {
id: onboardingState
initialState: hasAccounts ? stateLogin : keysMainState
DSM.State {
id: keysMainState
onEntered: loader.sourceComponent = keysMain
DSM.SignalTransition {
targetState: genKeyState
signal: applicationWindow.navigateTo
guard: path === "GenKey"
}
}
DSM.State {
id: existingKeyState
onEntered: loader.sourceComponent = existingKey
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state == Constants.appState.main
}
}
DSM.State {
id: genKeyState
onEntered: loader.sourceComponent = genKey
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state == Constants.appState.main
}
}
DSM.State {
id: keycardState
onEntered: loader.sourceComponent = keycardFlowSelection
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state == Constants.appState.main
}
}
DSM.State {
id: stateLogin
onEntered: loader.sourceComponent = login
DSM.SignalTransition {
targetState: appState
signal: startupModule.appStateChanged
guard: state == Constants.appState.main
}
DSM.SignalTransition {
targetState: genKeyState
signal: applicationWindow.navigateTo
guard: path === "GenKey"
}
}
DSM.SignalTransition {
targetState: hasAccounts ? stateLogin : keysMainState
signal: applicationWindow.navigateTo
guard: path === "InitialState"
}
DSM.SignalTransition {
targetState: existingKeyState
signal: applicationWindow.navigateTo
guard: path === "ExistingKey"
}
DSM.SignalTransition {
targetState: keysMainState
signal: applicationWindow.navigateTo
guard: path === "KeysMain"
}
DSM.SignalTransition {
targetState: keycardState
signal: applicationWindow.navigateTo
guard: path === "KeycardFlowSelection"
}
DSM.FinalState {
id: onboardingDoneState
}
}
DSM.State {
id: appState
onEntered: loader.sourceComponent = app
DSM.SignalTransition {
targetState: stateLogin
signal: startupModule.logOut
}
}
}
Loader { Loader {
id: loader id: loader
anchors.fill: parent anchors.fill: parent
opacity: active ? 1.0 : 0.0
visible: (opacity > 0.0001)
Behavior on opacity { NumberAnimation { duration: 120 }}
active: !splashScreen.visible
} }
Component { Component {
@ -420,63 +313,14 @@ StatusWindow {
} }
} }
Component { OnboardingLayout {
id: keysMain hasAccounts: applicationWindow.hasAccounts
KeysMainView { onLoadApp: {
btnGenKey.onClicked: applicationWindow.navigateTo("GenKey") loader.sourceComponent = app;
btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
btnKeycard.onClicked: applicationWindow.navigateTo("KeycardFlowSelection")
}
} }
Component { onOnBoardingStepChanged: {
id: existingKey loader.sourceComponent = view;
ExistingKeyView {
onClosed: function () {
if (hasAccounts) {
applicationWindow.navigateTo("InitialState")
} else {
applicationWindow.navigateTo("KeysMain")
}
}
}
}
Component {
id: genKey
GenKeyView {
onClosed: function () {
if (hasAccounts) {
applicationWindow.navigateTo("InitialState")
} else {
applicationWindow.navigateTo("KeysMain")
}
}
}
}
Component {
id: keycardFlowSelection
KeycardFlowSelectionView {
onClosed: function () {
if (hasAccounts) {
applicationWindow.navigateTo("InitialState")
} else {
applicationWindow.navigateTo("KeysMain")
}
}
}
}
Component {
id: login
LoginView {
onGenKeyClicked: function () {
applicationWindow.navigateTo("GenKey")
}
onExistingKeyClicked: function () {
applicationWindow.navigateTo("ExistingKey")
}
} }
} }
@ -513,6 +357,10 @@ StatusWindow {
applicationWindow.toggleFullScreen() applicationWindow.toggleFullScreen()
} }
} }
SplashScreen {
id: splashScreen
}
} }
/*##^## /*##^##