feat(GODT-2772): external links have an icon.

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
 

internal/frontend/bridge-gui/bridge-gui/qml/Proton/LinkLabel.qml

@@ -12,39 +12,77 @@
 // along with Proton Mail Bridge. If not, see <https://www.gnu.org/licenses/>.
 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
     }
-}
+}

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
                         }
                     }

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;

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")
                 }
             }
         }