Silverfish/proton-bridge
1
0
Fork 1
mirror of https://github.com/ProtonMail/proton-bridge.git synced 2025-12-10 04:36:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(GODT-2767): unified left pane + client config left pane. [skip-ci]

Browse Source
This commit is contained in:
Xavier Michelon
2023-08-04 09:59:06 +02:00
parent dd5e745e37
commit 0fc41d1966
8 changed files with 243 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
internal/frontend/bridge-gui/bridge-gui/Resources.qrc
View File

@ -75,6 +75,7 @@
<file alias="bridgeMacOS.svg">../../../../dist/bridgeMacOS.svg</file>
<file>qml/KeychainSettings.qml</file>
<file>qml/LocalCacheSettings.qml</file>
<file>qml/LinkLabel.qml</file>
<file>qml/MainWindow.qml</file>
<file>qml/NotificationDialog.qml</file>
<file>qml/NotificationPopups.qml</file>
@ -108,10 +109,10 @@
<file>qml/SettingsItem.qml</file>
<file>qml/SettingsView.qml</file>
<file>qml/SetupGuide.qml</file>
<file>qml/SetupWizard/LeftPane.qml</file>
<file>qml/SetupWizard/ClientConfigSelector.qml</file>
<file>qml/SetupWizard/SetupWizard.qml</file>
<file>qml/SetupWizard/LoginLeftPane.qml</file>
<file>qml/SetupWizard/LoginRightPane.qml</file>
<file>qml/SetupWizard/OnboardingLeftPane.qml</file>
<file>qml/SetupWizard/OnboardingRightPane.qml</file>
<file>qml/SetupWizard/StepDescriptionBox.qml</file>
<file>qml/SignIn.qml</file>

41
internal/frontend/bridge-gui/bridge-gui/qml/LinkLabel.qml Normal file
View File

@ -0,0 +1,41 @@
// 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
Label {
id: root
property string linkText
property string linkURL
text: link(linkURL, linkText)
type: Label.LabelType.Body
onLinkActivated: function (link) {
// if the link is "#", the user is indicating he will provide its own link activation handler.
if (link !== "#") {
Qt.openUrlExternally(link);
}
}
HoverHandler {
acceptedDevices: PointerDevice.Mouse
cursorShape: Qt.PointingHandCursor
enabled: true
}
}

10
internal/frontend/bridge-gui/bridge-gui/qml/MainWindow.qml
View File

@ -95,11 +95,11 @@ ApplicationWindow {
}
Connections {
function onLoginFinished(index, wasSignedOut) {
const user = Backend.users.get(index);
if (user && !wasSignedOut) {
root.showSetup(user, user.addresses[0]);
}
console.debug("Login finished", index);
// const user = Backend.users.get(index);
// if (user && !wasSignedOut) {
// root.showSetup(user, user.addresses[0]);
// }
// console.debug("Login finished", index);
}
function onSelectUser(userID, forceShowWindow) {
contentWrapper.selectUser(userID);

24
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml Normal file
View File

@ -0,0 +1,24 @@
// 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 Proton
Rectangle {
id: root
property ColorScheme colorScheme
color: "#ff9900"
}

147
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml Normal file
View File

@ -0,0 +1,147 @@
// 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
import ".."
Item {
id: root
property ColorScheme colorScheme
function showLogin2FA() {
descriptionLabel.text = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.");
linkLabel1.linkText = "";
linkLabel1.linkURL = "";
linkLabel2.linkText = "";
linkLabel2.linkURL = "";
showLoginCommon();
}
function showClientSelector() {
titleLabel.text = qsTr("Configure your email client");
descriptionLabel.text = qsTr("Bridge is now connected to Proton, and has already started downloading your messages. Let’s now connect your email client to Bridge.");
linkLabel1.linkText = qsTr("Why do");
linkLabel1.linkURL = "https://proton.me";
linkLabel2.linkText = qsTr("I need");
linkLabel2.linkURL = "https://proton.me";
icon.source = "/qml/icons/img-mail-clients.svg";
icon.sourceSize.height = 128;
icon.sourceSize.width = 128;
Layout.preferredHeight = 72;
Layout.preferredWidth = 72;
}
function showLoginCommon() {
titleLabel.text = qsTr("Sign in to your Proton Account");
icon.Layout.preferredHeight = 72;
icon.Layout.preferredWidth = 72;
icon.source = "/qml/icons/ic-bridge.svg";
icon.sourceSize.height = 128;
icon.sourceSize.width = 128;
}
function showLoginMailboxPassword() {
root.description = qsTr("You have secured your account with a separate mailbox password.");
linkLabel1.linkText = "";
linkLabel1.linkURL = "";
linkLabel2.linkText = "";
linkLabel2.linkURL = "";
showLoginCommon();
}
function showOnboarding() {
titleLabel.text = qsTr("Welcome to\nProton Mail Bridge");
descriptionLabel.text = qsTr("Bridge is the gateway between your Proton account and your email client. It runs in the background and encrypts and decrypts your messages seamlessly. ");
linkLabel1.linkText = qsTr("Why do I need Bridge?");
linkLabel1.linkURL = "https://proton.me/support/bridge";
linkLabel2.linkText = "";
linkLabel2.linkURL = "";
icon.Layout.preferredHeight = 148;
icon.Layout.preferredWidth = 265;
icon.source = "/qml/icons/img-welcome.svg";
icon.sourceSize.height = 148;
icon.sourceSize.width = 265;
}
function showLogin() {
descriptionLabel.text = qsTr("Let's start by signing in to your Proton account.");
linkLabel1.linkText = qsTr("Create or upgrade your account");
linkLabel1.linkURL = "https://proton.me/mail/pricing";
linkLabel2.linkText = "";
linkLabel2.linkURL = "";
showLoginCommon();
}
Connections {
function onLogin2FARequested() {
showLogin2FA();
}
function onLogin2PasswordRequested() {
showLoginMailboxPassword();
}
target: Backend
}
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
spacing: 0
Image {
id: icon
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.preferredHeight: 72
Layout.preferredWidth: 72
fillMode: Image.PreserveAspectFit
source: ""
sourceSize.height: 72
sourceSize.width: 72
}
Label {
id: titleLabel
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: 16
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: ""
type: Label.LabelType.Heading
wrapMode: Text.WordWrap
}
Label {
id: descriptionLabel
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: 96
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: ""
type: Label.LabelType.Body
wrapMode: Text.WordWrap
}
LinkLabel {
id: linkLabel1
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 96
colorScheme: root.colorScheme
visible: (text !== "")
}
LinkLabel {
id: linkLabel2
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: 16
colorScheme: root.colorScheme
visible: (text !== "")
}
}
}

108
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LoginLeftPane.qml
View File

@ -1,108 +0,0 @@
// 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: ""
property string helpLink: ""
function show2FA() {
root.description = qsTr("You have enabled two-factor authentication. Please enter the 6-digit code provided by your authenticator application.");
root.helpLink = "";
}
function showMailboxPassword() {
root.description = qsTr("You have secured your account with a separate mailbox password. ");
root.helpLink = "";
}
function showSignIn() {
root.description = qsTr("Let's start by signing in to your Proton account.");
root.helpLink = linkLabel.link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account"));
}
Connections {
function onLogin2FARequested() {
show2FA();
}
function onLogin2PasswordRequested() {
showMailboxPassword();
}
target: Backend
}
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 {
id: linkLabel
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: false
Layout.topMargin: 96
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: root.helpLink
type: Label.LabelType.Body
visible: {
root.helpLink !== "";
}
onLinkActivated: function (link) {
Qt.openUrlExternally(link);
}
HoverHandler {
acceptedDevices: PointerDevice.Mouse
cursorShape: Qt.PointingHandCursor
}
}
}
}

78
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml
View File

@ -1,78 +0,0 @@
// 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
ColumnLayout {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
spacing: 0
Image {
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.preferredHeight: 148
Layout.preferredWidth: 265
antialiasing: true
source: "/qml/icons/img-welcome.svg"
sourceSize.height: 148
sourceSize.width: 265
}
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: 16
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: qsTr("Welcome to\nProton Mail Bridge")
type: Label.LabelType.Heading
}
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.topMargin: 96
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: qsTr("Bridge is the gateway between your Proton account and your email client. It runs in the background and encrypts and decrypts your messages seamlessly. ")
type: Label.LabelType.Body
wrapMode: Text.WordWrap
}
Label {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: false
Layout.topMargin: 48
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignHCenter
text: link("https://proton.me/support/bridge", qsTr("Why do I need Bridge?"))
type: Label.LabelType.Body
onLinkActivated: function (link) {
Qt.openUrlExternally(link);
}
HoverHandler {
acceptedDevices: PointerDevice.Mouse
cursorShape: Qt.PointingHandCursor
}
}
}
}

52
internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml
View File

@ -16,6 +16,7 @@ import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.impl
import "." as Proton
import ".."
Item {
id: root
@ -27,20 +28,24 @@ Item {
}
function start() {
root.visible = true;
leftContent.currentIndex = 0;
leftContent.showOnboarding();
rightContent.currentIndex = 0;
}
function startClientConfig() {
root.visible = true;
leftContent.showClientSelector();
rightContent.currentIndex = 2;
}
function startLogin() {
root.visible = true;
leftContent.currentIndex = 1;
leftContent.showLogin();
rightContent.currentIndex = 1;
loginLeftPane.showSignIn();
loginRightPane.reset(true);
}
Connections {
function onLoginFinished() {
root.closeWizard();
startClientConfig();
}
target: Backend
@ -55,7 +60,7 @@ Item {
Layout.fillWidth: true
color: root.colorScheme.background_norm
StackLayout {
LeftPane {
id: leftContent
anchors.bottom: parent.bottom
anchors.bottomMargin: 96
@ -63,23 +68,8 @@ Item {
anchors.top: parent.top
anchors.topMargin: 96
clip: true
currentIndex: 0
colorScheme: root.colorScheme
width: 444
// stack index 0
OnboardingLeftPane {
Layout.fillHeight: true
Layout.fillWidth: true
colorScheme: root.colorScheme
}
// stack index 1
LoginLeftPane {
id: loginLeftPane
Layout.fillHeight: true
Layout.fillWidth: true
colorScheme: root.colorScheme
}
}
Image {
id: mailLogoWithWordmark
@ -105,8 +95,8 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 96
currentIndex: 0
clip: true
currentIndex: 0
width: 444
// stack index 0
@ -129,26 +119,30 @@ Item {
root.closeWizard();
}
}
// stack index 2
ClientConfigSelector {
id: clientCOnfigSelector
Layout.fillHeight: true
Layout.fillWidth: true
colorScheme: root.colorScheme
}
}
Label {
LinkLabel {
id: reportProblemLink
anchors.bottom: parent.bottom
anchors.bottomMargin: 48
anchors.horizontalCenter: parent.horizontalCenter
colorScheme: root.colorScheme
horizontalAlignment: Text.AlignRight
text: link("#", "Report problem")
linkText: qsTr("Report problem")
linkURL: "#"
width: 444
onLinkActivated: {
root.visible = false;
}
HoverHandler {
id: mouse
acceptedDevices: PointerDevice.Mouse
cursorShape: Qt.PointingHandCursor
}
}
}
}