From 73d7e09536e5c4989eee55bdfe882bafacbff805 Mon Sep 17 00:00:00 2001
From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com>
Date: Wed, 21 Sep 2022 16:31:47 +0300
Subject: [PATCH] (StatusSectionLayout): Added back button in StatusChatToolbar
 (#903)

To be used in header in all sections where it's needed

Needed for https://github.com/status-im/status-desktop/issues/7312
---
 .../StatusAppCommunitiesPortalView.qml        |  2 --
 src/StatusQ/Components/StatusToolBar.qml      | 14 +++++++++++
 src/StatusQ/Layout/StatusSectionLayout.qml    | 24 ++++++++++++++++---
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
index 42fc96d1..f78f0cc6 100644
--- a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@@ -44,8 +44,6 @@ StatusSectionLayout {
                 spacing: 18
 
                 StatusBaseText {
-                    Layout.topMargin: d.layoutVMargin
-                    Layout.leftMargin: d.layoutHMargin
                     text: qsTr("Find community")
                     font.weight: Font.Bold
                     font.pixelSize: d.titlePixelSize
diff --git a/src/StatusQ/Components/StatusToolBar.qml b/src/StatusQ/Components/StatusToolBar.qml
index 8e99e0be..74cb768d 100644
--- a/src/StatusQ/Components/StatusToolBar.qml
+++ b/src/StatusQ/Components/StatusToolBar.qml
@@ -9,10 +9,12 @@ import StatusQ.Controls 0.1
 ToolBar {
     id: root
 
+    property string backButtonName: ""
     property int notificationCount: 0
     property Item headerContent
     property alias notificationButton: notificationButton
 
+    signal backButtonClicked()
     signal notificationButtonClicked()
 
     implicitWidth: visible ? 518 : 0
@@ -23,6 +25,18 @@ ToolBar {
     RowLayout {
         anchors.fill: parent
         spacing: 0
+        StatusFlatButton {
+            icon.name: "arrow-left"
+            icon.width: 20
+            icon.height: 20
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.leftMargin: 12
+            visible: !!root.backButtonName
+            text: root.backButtonName
+            size: StatusBaseButton.Size.Large
+            onClicked: { root.backButtonClicked(); }
+        }
+
         Control {
             id: headerContentItem
             Layout.fillWidth: !!headerContent
diff --git a/src/StatusQ/Layout/StatusSectionLayout.qml b/src/StatusQ/Layout/StatusSectionLayout.qml
index b3655baf..3c4ab886 100644
--- a/src/StatusQ/Layout/StatusSectionLayout.qml
+++ b/src/StatusQ/Layout/StatusSectionLayout.qml
@@ -81,11 +81,19 @@ SplitView {
     property bool showHeader: true
 
     /*!
-        \qmlproperty int StatusAppLayout::notificationCount
-        This property holds the number of notifications to be displayed in the notifications
-        button of the header component.
+        \qmlproperty alias StatusAppLayout::notificationCount
+        This property holds a reference to the notificationCount property of the
+        header component.
     */
     property alias notificationCount: statusToolBar.notificationCount
+
+    /*!
+        \qmlproperty alias StatusAppLayout::backButtonName
+        This property holds a reference to the backButtonName property of the
+        header component.
+    */
+    property alias backButtonName: statusToolBar.backButtonName
+
     /*!
         \qmlproperty alias StatusAppLayout::headerContent
         This property holds a reference to the custom header content of
@@ -99,6 +107,13 @@ SplitView {
     */
     property alias notificationButton: statusToolBar.notificationButton
 
+    /*!
+        \qmlsignal
+        This signal is emitted when the back button of the header component
+        is pressed.
+    */
+    signal backButtonClicked()
+
     /*!
         \qmlsignal
         This signal is emitted when the notification button of the header component
@@ -134,6 +149,9 @@ SplitView {
                 id: statusToolBar
                 width: visible ? parent.width : 0
                 visible: root.showHeader
+                onBackButtonClicked: {
+                    root.backButtonClicked();
+                }
                 onNotificationButtonClicked: {
                     root.notificationButtonClicked();
                 }