From 009861c7b40db6d5676da0da1bfb5e7a69a284e9 Mon Sep 17 00:00:00 2001 From: Alex Jbanca Date: Wed, 15 Feb 2023 10:27:18 +0200 Subject: [PATCH] fix(SplashScreen): Add Did You Know Splash screen Closing #9470 Adding Did You Know Splash Screen that will be shown when AppMain is completed. The SplashScreen runs for 30 seconds and will randomly iterate through `fun messages` every 5 seconds. --- src/app/global/local_app_settings.nim | 17 +++- storybook/PagesModel.qml | 4 + storybook/figma.json | 3 + .../pages/DidYouKnowSplashScreenPage.qml | 37 ++++++++ .../Profile/stores/AdvancedStore.qml | 10 ++- .../AppLayouts/Profile/views/AdvancedView.qml | 11 +++ ui/app/mainui/AppMain.qml | 2 +- .../shared/panels/DidYouKnowSplashScreen.qml | 85 ++++++++++++++++++ .../panels/private/DidYouKnowMessages.qml | 88 +++++++++++++++++++ ui/imports/shared/panels/private/qmldir | 1 + ui/imports/shared/panels/qmldir | 1 + ui/main.qml | 18 +++- 12 files changed, 271 insertions(+), 6 deletions(-) create mode 100644 storybook/pages/DidYouKnowSplashScreenPage.qml create mode 100644 ui/imports/shared/panels/DidYouKnowSplashScreen.qml create mode 100644 ui/imports/shared/panels/private/DidYouKnowMessages.qml create mode 100644 ui/imports/shared/panels/private/qmldir diff --git a/src/app/global/local_app_settings.nim b/src/app/global/local_app_settings.nim index 1b3342836d..dbd39f1c96 100644 --- a/src/app/global/local_app_settings.nim +++ b/src/app/global/local_app_settings.nim @@ -10,6 +10,8 @@ const DEFAULT_THEME = 2 #system theme, from qml const LAS_KEY_GEOMETRY = "global/app_geometry" const LAS_KEY_VISIBILITY = "global/app_visibility" const DEFAULT_VISIBILITY = 2 #windowed visibility, from qml +const LAS_KEY_FAKE_LOADING_SCREEN_ENABLED = "global/fake_loading_screen" +const DEFAULT_FAKE_LOADING_SCREEN_ENABLED = defined(production) and (not existsEnv(TEST_ENVIRONMENT_VAR)) #enabled in production, disabled in development and e2e tests QtObject: type LocalAppSettings* = ref object of QObject @@ -99,4 +101,17 @@ QtObject: return existsEnv(TEST_ENVIRONMENT_VAR) QtProperty[bool] testEnvironment: - read = getTestEnvironment \ No newline at end of file + read = getTestEnvironment + + proc fakeLoadingScreenEnabledChanged*(self: LocalAppSettings) {.signal.} + proc getFakeLoadingScreenEnabled*(self: LocalAppSettings): bool {.slot.} = + self.settings.value(LAS_KEY_FAKE_LOADING_SCREEN_ENABLED, newQVariant(DEFAULT_FAKE_LOADING_SCREEN_ENABLED)).boolVal + + proc setFakeLoadingScreenEnabled*(self: LocalAppSettings, enabled: bool) {.slot.} = + self.settings.setValue(LAS_KEY_FAKE_LOADING_SCREEN_ENABLED, newQVariant(enabled)) + self.fakeLoadingScreenEnabledChanged() + + QtProperty[bool] fakeLoadingScreenEnabled: + read = getFakeLoadingScreenEnabled + write = setFakeLoadingScreenEnabled + notify = fakeLoadingScreenEnabledChanged diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index d6d781aa63..88bbb0c0a8 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -69,6 +69,10 @@ ListModel { title: "JoinPermissionsOverlayPanel" section: "Panels" } + ListElement { + title: "DidYouKnowSplashScreen" + section: "Panels" + } ListElement { title: "InviteFriendsToCommunityPopup" section: "Popups" diff --git a/storybook/figma.json b/storybook/figma.json index aa0294e5d7..04178699b1 100644 --- a/storybook/figma.json +++ b/storybook/figma.json @@ -98,5 +98,8 @@ "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A317901&t=05yQWHWBWOs2DUTp-0", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2698%3A380426&t=UOvsb3QLi26KmVrk-0", "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2365%3A291788&t=UOvsb3QLi26KmVrk-0" + ], + "DidYouKnowSplashScreen": [ + "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba⎜Desktop?node-id=25878%3A518438&t=C7xTpNib38t7s7XU-4" ] } diff --git a/storybook/pages/DidYouKnowSplashScreenPage.qml b/storybook/pages/DidYouKnowSplashScreenPage.qml new file mode 100644 index 0000000000..1fd127c48e --- /dev/null +++ b/storybook/pages/DidYouKnowSplashScreenPage.qml @@ -0,0 +1,37 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +import Storybook 1.0 + +import utils 1.0 +import mainui 1.0 +import shared.panels 1.0 + +SplitView { + Logs { id: logs } + SplitView { + SplitView.fillHeight: true + SplitView.fillWidth: true + orientation: Qt.Vertical + DidYouKnowSplashScreen { + SplitView.fillHeight: true + SplitView.fillWidth: true + NumberAnimation on progress { from: 0.0; to: 1; duration: 10000; loops: Animation.Infinite} + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.minimumHeight: 100 + SplitView.preferredHeight: 200 + + logsView.logText: logs.logText + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + } + +} diff --git a/ui/app/AppLayouts/Profile/stores/AdvancedStore.qml b/ui/app/AppLayouts/Profile/stores/AdvancedStore.qml index 7d4295e8f6..f75b2e8839 100644 --- a/ui/app/AppLayouts/Profile/stores/AdvancedStore.qml +++ b/ui/app/AppLayouts/Profile/stores/AdvancedStore.qml @@ -1,4 +1,4 @@ -import QtQuick 2.13 +import QtQuick 2.15 import utils 1.0 QtObject { @@ -22,6 +22,7 @@ QtObject { root.fleet === Constants.status_test || root.fleet === Constants.status_prod + readonly property bool isFakeLoadingScreenEnabled: localAppSettings.fakeLoadingScreenEnabled ?? false readonly property QtObject experimentalFeatures: QtObject { readonly property string wallet: "wallet" readonly property string browser: "browser" @@ -142,4 +143,11 @@ QtObject { localAccountSensitiveSettings.isCommunityTokensEnabled = !localAccountSensitiveSettings.isCommunityTokensEnabled } } + + function toggleFakeLoadingScreen() { + if(!localAppSettings) + return + + localAppSettings.fakeLoadingScreenEnabled = !localAppSettings.fakeLoadingScreenEnabled + } } diff --git a/ui/app/AppLayouts/Profile/views/AdvancedView.qml b/ui/app/AppLayouts/Profile/views/AdvancedView.qml index 49ca2979b8..339ecb37a9 100644 --- a/ui/app/AppLayouts/Profile/views/AdvancedView.qml +++ b/ui/app/AppLayouts/Profile/views/AdvancedView.qml @@ -455,6 +455,17 @@ SettingsContentBase { Global.openPopup(enableAutoMessageConfirmationDialogComponent) } } + + StatusSettingsLineButton { + anchors.leftMargin: 0 + anchors.rightMargin: 0 + text: qsTr("Fake loading screen") + isSwitch: true + switchChecked: root.advancedStore.isFakeLoadingScreenEnabled + onClicked: { + root.advancedStore.toggleFakeLoadingScreen() + } + } } FleetsModal { diff --git a/ui/app/mainui/AppMain.qml b/ui/app/mainui/AppMain.qml index 8fb9ac72f4..04e687764d 100644 --- a/ui/app/mainui/AppMain.qml +++ b/ui/app/mainui/AppMain.qml @@ -1,4 +1,4 @@ -import QtQuick 2.13 +import QtQuick 2.15 import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import QtMultimedia 5.13 diff --git a/ui/imports/shared/panels/DidYouKnowSplashScreen.qml b/ui/imports/shared/panels/DidYouKnowSplashScreen.qml new file mode 100644 index 0000000000..c24bbdb074 --- /dev/null +++ b/ui/imports/shared/panels/DidYouKnowSplashScreen.qml @@ -0,0 +1,85 @@ +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import QtQml 2.15 + +import StatusQ.Core.Theme 0.1 +import StatusQ.Core 0.1 +import StatusQ.Controls 0.1 + +import utils 1.0 +import mainui 1.0 +import shared.panels.private 1.0 + +Pane { + id: root + property alias progress: progressBar.value + + contentItem: Item { + SplashScreen { + id: splashScreen + anchors.centerIn: parent + width: 128 + height: 128 + } + ColumnLayout { + id: content + anchors.top: splashScreen.bottom + anchors.bottom: parent.bottom + width: parent.width + visible: root.progress != 0 + Item { + Layout.fillHeight: true + } + StatusBaseText { + id: didYouKnow + Layout.alignment: Qt.AlignHCenter + Layout.bottomMargin: 12 + color: Theme.palette.primaryColor1 + font.weight: Font.DemiBold + font.pixelSize: Style.current.asideTextFontSize + text: qsTr("DID YOU KNOW?") + } + StatusBaseText { + id: didYouKnowText + Layout.alignment: Qt.AlignHCenter + Layout.preferredHeight: 60 + Layout.preferredWidth: 520 + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + color: Theme.palette.directColor1 + font.pixelSize: Style.current.additionalTextSize + text: didYouKnowMessages.iterator.next() + Behavior on text { + SequentialAnimation { + NumberAnimation { target: didYouKnowText; properties: "opacity"; duration: 150; to: 0 } //fade out + PropertyAction { } //change text + NumberAnimation { target: didYouKnowText; properties: "opacity"; duration: 150; to: 1; }//fade in + } + } + DidYouKnowMessages { + id: didYouKnowMessages + } + Timer { + id: didYouKnowTimer + interval: 5000 + repeat: true + running: didYouKnowText.visible + onTriggered: didYouKnowText.text = didYouKnowMessages.iterator.next() + } + } + + StatusProgressBar { + id: progressBar + Layout.alignment: Qt.AlignHCenter + Layout.preferredWidth: 200 + Layout.preferredHeight: 4 + Layout.bottomMargin: 100 + fillColor: Theme.palette.primaryColor1 + } + } + } + background: Rectangle { + color: Style.current.background + } +} diff --git a/ui/imports/shared/panels/private/DidYouKnowMessages.qml b/ui/imports/shared/panels/private/DidYouKnowMessages.qml new file mode 100644 index 0000000000..c789adeb5d --- /dev/null +++ b/ui/imports/shared/panels/private/DidYouKnowMessages.qml @@ -0,0 +1,88 @@ +import QtQuick 2.15 +import QtQml 2.15 + +QtObject { + readonly property var iterator: getIterator() + readonly property var messages: [ + [ + qsTr("Status messenger is the most secure fully decentralised messenger in the world"), + qsTr("Status gives you full metadata privacy - it’s impossible to tell who you are chatting with by surveilling your internet traffic"), + qsTr("Status is truly private - none of your personal details (or any other information) are sent to us"), + qsTr("Messages sent using Status are end to end encrypted and can only be opened by the recipient"), + qsTr("Status uses the Waku p2p gossip messaging protocol — an evolution of the Ethereum Foundation’s original Whisper protocol"), + qsTr("Status is home to crypto’s leading multi-chain self-custodial wallet"), + qsTr("Status removes intermediaries to keep your messages private and your assets secure"), + qsTr("Status uses the latest encryption and security tools to secure your messages and transactions"), + qsTr("Status enables pseudo-anonymous interaction with Web3, DeFi, and society in general"), + qsTr("The Status Network token (SNT) is a modular utility token that fuels the Status network"), + qsTr("Your cryptographic keypair encrypts all of your messages which can only be unlocked by the intended recipient"), + qsTr("Status’ Web3 browser requires all DApps to ask permission before connecting to your wallet"), + qsTr("Your non-custodial wallet gives you full control over your funds without the use of a server"), + qsTr("Status is decentralized and serverless - chat, transact, and browse without surveillance, censorship, or data leakage"), + qsTr("Status is just open source software that provides a window into p2p networks, Status itself doesn’t provide any services"), + qsTr("Status is a way to access p2p networks that are permissionlessly created and run by individuals around the world."), + ], + [ + qsTr("Our 10 core principles include liberty, security, transparency, censorship resistance and inclusivity"), + qsTr("Status believes in freedom, and in maximizing the individual freedom of our users"), + qsTr("Status is designed and built to protect the sovereignty of individuals"), + qsTr("Status aims to protect the right to private, secure conversations, and the freedom to associate and collaborate"), + qsTr("One of our core aims is to maximize social, political, and economic freedoms"), + qsTr("Status abides by the cryptoeconomic design principle of censorship resistance"), + qsTr("Status is a public good. It is made available via the MIT liberal open source license, for anyone to share, modify and benefit from."), + qsTr("Status supports free communication without the approval or oversight of big tech"), + qsTr("Status allows you to communicate freely without the threat of surveillance"), + qsTr("Status supports free speech. Using p2p networks prevents us, or anyone else, from censoring you"), + ], + [ + qsTr("Status is entirely open source and made by contributors all over the world"), + qsTr("Status is a globally distributed team of 150+ specialist core contributors"), + qsTr("Our team of core contributors work remotely from over 50+ countries spread across 6 continents"), + qsTr("The only continent that doesn’t (yet!) have any Status core contributors is Antarctica"), + qsTr("We are the 5th most active crypto project on github"), + qsTr("We are dedicated to transitioning our governance model to being decentralised and autonomous"), + qsTr("Status core-contributors use Status as their primary communication tool"), + ], + [ + qsTr("Status was co-founded by Jarrad Hope and Carl Bennetts"), + qsTr("Status was created to ease the transition to a more open mobile internet"), + qsTr("Status aims to help anyone, anywhere, interact with Ethereum, requiring no more than a phone"), + qsTr("Status is one of the top funded projects in crypto, raising $100m in their ICO for SNT in 2017"), + ], + [ + qsTr("Your mobile company, and government are able to see the contents of all your private SMS messages"), + qsTr("Because (unlike Status) other messengers with e2e encryption don’t have metadata privacy, your internet provider and government can tell who you are messaging with."), + ], + [ + qsTr("Help to translate Status into your native language see https://translate.status.im for more info"), + qsTr("By storing your private keys offline on Keycard, you can add hardware-enforced authorizations to your transactions."), + qsTr("By using Keycard, you can ensure your funds are safe even if your phone is stolen"), + qsTr("You can enhance security by using Keycard + PIN entry as two-factor authentication"), + ], + [ + qsTr("Status is currently working on a multi-chain wallet which will allow quick and easy multi-chain txns."), + qsTr("The new Status mobile app is being actively developed and is earmarked for release in 2023"), + qsTr("The all new Status desktop app is being actively developed and is earmarked for release in 2023"), + qsTr("Status also builds the Nimbus Ethereum consensus, execution and light clients"), + qsTr("Status’s Nimbus team is collaborating with the Ethereum Foundation to create the Portal Network"), + qsTr("Status’s Portal Network client (called Fluffy) means Status users will be able to interact with Ethereum without using a centeralised endpoint like Infura"), + qsTr("We are currently working hard on a tool that will enable you to easily import an existing Telegram or Discord group chat community into Status."), + ] + ] + + //provides a way to randomly iterate through the messages + function getIterator() { + let categoryIndex = 0 + return { + next: function() { + if (categoryIndex == messages.length -1) { + categoryIndex = 0 + } else { + categoryIndex++ + } + let messageArray = messages[categoryIndex] + return messageArray[Math.floor(Math.random() * messageArray.length)] + } + } + } +} \ No newline at end of file diff --git a/ui/imports/shared/panels/private/qmldir b/ui/imports/shared/panels/private/qmldir new file mode 100644 index 0000000000..44dc7e61c2 --- /dev/null +++ b/ui/imports/shared/panels/private/qmldir @@ -0,0 +1 @@ +DidYouKnowMessages 1.0 DidYouKnowMessages.qml \ No newline at end of file diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir index a4d6c2e66d..33c167f636 100644 --- a/ui/imports/shared/panels/qmldir +++ b/ui/imports/shared/panels/qmldir @@ -22,3 +22,4 @@ EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml StatusAssetSelector 1.0 StatusAssetSelector.qml AcceptRejectOptionsButtonsPanel 1.0 AcceptRejectOptionsButtonsPanel.qml +DidYouKnowSplashScreen 1.0 DidYouKnowSplashScreen.qml \ No newline at end of file diff --git a/ui/main.qml b/ui/main.qml index f65c9cfc15..e1dc558dec 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -156,11 +156,14 @@ StatusWindow { startupOnboarding.visible = true } else if(state === Constants.appState.appLoading) { - loader.sourceComponent = appLoadingAnimation + loader.sourceComponent = undefined + appLoadingAnimation.active = true startupOnboarding.visible = false } else if(state === Constants.appState.main) { // We set main module to the Global singleton once user is logged in and we move to the main app. + appLoadingAnimation.active = localAppSettings && localAppSettings.fakeLoadingScreenEnabled + appLoadingAnimation.runningProgressAnimation = localAppSettings && localAppSettings.fakeLoadingScreenEnabled Global.userProfile = userProfile loader.sourceComponent = app @@ -315,10 +318,19 @@ StatusWindow { } } - Component { + Loader { id: appLoadingAnimation - SplashScreen { + property bool runningProgressAnimation: false + anchors.fill: parent + active: false + sourceComponent: DidYouKnowSplashScreen { objectName: "splashScreen" + NumberAnimation on progress { from: 0.0; to: 1; duration: 30000; running: runningProgressAnimation } + onProgressChanged: { + if (progress === 1) { + appLoadingAnimation.active = false + } + } } }