feat(GODT-2772): back button.

internal/frontend/bridge-gui/bridge-gui/Resources.qrc

@@ -23,6 +23,7 @@
         <file>qml/icons/ic-card-identity.svg</file>
         <file>qml/icons/ic-check.svg</file>
         <file>qml/icons/ic-chevron-down.svg</file>
+        <file>qml/icons/ic-chevron-left.svg</file>
         <file>qml/icons/ic-chevron-right.svg</file>
         <file>qml/icons/ic-chevron-up.svg</file>
         <file>qml/icons/ic-cog-wheel.svg</file>

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

@@ -23,14 +23,15 @@ T.Button {
     property bool borderless: false
     property ColorScheme colorScheme
     readonly property bool hasTextAndIcon: (control.text !== "") && (iconImage.source.toString().length > 0)
+    property bool iconOnTheLeft: false
     readonly property bool isIcon: control.text === ""
     property int labelType: Proton.Label.LabelType.Body
     property bool loading: false
     readonly property bool primary: !secondary
     property alias secondary: control.flat
+    property bool secondaryIsOpaque: false
     property alias textHorizontalAlignment: label.horizontalAlignment
     property alias textVerticalAlignment: label.verticalAlignment
-    property bool secondaryIsOpaque: false;
 
     font: label.font
     horizontalPadding: 16
@@ -78,7 +79,7 @@ T.Button {
                     if (control.loading) {
                         return control.colorScheme.interaction_default_hover;
                     }
-                    return secondaryIsOpaque ? control.colorScheme.background_norm:  control.colorScheme.interaction_default;
+                    return secondaryIsOpaque ? control.colorScheme.background_norm : control.colorScheme.interaction_default;
                 }
             } else {
                 if (primary) {
@@ -116,6 +117,7 @@ T.Button {
     }
     contentItem: RowLayout {
         id: _contentItem
+        layoutDirection: iconOnTheLeft ? Qt.RightToLeft : Qt.LeftToRight
         spacing: control.hasTextAndIcon ? control.spacing : 0
 
         Proton.Label {
@@ -135,8 +137,8 @@ T.Button {
             opacity: control.enabled || control.loading ? 1.0 : 0.5
             text: control.text
             type: labelType
-            visible: !control.isIcon
             verticalAlignment: Text.AlignVCenter
+            visible: !control.isIcon
         }
         ColorImage {
             id: iconImage

internal/frontend/bridge-gui/bridge-gui/qml/SetupWizard/SetupWizard.qml

@@ -36,6 +36,7 @@ Item {
     }
 
     property string address
+    property var backAction: null
     property int client
     property ColorScheme colorScheme
     property var user
@@ -43,6 +44,9 @@ Item {
     signal showBugReport
     signal wizardEnded
 
+    function _showClientConfig() {
+        showClientConfig(root.user, root.address);
+    }
     function clientIconSource() {
         switch (client) {
         case SetupWizard.Client.AppleMail:
@@ -77,11 +81,13 @@ Item {
         wizardEnded();
     }
     function showAppleMailAutoConfig() {
+        backAction = _showClientConfig;
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
         rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigAppleMail;
         clientConfigAppleMail.showAutoconfig(); // This will trigger signals that will display the appropriate left content.
     }
     function showClientConfig(user, address) {
+        backAction = null;
         root.user = user;
         root.address = address;
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
@@ -89,12 +95,15 @@ Item {
         rightContent.currentIndex = SetupWizard.ContentStack.ClientConfigSelector;
     }
     function showClientConfigEnd() {
+        backAction = null;
         rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigEnd;
     }
     function showClientParams() {
+        backAction = _showClientConfig;
         rootStackLayout.currentIndex = SetupWizard.RootStack.ClientConfigParameters;
     }
     function showLogin(username = "") {
+        backAction = null;
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
         root.address = "";
         leftContent.showLogin();
@@ -103,6 +112,7 @@ Item {
         login.reset(false);
     }
     function showOnboarding() {
+        backAction = null;
         rootStackLayout.currentIndex = SetupWizard.RootStack.TwoPanesView;
         root.address = "";
         root.user = null;
@@ -238,5 +248,26 @@ Item {
     HelpButton {
         wizard: root
     }
+    Button {
+        id: backButton
+        anchors.left: parent.left
+        anchors.leftMargin: 40
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        colorScheme: root.colorScheme
+        icon.source: "/qml/icons/ic-chevron-left.svg"
+        iconOnTheLeft: true
+        secondary: true
+        secondaryIsOpaque: true
+        spacing: 8
+        text: qsTr("Back")
+        visible: backAction != null
+
+        onClicked: {
+            if (backAction) {
+                backAction();
+            }
+        }
+    }
 }
 

internal/frontend/bridge-gui/bridge-gui/qml/icons/ic-chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8363 13.87C11.0407 13.6842 11.0557 13.368 10.87 13.1637L6.17573 8L10.87 2.83633C11.0557 2.632 11.0407 2.31578 10.8363 2.13003C10.632 1.94427 10.3158 1.95933 10.13 2.16366L5.13003 7.66366C4.95666 7.85437 4.95666 8.14562 5.13003 8.33633L10.13 13.8363C10.3158 14.0407 10.632 14.0557 10.8363 13.87Z" fill="#0C0C14"/>
+</svg>