status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(onboarding): adding initial screens 

Closes #4974
This commit is contained in:
Alexandra Betouni 2022-03-05 01:31:31 +02:00 committed by Iuri Matias
parent 8cab96fd24
commit cbfb60c4f7
7 changed files with 327 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/app/AppLayouts/Onboarding/OnboardingLayout.qml
View File

@ -9,7 +9,7 @@ QtObject {
id: root
property bool hasAccounts
signal loadApp()
signal onBoardingStepChanged(var view)
signal onBoardingStepChanged(var view, string state)
property var stateMachine: DSM.StateMachine {
id: stateMachine
@ -22,7 +22,7 @@ QtObject {
DSM.State {
id: keysMainState
onEntered: { onBoardingStepChanged(keysMain); }
onEntered: { onBoardingStepChanged(welcomeMain, ""); }
DSM.SignalTransition {
targetState: genKeyState
@ -33,7 +33,7 @@ QtObject {
DSM.State {
id: existingKeyState
onEntered: { onBoardingStepChanged(existingKey); }
onEntered: { onBoardingStepChanged(existingKey, ""); }
DSM.SignalTransition {
targetState: appState
@ -44,7 +44,7 @@ QtObject {
DSM.State {
id: genKeyState
onEntered: { onBoardingStepChanged(genKey); }
onEntered: { onBoardingStepChanged(genKey, ""); }
DSM.SignalTransition {
targetState: appState
@ -55,7 +55,7 @@ QtObject {
DSM.State {
id: keycardState
onEntered: { onBoardingStepChanged(keycardFlowSelection); }
onEntered: { onBoardingStepChanged(keycardFlowSelection, ""); }
DSM.SignalTransition {
targetState: appState
@ -66,7 +66,7 @@ QtObject {
DSM.State {
id: stateLogin
onEntered: { onBoardingStepChanged(login); }
onEntered: { onBoardingStepChanged(login, ""); }
DSM.SignalTransition {
targetState: appState
@ -121,12 +121,33 @@ QtObject {
}
}
property var welcomeComponent: Component {
id: welcomeMain
WelcomeView {
onBtnNewUserClicked: {
onBoardingStepChanged(keysMain, "getkeys");
}
onBtnExistingUserClicked: {
onBoardingStepChanged(keysMain, "connectkeys");
}
}
}
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")
onButtonClicked: {
Global.applicationWindow.navigateTo("GenKey");
}
onKeycardLinkClicked: {
Global.applicationWindow.navigateTo("KeycardFlowSelection");
}
onSeedLinkClicked: {
Global.applicationWindow.navigateTo("ExistingKey");
}
onBackClicked: {
onBoardingStepChanged(welcomeMain, "");
}
}
}

62
ui/app/AppLayouts/Onboarding/popups/BeforeGetStartedModal.qml
View File

@ -13,7 +13,6 @@ StatusModal {
id: popup
anchors.centerIn: parent
//% "Before you get started..."
header.title: qsTrId("before-you-get-started---")
hasCloseButton: false
closePolicy: Popup.NoAutoClose
@ -34,7 +33,6 @@ StatusModal {
id: acknowledge
objectName: "acknowledgeCheckBox"
width: parent.width
//% "I acknowledge that Status Desktop is in Beta and by using it, I take the full responsibility for all risks concerning my data and funds."
text: qsTrId("i-acknowledge-that-status-desktop-is-in-beta-and-by-using-it--i-take-the-full-responsibility-for-all-risks-concerning-my-data-and-funds-")
}
@ -47,16 +45,14 @@ StatusModal {
leftPadding: termsOfUse.indicator.width + termsOfUse.spacing
StatusBaseText {
//% "I accept"
text: qsTrId("i-accept")
text: qsTr("I accept Status")
color: Theme.palette.directColor1
}
StatusBaseText {
//% "Terms of Use"
objectName: "termsOfUseLink"
text: qsTrId("terms-of-service")
color: Theme.palette.primaryColor1
objectName: "termsOfUseLink"
MouseArea {
anchors.fill: parent
@ -73,6 +69,32 @@ StatusModal {
}
}
}
StatusBaseText {
text: " & "
color: Theme.palette.directColor1
}
StatusBaseText {
objectName: "privacyPolicyLink"
text: qsTr("Privacy Policy")
color: Theme.palette.primaryColor1
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
Qt.openUrlExternally("https://status.im/privacy-policy/")
}
}
}
}
}
@ -80,39 +102,11 @@ StatusModal {
}
}
leftButtons: [
StatusBaseText {
id: ppText
//% "Privacy Policy"
objectName: "privacyPolicyLink"
text: qsTrId("privacy-policy")
color: Theme.palette.primaryColor1
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
Qt.openUrlExternally("https://status.im/privacy-policy/")
}
}
}
]
rightButtons: [
StatusButton {
id: getStartedButton
objectName: "getStartedStatusButton"
enabled: acknowledge.checked && termsOfUse.checked
//% "Get Started"
text: qsTrId("get-started")
onClicked: {
popup.close()

2
ui/app/AppLayouts/Onboarding/views/KeycardFlowSelectionView.qml
View File

@ -13,7 +13,7 @@ Item {
property var onClosed: function () {}
property bool connected: false
property int flow: OnboardingFlow.Recover
property int flow: KeycardFlowSelectionView.OnboardingFlow.Recover
id: keycardView
Component.onCompleted: {

191
ui/app/AppLayouts/Onboarding/views/KeysMainView.qml
View File

@ -1,8 +1,11 @@
import QtQuick 2.13
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import shared 1.0
import shared.panels 1.0
@ -11,10 +14,12 @@ import "../popups"
import utils 1.0
Page {
id: page
property alias btnExistingKey: btnExistingKey
property alias btnGenKey: btnGenKey
property alias btnKeycard: btnKeycard
id: root
signal buttonClicked()
signal keycardLinkClicked()
signal seedLinkClicked()
signal backClicked()
background: Rectangle {
color: Style.current.background
@ -59,8 +64,7 @@ Page {
}
StyledText {
id: txtTitle1
//% "Get your keys"
id: txtTitle
text: qsTrId("intro-wizard-title1")
anchors.topMargin: Style.current.padding
font.bold: true
@ -71,45 +75,168 @@ Page {
}
StyledText {
id: txtDesc1
id: txtDesc
color: Style.current.secondaryText
//% "A set of keys controls your account. Your keys live on your device, so only you can use them."
text: qsTrId("a-set-of-keys-controls-your-account.-your-keys-live-on-your-device,-so-only-you-can-use-them.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.left: parent.left
anchors.top: txtTitle1.bottom
anchors.top: txtTitle.bottom
anchors.topMargin: Style.current.padding
font.pixelSize: 15
}
StatusButton {
id: btnGenKey
anchors.top: txtDesc1.bottom
ColumnLayout {
anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
//% "I'm new, generate keys"
text: qsTrId("im-new,-generate-keys")
}
anchors.top: txtDesc.bottom
spacing: Style.current.bigPadding
StatusButton {
id: button
Layout.alignment: Qt.AlignHCenter
onClicked: {
root.buttonClicked();
}
}
StatusFlatButton {
id: btnExistingKey
//% "Access existing key"
text: qsTrId("access-existing-key")
anchors.top: btnGenKey.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
}
StatusBaseText {
id: keycardLink
Layout.alignment: Qt.AlignHCenter
color: Theme.palette.primaryColor1
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
root.keycardLinkClicked();
}
}
}
StatusFlatButton {
id: btnKeycard
//% "I have a Keycard"
text: qsTr("I have a Keycard")
anchors.top: btnExistingKey.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
visible: isExperimental === "1" || localAccountSettings.isKeycardEnabled
StatusBaseText {
id: seedLink
Layout.alignment: Qt.AlignHCenter
color: Theme.palette.primaryColor1
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
parent.font.underline = true
}
onExited: {
parent.font.underline = false
}
onClicked: {
root.seedLinkClicked();
}
}
}
}
}
StatusRoundButton {
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.padding
icon.name: "arrow-left"
onClicked: {
root.backClicked();
}
}
states: [
State {
name: "connectkeys"
PropertyChanges {
target: txtTitle
text: qsTr("Connect your keys")
}
PropertyChanges {
target: txtDesc
text: qsTr("Use your existing Status keys to login to this device.")
}
PropertyChanges {
target: button
text: qsTr("Scan sync code")
}
PropertyChanges {
target: keycardLink
text: qsTr("Login with Keycard")
}
PropertyChanges {
target: seedLink
text: qsTr("Enter a seed phrase")
}
},
State {
name: "getkeys"
PropertyChanges {
target: txtTitle
text: qsTr("Get your keys")
}
PropertyChanges {
target: txtDesc
text: qsTr("A set of keys controls your account. Your keys live on your\ndevice, so only you can use them.")
}
PropertyChanges {
target: button
text: qsTr("Generate new keys")
}
PropertyChanges {
target: keycardLink
text: qsTr("Generate keys for a new Keycard")
}
PropertyChanges {
target: seedLink
text: qsTr("lmport a seed phrase")
}
},
State {
name: "importseed"
PropertyChanges {
target: txtTitle
text: qsTr("lmport a seed phrase")
}
PropertyChanges {
target: txtDesc
text: qsTr("Seed phrases are used to back up and restore your keys.\n
Only use this option if you already have a seed phrase.")
}
PropertyChanges {
target: button
text: qsTr("lmport a seed phrase")
}
PropertyChanges {
target: keycardLink
text: qsTr("lmport a seed phrase into a new Keycard")
}
PropertyChanges {
target: seedLink
text: ""
visible: false
}
}
]
}

108
ui/app/AppLayouts/Onboarding/views/WelcomeView.qml Normal file
View File

@ -0,0 +1,108 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Universal 2.12
import StatusQ.Controls 0.1
import shared 1.0
import shared.panels 1.0
import "../popups"
import utils 1.0
Page {
id: page
signal btnNewUserClicked()
signal btnExistingUserClicked()
background: Rectangle {
color: Style.current.background
}
Component.onCompleted: {
if(displayBeforeGetStartedModal) {
displayBeforeGetStartedModal = false
beforeGetStartedModal.open()
}
}
BeforeGetStartedModal {
id: beforeGetStartedModal
}
Item {
id: container
width: 425
height: {
let h = 0
const children = this.children
Object.keys(children).forEach(function (key) {
const child = children[key]
h += child.height + Style.current.padding
})
return h
}
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Image {
id: keysImg
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
fillMode: Image.PreserveAspectFit
source: Style.png("welcome")
width: 256
height: 256
mipmap: true
}
StyledText {
id: txtTitle1
//% "Get your keys"
text: qsTr("Welcome to Status")
anchors.topMargin: Style.current.padding
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: keysImg.bottom
font.letterSpacing: -0.2
font.pixelSize: 22
}
StyledText {
id: txtDesc1
color: Style.current.secondaryText
text: qsTr("Your fully decentralized gateway to Ethereum and Web3.\nCrypto wallet, privacy first group chat, and dApp browser.")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.left: parent.left
anchors.top: txtTitle1.bottom
anchors.topMargin: Style.current.padding
font.pixelSize: 15
}
StatusButton {
id: btnNewUser
anchors.top: txtDesc1.bottom
anchors.topMargin: 40
anchors.horizontalCenter: parent.horizontalCenter
text: qsTr("I am new to Status")
onClicked: {
page.btnNewUserClicked();
}
}
StatusButton {
id: btnExistingUser
text: qsTr("I already use Status")
anchors.top: btnNewUser.bottom
anchors.topMargin: Style.current.padding
anchors.horizontalCenter: parent.horizontalCenter
onClicked: {
page.btnExistingUserClicked();
}
}
}
}

BIN
ui/imports/assets/images/welcome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

1
ui/main.qml
View File

@ -321,6 +321,7 @@ StatusWindow {
onOnBoardingStepChanged: {
loader.sourceComponent = view;
loader.item.state = state;
}
}