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

fix(onboarding): Mobile onboarding slider is shown on desktop 

Mobile onboarding screen is removed. Instead of it "Before you get started..." modal popup is added to the "Get your keys" screen.

Fixes: #2558
This commit is contained in:
Sale Djenic 2021-06-28 13:11:54 +02:00 committed by Iuri Matias
parent 562373fdfc
commit d3290bde02
8 changed files with 116 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ui/main.qml
View File

@ -169,12 +169,7 @@ StatusWindow {
DSM.State {
id: onboardingState
initialState: hasAccounts ? stateLogin : stateIntro
DSM.State {
id: stateIntro
onEntered: loader.sourceComponent = intro
}
initialState: hasAccounts ? stateLogin : keysMainState
DSM.State {
id: keysMainState
@ -227,7 +222,7 @@ StatusWindow {
}
DSM.SignalTransition {
targetState: hasAccounts ? stateLogin : stateIntro
targetState: hasAccounts ? stateLogin : keysMainState
signal: applicationWindow.navigateTo
guard: path === "InitialState"
}
@ -352,16 +347,10 @@ StatusWindow {
AppMain {}
}
Component {
id: intro
Intro {
btnGetStarted.onClicked: applicationWindow.navigateTo("KeysMain")
}
}
Component {
id: keysMain
KeysMain {
displayBeforeGetStartedModal: !hasAccounts
btnGenKey.onClicked: applicationWindow.navigateTo("GenKey")
btnExistingKey.onClicked: applicationWindow.navigateTo("ExistingKey")
}
@ -419,8 +408,7 @@ StatusWindow {
visible: Qt.platform.os === "osx" && !applicationWindow.isFullScreen
onClose: {
if (loader.sourceComponent == login ||
loader.sourceComponent == intro) {
if (loader.sourceComponent == login) {
applicationWindow.visible = false;
}
else if (loader.sourceComponent == app) {

2
ui/nim-status-client.pro
View File

@ -347,7 +347,6 @@ DISTFILES += \
onboarding/ExistingKey.qml \
onboarding/GenKey.qml \
onboarding/GenKeyModal.qml \
onboarding/Intro.qml \
onboarding/KeysMain.qml \
onboarding/Login.qml \
onboarding/Login/AccountList.qml \
@ -358,7 +357,6 @@ DISTFILES += \
onboarding/Login/samples/AccountsData.qml \
onboarding/Login/samples/qmldir \
onboarding/OnboardingMain.qml \
onboarding/Slide.qml \
onboarding/img/browser-dark@2x.jpg \
onboarding/img/browser-dark@3x.jpg \
onboarding/img/browser@2x.jpg \

97
ui/onboarding/BeforeGetStartedModal.qml Normal file
View File

@ -0,0 +1,97 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.14
import "../imports"
import "../shared"
import "../shared/status"
ModalPopup {
id: popup
displayCloseButton: false
title: qsTr("Before you get started...")
width: 430
height: 300
ColumnLayout {
anchors.centerIn: parent
width: parent.width
StatusCheckBox {
id: acknowledge
Layout.preferredWidth: parent.width
text: qsTr("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.")
}
StatusCheckBox {
id: termsOfService
Layout.preferredWidth: parent.width
contentItem: Row {
spacing: 4
leftPadding: termsOfService.indicator.width + termsOfService.spacing
StyledText {
text: qsTr("I accept")
}
StyledText {
text: qsTr("Terms of Service")
color: Style.current.blue
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/terms-of-service/")
}
}
}
StyledText {
id: orText
text: "&"
}
StyledText {
text: qsTr("Privacy Policy")
color: Style.current.blue
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/")
}
}
}
}
}
}
footer: StatusButton {
anchors.right: parent.right
enabled: acknowledge.checked && termsOfService.checked
width: 146
height: 44
text: qsTr("Get Started")
onClicked: {
popup.close()
}
}
}

137
ui/onboarding/Intro.qml
View File

@ -1,137 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls.Universal 2.12
import "../shared"
import "../shared/status"
import "../imports"
RowLayout {
property alias btnGetStarted: btnGetStarted
id: obLayout
anchors.fill: parent
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
border.width: 0
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillHeight: true
Layout.fillWidth: true
color: Style.current.background
SwipeView {
id: vwOnboarding
width: parent.width
height: parent.height
currentIndex: 0
interactive: false
anchors.fill: parent
Slide {
image: "img/chat@2x.png"
//% "Truly private communication"
title: qsTrId("intro-title1")
//% "Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked"
description: qsTrId("chat-over-a-peer-to-peer--encrypted-network-n-where-messages-can-t-be-censored-or-hacked")
isFirst: true
}
Slide {
image: Universal.theme === Universal.Dark ? "img/wallet-dark@2x.jpg" : "img/wallet@2x.jpg"
//% "Secure crypto wallet"
title: qsTrId("intro-title2")
//% "Send and receive digital assets anywhere in the\nworld--no bank account required"
description: qsTrId("send-and-receive-digital-assets-anywhere-in-the-nworld--no-bank-account-required")
}
Slide {
image: "img/browser@2x.png"
//% "Decentralized apps"
title: qsTrId("intro-title3")
//% "Explore games, exchanges and social networks\nwhere you alone own your data"
description: qsTrId("explore-games--exchanges-and-social-networks-nwhere-you-alone-own-your-data")
isLast: true
}
}
Rectangle {
id: rctPageIndicator
border.width: 0
anchors.bottom: vwOnboarding.bottom
anchors.bottomMargin: 191
anchors.top: vwOnboarding.top
anchors.topMargin: 567
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
color: Style.current.background
PageIndicator {
id: pgOnboarding
anchors.horizontalCenter: parent.horizontalCenter
spacing: 5
padding: 0
topPadding: 0
bottomPadding: 0
rightPadding: 0
leftPadding: 0
font.pixelSize: 6
count: vwOnboarding.count
currentIndex: vwOnboarding.currentIndex
}
}
StyledText {
id: warningMessage
x: 772
//% "Thanks for trying Status Desktop! Please note that this is an alpha release and we advise you that using this app should be done for testing purposes only and you assume the full responsibility for all risks concerning your data and funds. Status makes no claims of security or integrity of funds in these builds."
text: qsTrId("thanks-for-trying-status-desktop!-please-note-that-this-is-an-alpha-release-and-we-advise-you-that-using-this-app-should-be-done-for-testing-purposes-only-and-you-assume-the-full-responsibility-for-all-risks-concerning-your-data-and-funds.-status-makes-no-claims-of-security-or-integrity-of-funds-in-these-builds.")
font.bold: true
anchors.top: rctPageIndicator.bottom
anchors.topMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 14
font.letterSpacing: 0.1
width: 700
wrapMode: Text.Wrap
}
StatusCheckBox {
id: warningCheckBox
anchors.top: warningMessage.bottom
anchors.topMargin: 0
anchors.horizontalCenter: parent.horizontalCenter
//% "I understand"
text: qsTrId("i-understand")
}
StatusButton {
id: btnGetStarted
enabled: warningCheckBox.checked
text: "Get Started"
anchors.top: warningCheckBox.bottom
anchors.topMargin: 5
anchors.horizontalCenter: parent.horizontalCenter
width: 146
height: 44
}
StyledText {
id: txtPrivacyPolicy
x: 772
//% "Status does not collect, share or sell any personal data. By continuing you agree with the privacy policy."
text: qsTrId("status-does-not-collect,-share-or-sell-any-personal-data.-by-continuing-you-agree-with-the-privacy-policy.")
anchors.top: btnGetStarted.bottom
anchors.topMargin: 8
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 12
font.letterSpacing: 0.1
color: "#939BA1"
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:770;width:1232}
}
##^##*/

10
ui/onboarding/KeysMain.qml
View File

@ -9,11 +9,21 @@ Page {
id: page
property alias btnExistingKey: btnExistingKey
property alias btnGenKey: btnGenKey
property bool displayBeforeGetStartedModal: true
background: Rectangle {
color: Style.current.background
}
Component.onCompleted: {
if(displayBeforeGetStartedModal)
beforeGetStartedModal.open()
}
BeforeGetStartedModal {
id: beforeGetStartedModal
}
Item {
id: container
width: 425

119
ui/onboarding/Slide.qml
View File

@ -1,119 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import "../imports"
import "../shared"
Item {
id: slide
property string image: "img/chat@2x.png"
property string title: "Truly private communication"
property string description: "Chat over a peer-to-peer, encrypted network\n where messages can't be censored or hacked"
property bool isFirst: false
property bool isLast: false
Image {
id: img1
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 17
fillMode: Image.PreserveAspectFit
source: image
}
StyledText {
id: txtTitle1
text: title
anchors.right: parent.right
anchors.rightMargin: 177
anchors.left: parent.left
anchors.leftMargin: 177
anchors.top: img1.bottom
anchors.topMargin: 44
font.letterSpacing: -0.2
font.weight: Font.Bold
lineHeight: 1
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
transformOrigin: Item.Center
font.bold: true
font.pixelSize: 22
font.kerning: true
}
Button {
id: btnPrevious1
width: 40
height: 40
anchors.top: txtDesc1.top
anchors.bottomMargin: -2
anchors.bottom: txtDesc1.bottom
anchors.topMargin: -2
anchors.right: txtDesc1.left
anchors.rightMargin: 32
onClicked: vwOnboarding.currentIndex--
visible: !isFirst
background: Rectangle {
id: rctPrevious1
color: Style.current.grey
border.width: 0
radius: 50
SVGImage {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "img/next.svg"
width: 10
height: 10
mirror: true
}
}
}
StyledText {
id: txtDesc1
x: 772
color: Style.current.darkGrey
text: description
font.weight: Font.Normal
style: Text.Normal
anchors.horizontalCenterOffset: 0
anchors.top: txtTitle1.bottom
anchors.topMargin: 14
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 15
}
Button {
id: btnNext1
width: 40
height: 40
anchors.top: txtDesc1.top
anchors.bottomMargin: -2
anchors.bottom: txtDesc1.bottom
anchors.topMargin: -2
anchors.left: txtDesc1.right
anchors.leftMargin: 32
onClicked: vwOnboarding.currentIndex++
visible: !isLast
background: Rectangle {
id: rctNext1
color: Style.current.grey
border.width: 0
radius: 50
SVGImage {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: "img/next.svg"
width: 10
height: 10
}
}
}
}
/*##^##
Designer {
D{i:0;autoSize:true;height:600;width:800}
}
##^##*/

3
ui/onboarding/qmldir
View File

@ -1,10 +1,9 @@
ExistingKey 1.0 ExistingKey.qml
GenKey 1.0 GenKey.qml
Intro 1.0 Intro.qml
KeysMain 1.0 KeysMain.qml
Login 1.0 Login.qml
OnboardingMain 1.0 OnboardingMain.qml
Slide 1.0 Slide.qml
EnterSeedPhraseModal 1.0 EnterSeedPhraseModal.qml
CreatePasswordModal 1.0 CreatePasswordModal.qml
GenKeyModal 1.0 GenKeyModal.qml
BeforeGetStartedModal 1.0 BeforeGetStartedModal.qml

5
ui/shared/ModalPopup.qml
View File

@ -7,6 +7,7 @@ import "../imports"
Popup {
property string title
property bool noTopMargin: false
property bool displayCloseButton: true
default property alias content: popupContent.children
property alias contentWrapper: popupContent
property alias header: headerContent.children
@ -18,7 +19,8 @@ Popup {
Overlay.modal: Rectangle {
color: Qt.rgba(0, 0, 0, 0.4)
}
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
closePolicy: displayCloseButton? Popup.CloseOnEscape | Popup.CloseOnPressOutside
: Popup.NoAutoClose
parent: Overlay.overlay
x: Math.round(((parent ? parent.width : 0) - width) / 2)
y: Math.round(((parent ? parent.height : 0) - height) / 2)
@ -71,6 +73,7 @@ Popup {
Rectangle {
id: closeButton
property bool hovered: false
visible: displayCloseButton
height: 32
width: 32
anchors.top: parent.top