From 81afc5fb1fcf99599f685288d224e4b6ee403f3c Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Mon, 21 Aug 2023 09:07:48 +0200 Subject: [PATCH] feat(GODT-2772): new onboarding layout. --- .../bridge-gui/bridge-gui/qml/MainWindow.qml | 6 +-- .../bridge-gui/qml/SetupWizard/HelpButton.qml | 9 ++-- .../bridge-gui/qml/SetupWizard/LeftPane.qml | 8 +-- .../bridge-gui/qml/SetupWizard/Onboarding.qml | 17 ++----- .../qml/SetupWizard/SetupWizard.qml | 24 ++++----- .../qml/SetupWizard/StepDescriptionBox.qml | 1 + .../qml/icons/img-mail-logo-wordmark-dark.svg | 49 +++++++++++-------- .../qml/icons/img-mail-logo-wordmark.svg | 49 +++++++++++-------- 8 files changed, 86 insertions(+), 77 deletions(-) diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml index 93f3555a..38b739b4 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml @@ -28,17 +28,17 @@ ApplicationWindow { function layoutForUserCount(userCount) { if (userCount === 0) { - showLogin(); + contentLayout.currentIndex = 1; + setupWizard.showOnboarding(); return; } const u = Backend.users.get(0); if (!u) { console.trace(); - console.log("empty user"); - setupWizard.showOnboarding(); return; } if ((userCount === 1) && (u.state === EUserState.SignedOut)) { + contentLayout.currentIndex = 1; setupWizard.showLogin(u.primaryEmailOrUsername()); } } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml index b0c241ea..1d9ac95c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml @@ -23,14 +23,15 @@ Button { property var wizard anchors.bottom: parent.bottom - anchors.bottomMargin: 24 + anchors.bottomMargin: 32 anchors.right: parent.right - anchors.rightMargin: 24 + anchors.rightMargin: 32 colorScheme: wizard.colorScheme - height: 36 horizontalPadding: 0 icon.source: "/qml/icons/ic-question-circle.svg" - width: 36 + icon.height: 24 + icon.width: 24 + verticalPadding: 0 onClicked: { menu.popup(-menu.width + root.width, -menu.height); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml index 8edd5842..011078d2 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -100,8 +100,8 @@ Item { ColumnLayout { anchors.left: parent.left anchors.right: parent.right - anchors.top: parent.top - spacing: 0 + anchors.verticalCenter: parent.verticalCenter + spacing: 16 Image { id: icon @@ -117,7 +117,6 @@ Item { id: titleLabel Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true - Layout.topMargin: 16 colorScheme: wizard.colorScheme horizontalAlignment: Text.AlignHCenter text: "" @@ -128,7 +127,6 @@ Item { id: descriptionLabel Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true - Layout.topMargin: 96 colorScheme: wizard.colorScheme horizontalAlignment: Text.AlignHCenter text: "" @@ -138,14 +136,12 @@ Item { LinkLabel { id: linkLabel1 Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 96 colorScheme: wizard.colorScheme visible: (text !== "") } LinkLabel { id: linkLabel2 Layout.alignment: Qt.AlignHCenter - Layout.topMargin: 16 colorScheme: wizard.colorScheme visible: (text !== "") } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml index 5338cceb..bebe474c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Onboarding.qml @@ -19,23 +19,14 @@ import "." as Proton Item { id: root - property var wizard ColumnLayout { anchors.left: parent.left anchors.right: parent.right - anchors.top: parent.top - spacing: 96 + anchors.verticalCenter: parent.verticalCenter + spacing: 24 - Label { - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: true - colorScheme: wizard.colorScheme - horizontalAlignment: Text.AlignHCenter - text: qsTr("Two-step process") - type: Label.LabelType.Heading - } StepDescriptionBox { colorScheme: wizard.colorScheme description: qsTr("Connect Bridge to your Proton account") @@ -47,14 +38,14 @@ Item { colorScheme: wizard.colorScheme description: qsTr("Connect your email client to Bridge") icon: "/qml/icons/img-mail-clients.svg" - iconSize: 64 + iconSize: 48 title: qsTr("Step 2") } Button { Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true colorScheme: wizard.colorScheme - text: qsTr("Let's start") + text: qsTr("Start setup") onClicked: wizard.showLogin() } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml index 0b0718d6..37658dbf 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -105,6 +105,8 @@ Item { } function showOnboarding() { rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView; + root.address = "" + root.user = null leftContent.showOnboarding(); rightContent.currentIndex = SetupWizard.ContentStack.Onboarding; } @@ -146,23 +148,23 @@ Item { LeftPane { id: leftContent anchors.bottom: parent.bottom - anchors.bottomMargin: 96 + anchors.bottomMargin: 92 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - anchors.topMargin: 96 + anchors.topMargin: 40 clip: true - width: 444 + width: 364 wizard: root } Image { id: mailLogoWithWordmark anchors.bottom: parent.bottom - anchors.bottomMargin: 48 + anchors.bottomMargin: 40 anchors.horizontalCenter: parent.horizontalCenter - height: 24 - width: 136 - sourceSize.height: 24 - sourceSize.width: 136 + height: 36 + width: 134 + sourceSize.height: 36 + sourceSize.width: 134 source: root.colorScheme.mail_logo_with_wordmark } } @@ -175,13 +177,13 @@ Item { StackLayout { id: rightContent anchors.bottom: parent.bottom - anchors.bottomMargin: 96 + anchors.bottomMargin: 92 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top - anchors.topMargin: 96 + anchors.topMargin: 40 clip: true currentIndex: 0 - width: 444 + width: 364 // rightContent stack index 0 Onboarding { diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml index f76962b7..ff4bf37f 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/StepDescriptionBox.qml @@ -59,6 +59,7 @@ Item { Layout.fillWidth: true colorScheme: root.colorScheme text: root.description + color: root.colorScheme.text_weak type: Label.LabelType.Body verticalAlignment: Text.AlignTop } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark-dark.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark-dark.svg index b1d4e727..8e9e0d41 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark-dark.svg +++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark-dark.svg @@ -1,25 +1,34 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - + + + - - - + + + + + + + + + + diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark.svg index 76b55db8..30212b3c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark.svg +++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-mail-logo-wordmark.svg @@ -1,25 +1,34 @@ - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - + + + - - - + + + + + + + + + +