diff --git a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc index db266b0d..5d1e4cc7 100644 --- a/internal/frontend/bridge-gui/bridge-gui/Resources.qrc +++ b/internal/frontend/bridge-gui/bridge-gui/Resources.qrc @@ -49,6 +49,7 @@ qml/icons/ic-success.svg qml/icons/ic-three-dots-vertical.svg qml/icons/ic-trash.svg + qml/icons/img-client-config-selector.svg qml/icons/img-mail-clients.svg qml/icons/img-mail-logo-wordmark-dark.svg qml/icons/img-mail-logo-wordmark.svg diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml index dd844c94..2c3f5422 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/Button.qml @@ -30,6 +30,7 @@ T.Button { property alias secondary: control.flat property alias textHorizontalAlignment: label.horizontalAlignment property alias textVerticalAlignment: label.verticalAlignment + property bool secondaryIsOpaque: false; font: label.font horizontalPadding: 16 @@ -77,7 +78,7 @@ T.Button { if (control.loading) { return control.colorScheme.interaction_default_hover; } - return control.colorScheme.interaction_default; + return secondaryIsOpaque ? control.colorScheme.background_norm: control.colorScheme.interaction_default; } } else { if (primary) { @@ -103,7 +104,7 @@ T.Button { if (control.loading) { return control.colorScheme.interaction_default_hover; } - return control.colorScheme.interaction_default; + return secondaryIsOpaque ? control.colorScheme.background_norm : control.colorScheme.interaction_default; } } } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml index 28db59c9..2de2c47a 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigSelector.qml @@ -27,18 +27,18 @@ Item { ColumnLayout { anchors.left: parent.left anchors.right: parent.right - anchors.top: parent.top - spacing: 0 + anchors.verticalCenter: parent.verticalCenter + spacing: 16 Label { Layout.alignment: Qt.AlignHCenter Layout.fillWidth: true + Layout.topMargin: 16 colorScheme: wizard.colorScheme - text: qsTr("Select your email application") - type: Label.LabelType.Heading - } - Item { - Layout.preferredHeight: 72 + horizontalAlignment: Qt.AlignHCenter + text: qsTr("Select your email client") + type: Label.LabelType.Title + wrapMode: Text.WordWrap } ClientListItem { Layout.fillWidth: true @@ -86,14 +86,13 @@ Item { wizard.showClientParams(); } } - Item { - Layout.preferredHeight: 72 - } Button { Layout.fillWidth: true + Layout.topMargin: 20 colorScheme: wizard.colorScheme secondary: true - text: qsTr("Cancel") + secondaryIsOpaque: true + text: qsTr("Setup later") onClicked: { root.wizard.closeWizard(); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml index da92fcac..5422cdfe 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientListItem.qml @@ -17,7 +17,7 @@ import QtQuick.Controls import QtQuick.Controls.impl import Proton -Item { +Rectangle { id: root property ColorScheme colorScheme @@ -26,41 +26,44 @@ Item { signal clicked - implicitHeight: clientRow.height - - ColumnLayout { - id: clientRow - anchors.left: parent.left - anchors.right: parent.right - spacing: 0 - - RowLayout { - Layout.bottomMargin: 12 - Layout.leftMargin: 16 - Layout.rightMargin: 16 - Layout.topMargin: 12 - - ColorImage { - height: 36 - source: iconSource - sourceSize.height: 36 - } - Label { - Layout.leftMargin: 12 - colorScheme: root.colorScheme - text: root.text - type: Label.LabelType.Body - } + border.color: colorScheme.border_norm + border.width: 1 + color: { + if (mouseArea.pressed) { + return colorScheme.interaction_default_active; } - Rectangle { + if (mouseArea.containsMouse) { + return colorScheme.interaction_default_hover + } + return colorScheme.background_norm; + } + height: 68 + radius: 12 + + RowLayout { + anchors.fill: parent + anchors.margins: 16 + + ColorImage { + height: 36 + source: iconSource + sourceSize.height: 36 + } + Label { Layout.fillWidth: true - Layout.preferredHeight: 1 - color: root.colorScheme.border_weak + Layout.leftMargin: 12 + colorScheme: root.colorScheme + horizontalAlignment: Text.AlignLeft + text: root.text + type: Label.LabelType.Body + verticalAlignment: Text.AlignVCenter } } MouseArea { + id: mouseArea + acceptedButtons: Qt.LeftButton anchors.fill: parent - cursorShape: Qt.PointingHandCursor + hoverEnabled: true onClicked: { root.clicked(); diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml index 1d9ac95c..47d4d357 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/HelpButton.qml @@ -31,6 +31,7 @@ Button { icon.source: "/qml/icons/ic-question-circle.svg" icon.height: 24 icon.width: 24 + icon.color: wizard.colorScheme.text_weak verticalPadding: 0 onClicked: { diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml index 05e0ece9..303498f8 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -22,27 +22,28 @@ Item { id: root property var wizard + property int iconHeight + property int iconWidth + property string iconSource function showClientConfigCommon() { const clientName = wizard.clientName(); titleLabel.text = qsTr("Configure %1").arg(clientName); descriptionLabel.text = qsTr("We will now guide you through the process of setting up your Proton account in %1.").arg(clientName); icon.source = wizard.clientIconSource(); - icon.sourceSize.height = 128; - icon.sourceSize.width = 128; + icon.sourceSize.height = 264; + icon.sourceSize.width = 263; Layout.preferredHeight = 72; Layout.preferredWidth = 72; } - function showClientConfigWarning() { - showClientConfigCommon(); - linkLabel1.setLink("https://proton.me/support/bridge", qsTr("Why can't I use my Proton password in my email client?")); - } function showClientSelector() { - titleLabel.text = qsTr("Configure your email client"); + titleLabel.text = ""; 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.clear(); linkLabel2.clear(); - icon.source = "/qml/icons/img-mail-clients.svg"; + iconSource = "/qml/icons/img-client-config-selector.svg"; + iconHeight = 222; + iconWidth = 264; } function showLogin() { showOnboarding() @@ -58,11 +59,9 @@ Item { 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.setLink("https://proton.me/support/bridge", qsTr("Why do I need Bridge?")); linkLabel2.clear(); - icon.Layout.preferredHeight = 148; - icon.Layout.preferredWidth = 265; - icon.source = "/qml/icons/img-welcome.svg"; - icon.sourceSize.height = 148; - icon.sourceSize.width = 265; + iconSource = "/qml/icons/img-welcome.svg" + iconHeight= 148; + iconWidth = 265; } Connections { @@ -84,12 +83,11 @@ Item { 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 + Layout.preferredHeight: iconHeight + Layout.preferredWidth: iconWidth + source: iconSource + sourceSize.height: iconHeight + sourceSize.width: iconWidth } Label { id: titleLabel @@ -100,6 +98,7 @@ Item { text: "" type: Label.LabelType.Heading wrapMode: Text.WordWrap + visible: text.length !== 0 } Label { id: descriptionLabel 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 5a6a1046..abfafd5c 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml @@ -182,16 +182,12 @@ Item { // rightContent stack index 0 Onboarding { - Layout.fillHeight: true - Layout.fillWidth: true wizard: root } // rightContent tack index 1 Login { id: login - Layout.fillHeight: true - Layout.fillWidth: true wizard: root onLoginAbort: { @@ -202,15 +198,11 @@ Item { // rightContent stack index 2 ClientConfigSelector { id: clientConfigSelector - Layout.fillHeight: true - Layout.fillWidth: true wizard: root } // rightContent stack index 3 ClientConfigAppleMail { id: clientConfigAppleMail - Layout.fillHeight: true - Layout.fillWidth: true wizard: root } } diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-client-config-selector.svg b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-client-config-selector.svg new file mode 100644 index 00000000..5b107446 --- /dev/null +++ b/internal/frontend/bridge-gui/bridge-gui/qml/icons/img-client-config-selector.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +