From d3290bde02523f8cac81755e8c1456dfecc0f9db Mon Sep 17 00:00:00 2001 From: Sale Djenic Date: Mon, 28 Jun 2021 13:11:54 +0200 Subject: [PATCH] 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 --- ui/main.qml | 20 +--- ui/nim-status-client.pro | 2 - ui/onboarding/BeforeGetStartedModal.qml | 97 +++++++++++++++++ ui/onboarding/Intro.qml | 137 ------------------------ ui/onboarding/KeysMain.qml | 10 ++ ui/onboarding/Slide.qml | 119 -------------------- ui/onboarding/qmldir | 3 +- ui/shared/ModalPopup.qml | 5 +- 8 files changed, 116 insertions(+), 277 deletions(-) create mode 100644 ui/onboarding/BeforeGetStartedModal.qml delete mode 100644 ui/onboarding/Intro.qml delete mode 100644 ui/onboarding/Slide.qml diff --git a/ui/main.qml b/ui/main.qml index f5ba139d74..b090424f63 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -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) { diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 870ca9b325..3eeee0e01e 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -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 \ diff --git a/ui/onboarding/BeforeGetStartedModal.qml b/ui/onboarding/BeforeGetStartedModal.qml new file mode 100644 index 0000000000..18c363f434 --- /dev/null +++ b/ui/onboarding/BeforeGetStartedModal.qml @@ -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() + } + } +} diff --git a/ui/onboarding/Intro.qml b/ui/onboarding/Intro.qml deleted file mode 100644 index 3f5ff53b23..0000000000 --- a/ui/onboarding/Intro.qml +++ /dev/null @@ -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} -} -##^##*/ diff --git a/ui/onboarding/KeysMain.qml b/ui/onboarding/KeysMain.qml index 204c32c5fd..0e21841e00 100644 --- a/ui/onboarding/KeysMain.qml +++ b/ui/onboarding/KeysMain.qml @@ -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 diff --git a/ui/onboarding/Slide.qml b/ui/onboarding/Slide.qml deleted file mode 100644 index 22fc6a574f..0000000000 --- a/ui/onboarding/Slide.qml +++ /dev/null @@ -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} -} -##^##*/ diff --git a/ui/onboarding/qmldir b/ui/onboarding/qmldir index 83a2ef7b93..1f2985b609 100644 --- a/ui/onboarding/qmldir +++ b/ui/onboarding/qmldir @@ -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 diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml index 7c8a7056cb..d8a6454778 100644 --- a/ui/shared/ModalPopup.qml +++ b/ui/shared/ModalPopup.qml @@ -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