forked from Silverfish/proton-bridge
feat(GODT-2767): login left pane. [skip-ci]
This commit is contained in:
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user