From ea26dc0e971078620ff44c108617aa0b71398365 Mon Sep 17 00:00:00 2001 From: Xavier Michelon Date: Thu, 31 Aug 2023 10:24:09 +0200 Subject: [PATCH] feat(GODT-2772): external links have an icon. --- .../qml/Notifications/Notifications.qml | 2 +- .../bridge-gui/qml/Proton/LinkLabel.qml | 70 ++++++++++++++----- .../qml/SetupWizard/ClientConfigAppleMail.qml | 5 +- .../bridge-gui/qml/SetupWizard/LeftPane.qml | 8 +-- .../bridge-gui/qml/SetupWizard/Login.qml | 7 +- 5 files changed, 67 insertions(+), 25 deletions(-) diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Notifications/Notifications.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Notifications/Notifications.qml index 94fcc9e6..04b2398d 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Notifications/Notifications.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Notifications/Notifications.qml @@ -453,7 +453,7 @@ QtObject { brief: title description: qsTr("Changing between split and combined address mode will require you to delete your account(s) from your email client and begin the setup process from scratch.") group: Notifications.Group.Configuration | Notifications.Group.Dialogs - icon: "/qml/icons/ic-question-circle.svg" + icon: "./icons/ic-question-circle.svg" title: qsTr("Enable split mode?") type: Notification.NotificationType.Warning diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/LinkLabel.qml b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/LinkLabel.qml index 2b1feefd..49db82ed 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/Proton/LinkLabel.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/Proton/LinkLabel.qml @@ -12,39 +12,77 @@ // along with Proton Mail Bridge. If not, see . import QtQuick import QtQuick.Controls +import QtQuick.Layouts -Label { +RowLayout { id: root property var callback: null + property ColorScheme colorScheme + property bool external: false + property string link: "#" + property string text: "" function clear() { - callback = null; - text = ""; + root.callback = null; + root.text = ""; + root.link = ""; + root.external = false; } - function setCallback(callback, linkText) { + function link(url, text) { + return label.link(url, text); + } + function setCallback(callback, linkText, external) { root.callback = callback; - text = link("#", linkText); + root.text = linkText; + root.link = "#"; // Cannot be empty, otherwise the text is not an hyperlink. + root.external = external; } - function setLink(linkURL, linkText) { - callback = null; - text = link(linkURL, linkText); + function setLink(linkURL, linkText, external) { + root.callback = null; + root.text = linkText; + root.link = linkURL; + root.external = external; } - type: Label.LabelType.Body + Label { + id: label + Layout.alignment: Qt.AlignVCenter + colorScheme: root.colorScheme + text: label.link(root.link, root.text) + type: Label.LabelType.Body - onLinkActivated: function (link) { - if (link !== "#") { - Qt.openUrlExternally(link); - } - if (callback) { - callback(); + onLinkActivated: function (link) { + if ((link !== "#") && (link.length > 0)) { + Qt.openUrlExternally(link); + } + if (callback) { + callback(); + } } } + ColorImage { + Layout.alignment: Qt.AlignVCenter + color: label.linkColor + height: sourceSize.height + source: "/qml/icons/ic-external-link.svg" + sourceSize.height: 16 + sourceSize.width: 16 + visible: external + width: sourceSize.width + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + + onClicked: { + label.onLinkActivated(root.link); + } + } + } HoverHandler { acceptedDevices: PointerDevice.Mouse cursorShape: Qt.PointingHandCursor enabled: true } -} +} \ No newline at end of file diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml index 4ffacf34..d7516a3b 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/ClientConfigAppleMail.qml @@ -180,9 +180,10 @@ Item { } LinkLabel { Layout.alignment: Qt.AlignHCenter - colorScheme: wizard.colorScheme callback: wizard.showBugReport - text: link("#", qsTr("Report the problem")) + colorScheme: wizard.colorScheme + link: "#" + text: qsTr("Report the problem") visible: certificateInstall.showBugReportLink } } 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 c452c520..88cf9e27 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/LeftPane.qml @@ -26,7 +26,7 @@ Item { function showAppleMailAutoconfigCertificateInstall() { showAppleMailAutoconfigCommon(); descriptionLabel.text = qsTr("Apple Mail configuration is mostly automated, but in order to work, Bridge needs to install a certificate in your keychain."); - linkLabel1.setCallback(showUnderConstruction, qsTr("Why is this certificate needed?")); + linkLabel1.setCallback(showUnderConstruction, qsTr("Why is this certificate needed?"), false); } function showAppleMailAutoconfigCommon() { titleLabel.text = ""; @@ -39,8 +39,8 @@ Item { function showAppleMailAutoconfigProfileInstall() { showAppleMailAutoconfigCommon(); descriptionLabel.text = qsTr("The final step before you can start using Apple Mail is to install the Bridge server profile in the system preferences.\n\nAdding a server profile is necessary to ensure that your Mac can receive and send Proton Mails."); - linkLabel1.setCallback(showUnderConstruction, qsTr("Why is there a yellow warning sign?")); - linkLabel2.setCallback(wizard.showClientParams, qsTr("Configure Apple Mail manually")); + linkLabel1.setCallback(showUnderConstruction, qsTr("Why is there a yellow warning sign?"), false); + linkLabel2.setCallback(wizard.showClientParams, qsTr("Configure Apple Mail manually"), false); } function showClientSelector(newAccount = true) { titleLabel.text = ""; @@ -63,7 +63,7 @@ Item { function showOnboarding() { titleLabel.text = (Backend.users.count === 0) ? qsTr("Welcome to\nProton Mail Bridge") : qsTr("Add a Proton Mail account"); 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.setCallback(showUnderConstruction, qsTr("Why do I need Bridge?")); + linkLabel1.setCallback(showUnderConstruction, qsTr("Why do I need Bridge?"), false); linkLabel2.clear(); root.iconSource = "/qml/icons/img-welcome.svg"; root.iconHeight = 148; diff --git a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml index d6a67121..75cd78e0 100644 --- a/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml +++ b/internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/Login.qml @@ -133,7 +133,7 @@ FocusScope { usernameTextField.errorString = ""; passwordTextField.error = false; passwordTextField.errorString = ""; - errorLabel.text = "" + errorLabel.text = ""; } function reset(clearUsername = false) { signInButton.loading = false; @@ -178,6 +178,7 @@ FocusScope { RowLayout { Layout.fillWidth: true spacing: 0 + ColorImage { color: wizard.colorScheme.signal_danger height: errorLabel.lineHeight @@ -269,7 +270,9 @@ FocusScope { LinkLabel { Layout.alignment: Qt.AlignHCenter colorScheme: wizard.colorScheme - text: link("https://proton.me/mail/pricing", qsTr("Create or upgrade your account")) + external: true + link: "https://proton.me/mail/pricing" + text: qsTr("Create or upgrade your account") } } }