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