feat(GODT-2767): login left pane. [skip-ci]

This commit is contained in:
Xavier Michelon
2023-07-27 13:48:52 +02:00
parent cdc19492ee
commit bd986901c3
4 changed files with 124 additions and 14 deletions

View File

@ -109,6 +109,7 @@
<file>qml/SettingsView.qml</file>
<file>qml/SetupGuide.qml</file>
<file>qml/SetupWizard/SetupWizard.qml</file>
<file>qml/SetupWizard/LoginLeftPane.qml</file>
<file>qml/SetupWizard/OnboardingLeftPane.qml</file>
<file>qml/SetupWizard/OnboardingRightPane.qml</file>
<file>qml/SetupWizard/StepDescriptionBox.qml</file>

View File

@ -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 <https://www.gnu.org/licenses/>.
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
}
}
}
}

View File

@ -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();
}
}
}

View File

@ -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 {