diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index d3eca851..e7444c81 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -55,9 +55,6 @@ qml/icons/img-proton-logos.svg qml/icons/img-splash.png qml/icons/img-splash.svg - qml/icons/img-welcome-dark.png - qml/icons/img-welcome-dark.svg - qml/icons/img-welcome.png qml/icons/img-welcome.svg qml/icons/Loader_16.svg qml/icons/Loader_48.svg @@ -110,6 +107,7 @@ qml/SettingsView.qml qml/SetupGuide.qml qml/SetupWizard/SetupWizard.qml + qml/SetupWizard/OnboardingLeftPane.qml qml/SignIn.qml qml/ConnectionModeSettings.qml qml/SplashScreen.qml diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/ColorScheme.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/ColorScheme.qml index 146d5cfd..b9f27354 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/ColorScheme.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/ColorScheme.qml @@ -83,7 +83,4 @@ QtObject { // Text property color text_norm property color text_weak - - // Images - property string welcome_img } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml index 77df2eae..bf1561ce 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Style.qml @@ -106,9 +106,6 @@ QtObject { // Text text_norm: "#FFFFFF" text_weak: "#A7A4B5" - - // Images - welcome_img: "/qml/icons/img-welcome-dark.png" } property ColorScheme darkStyle: ColorScheme { id: _darkStyle @@ -180,9 +177,6 @@ QtObject { // Text text_norm: "#FFFFFF" text_weak: "#A7A4B5" - - // Images - welcome_img: "/qml/icons/img-welcome-dark.png" } property real dialog_radius: 12 * root.px // px property int fontWeight_100: Font.Thin @@ -281,9 +275,6 @@ QtObject { // Text text_norm: "#FFFFFF" text_weak: "#9282D4" - - // Images - welcome_img: "/qml/icons/img-welcome-dark.png" } // TODO: Once we will use Qt >=5.15 this should be refactored with inline components as follows: // https://doc.qt.io/qt-5/qtqml-documents-definetypes.html#inline-components @@ -362,9 +353,6 @@ QtObject { // Text text_norm: "#0C0C14" text_weak: "#706D6B" - - // Images - welcome_img: "/qml/icons/img-welcome.png" } property real progress_bar_radius: 3 * root.px // px property real px: 1.00 // px diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml new file mode 100644 index 00000000..e8a6a538 --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/OnboardingLeftPane.qml @@ -0,0 +1,78 @@ +// 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 + + 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 + } + } + } +} \ 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 b1c49bdd..03ce9e89 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -36,15 +36,20 @@ Item { Layout.fillWidth: true color: root.colorScheme.background_norm - Rectangle { + Item { id: leftContent anchors.bottom: parent.bottom anchors.bottomMargin: 96 anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: 96 - color: "#ff0000" width: 444 + + OnboardingLeftPane { + colorScheme: root.colorScheme + anchors.fill: parent + } + } Image { id: mailLogoWithWordmark diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/WelcomeGuide.qml b/internal/frontend/bridge-gui/bridge-gui/qml/WelcomeGuide.qml index 8be55925..94df5dec 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/WelcomeGuide.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/WelcomeGuide.qml @@ -95,7 +95,7 @@ Item { Image { Layout.alignment: Qt.AlignHCenter Layout.topMargin: 16 - source: colorScheme.welcome_img + source: "/qml/icons/img-welcome.svg" sourceSize.height: 148 sourceSize.width: 264 } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.png b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.png deleted file mode 100644 index d1b39165..00000000 Binary files a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.png and /dev/null differ diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.svg deleted file mode 100644 index 2e3e9272..00000000 --- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome-dark.svg +++ /dev/null @@ -1,331 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.png b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.png deleted file mode 100644 index 90fff1b9..00000000 Binary files a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.png and /dev/null differ diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.svg index dc6e069d..9bedcc34 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.svg +++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-welcome.svg @@ -1,331 +1,34 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +