From bd986901c3b0e9b9cbbdf47ad5dc89dd6957ade2 Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Thu, 27 Jul 2023 13:48:52 +0200 Subject: [PATCH] feat(GODT-2767): login left pane. [skip-ci] --- .../bridge-gui/bridge-gui/Resources.qrc | 1 + .../qml/SetupWizard/LoginLeftPane.qml | 80 +++++++++++++++++++ .../qml/SetupWizard/OnboardingRightPane.qml | 15 ++-- .../qml/SetupWizard/SetupWizard.qml | 42 ++++++++-- 4 files changed, 124 insertions(+), 14 deletions(-) create mode 100644 internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index 488b8637..bc18612c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -109,6 +109,7 @@ qml/SettingsView.qml qml/SetupGuide.qml qml/SetupWizard/SetupWizard.qml + qml/SetupWizard/LoginLeftPane.qml qml/SetupWizard/OnboardingLeftPane.qml qml/SetupWizard/OnboardingRightPane.qml qml/SetupWizard/StepDescriptionBox.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml new file mode 100644 index 00000000..34dcea05 --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml @@ -0,0 +1,80 @@ +// Copyright (c) 2023 Proton AG +// This file is part of Proton Mail Bridge. +// Proton Mail Bridge is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// Proton Mail Bridge is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// You should have received a copy of the GNU General Public License +// along with Proton Mail Bridge. If not, see . +import QtQml +import QtQuick +import QtQuick.Layouts +import QtQuick.Controls +import QtQuick.Controls.impl +import "." as Proton + +Item { + id: root + + property ColorScheme colorScheme + property string description: qsTr("Let's start by signing in to your Proton account.") + + ColumnLayout { + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + spacing: 0 + + Image { + Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.preferredHeight: 72 + Layout.preferredWidth: 72 + fillMode: Image.PreserveAspectFit + source: "/qml/icons/ic-bridge.svg" + sourceSize.height: 128 + sourceSize.width: 128 + } + Label { + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 16 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: qsTr("Sign in to your Proton Account") + type: Label.LabelType.Heading + wrapMode: Text.WordWrap + } + Label { + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: true + Layout.topMargin: 96 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: description + type: Label.LabelType.Body + wrapMode: Text.WordWrap + } + Label { + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: false + Layout.topMargin: 96 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignHCenter + text: link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account")) + type: Label.LabelType.Body + + onLinkActivated: function (link) { + Qt.openUrlExternally(link); + } + + HoverHandler { + acceptedDevices: PointerDevice.Mouse + cursorShape: Qt.PointingHandCursor + } + } + } +} \ No newline at end of file diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml index 5a66de44..37880371 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingRightPane.qml @@ -22,6 +22,8 @@ Item { property ColorScheme colorScheme + signal onboardingAccepted + ColumnLayout { anchors.left: parent.left anchors.right: parent.right @@ -38,24 +40,25 @@ Item { } StepDescriptionBox { colorScheme: root.colorScheme - description: "Connect Bridge to your Proton account" + description: qsTr("Connect Bridge to your Proton account") icon: "/qml/icons/ic-bridge.svg" - title: "Step 1" iconSize: 48 + title: qsTr("Step 1") } StepDescriptionBox { colorScheme: root.colorScheme - description: "Connect your email client to Bridge" + description: qsTr("Connect your email client to Bridge") icon: "/qml/icons/img-mail-clients.svg" - title: "Step 2" iconSize: 64 - + title: qsTr("Step 2") } Button { Layout.alignment: Qt.AlignHCenter Layout.preferredWidth: 320 colorScheme: root.colorScheme - text: "Let's start" + text: qsTr("Let's start") + + onClicked: root.onboardingAccepted(); } } } \ No newline at end of file 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 a142f6ff..2327355d 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -24,6 +24,13 @@ Item { function start() { root.visible = true; + leftContent.currentIndex = 0; + rightContent.currentIndex = 0; + } + function startLogin() { + root.visible = true; + leftContent.currentIndex = 1; + rightContent.currentIndex = 1; } RowLayout { @@ -36,17 +43,27 @@ Item { Layout.fillWidth: true color: root.colorScheme.background_norm - Item { + StackLayout { id: leftContent anchors.bottom: parent.bottom anchors.bottomMargin: 96 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 96 + currentIndex: 0 width: 444 + // stack index 0 OnboardingLeftPane { - anchors.fill: parent + Layout.fillHeight: true + Layout.fillWidth: true + colorScheme: root.colorScheme + } + + // stack index 1 + LoginLeftPane { + Layout.fillHeight: true + Layout.fillWidth: true colorScheme: root.colorScheme } } @@ -55,13 +72,10 @@ Item { anchors.bottom: parent.bottom anchors.bottomMargin: 48 anchors.horizontalCenter: parent.horizontalCenter - antialiasing: true fillMode: Image.PreserveAspectFit height: 24 - smooth: true source: root.colorScheme.mail_logo_with_wordmark - sourceSize.height: 24 - sourceSize.width: 142 + mipmap: true } } Rectangle { @@ -70,18 +84,30 @@ Item { Layout.fillWidth: true color: root.colorScheme.background_weak - Item { + StackLayout { id: rightContent anchors.bottom: parent.bottom anchors.bottomMargin: 96 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 96 + currentIndex: 0 width: 444 + // stack index 0 OnboardingRightPane { - anchors.fill: parent + Layout.fillHeight: true + Layout.fillWidth: true colorScheme: root.colorScheme + + onOnboardingAccepted: root.startLogin() + } + + // stack index 1 + Rectangle { + Layout.fillHeight: true + Layout.fillWidth: true + color: "#f00" } } Label {