From 01e7a1ac13f2b0c2477d39e0bb44885a863c3d8c Mon Sep 17 00:00:00 2001
From: miruka <miruka@disroot.org>
Date: Sat, 10 Apr 2021 00:52:52 -0400
Subject: [PATCH] Add back button to all pages in thin window mode

In "mobile mode" where main pane is hidden due to application's width:

- Show a back button in the tab bar of the AccountSettings and
  AddChat pages

- Show a back button in the address field (opposite to the "next
  button") of the ServerBrowser, unless there are no accounts added yet
  (application first run) and the main pane would be empty
---
 src/gui/Base/HTabbedBox.qml                   | 32 ++++++++++++++++---
 .../Pages/AccountSettings/AccountSettings.qml |  7 +++-
 src/gui/Pages/AddAccount/AddAccount.qml       |  2 +-
 src/gui/Pages/AddAccount/ServerBrowser.qml    | 16 ++++++++++
 src/gui/Pages/AddChat/AddChat.qml             |  7 +++-
 5 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/src/gui/Base/HTabbedBox.qml b/src/gui/Base/HTabbedBox.qml
index 2ac9d21c..7ad7b163 100644
--- a/src/gui/Base/HTabbedBox.qml
+++ b/src/gui/Base/HTabbedBox.qml
@@ -8,15 +8,38 @@ import QtQuick.Layouts 1.12
 HPage {
     default property alias swipeViewData: swipeView.contentData
 
+    property Component tabBar: HTabBar {}
+    property alias backButton: backButton
+    property bool showBackButton: false
+
+    readonly property alias swipeView: swipeView
+
     contentWidth:
         Math.max(swipeView.contentWidth, theme.controls.box.defaultWidth)
 
-    header: HTabBar {}
+    header: HRowLayout {
+        HButton {
+            id: backButton
+            visible: Layout.preferredWidth > 0
+            Layout.preferredWidth: showBackButton ? implicitWidth : 0
+
+            Behavior on Layout.preferredWidth { HNumberAnimation {} }
+        }
+
+        HLoader {
+            id: tabBarLoader
+            asynchronous: false
+            sourceComponent: tabBar
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+    }
 
     background: Rectangle {
         color: theme.controls.box.background
         radius: theme.controls.box.radius
-    }
+   }
 
     HNumberAnimation on scale {
         running: true
@@ -29,7 +52,7 @@ HPage {
     Behavior on implicitHeight { HNumberAnimation {} }
 
     Binding {
-        target: header
+        target: tabBarLoader.item
         property: "currentIndex"
         value: swipeView.currentIndex
     }
@@ -38,8 +61,7 @@ HPage {
         id: swipeView
         anchors.fill: parent
         clip: true
-        currentIndex: header.currentIndex
-
+        currentIndex: tabBarLoader.item.currentIndex
         onCurrentItemChanged: currentItem.takeFocus()
     }
 }
diff --git a/src/gui/Pages/AccountSettings/AccountSettings.qml b/src/gui/Pages/AccountSettings/AccountSettings.qml
index 1d9e6c48..e4d12f3d 100644
--- a/src/gui/Pages/AccountSettings/AccountSettings.qml
+++ b/src/gui/Pages/AccountSettings/AccountSettings.qml
@@ -17,7 +17,12 @@ HPage {
         width: Math.min(implicitWidth, page.availableWidth)
         height: Math.min(implicitHeight, page.availableHeight)
 
-        header: HTabBar {
+        showBackButton: mainUI.mainPane.normalOrForceCollapse
+        backButton.icon.name: "go-back-to-main-pane"
+        backButton.toolTip.text: qsTr("Back to main pane")
+        backButton.onClicked: mainUI.mainPane.toggleFocus()
+
+        tabBar: HTabBar {
             HTabButton { text: qsTr("General") }
             HTabButton { text: qsTr("Notifications") }
             HTabButton { text: qsTr("Security") }
diff --git a/src/gui/Pages/AddAccount/AddAccount.qml b/src/gui/Pages/AddAccount/AddAccount.qml
index 89890000..92b11014 100644
--- a/src/gui/Pages/AddAccount/AddAccount.qml
+++ b/src/gui/Pages/AddAccount/AddAccount.qml
@@ -39,7 +39,7 @@ SwipeView {
             width: Math.min(implicitWidth, tabPage.availableWidth)
             height: Math.min(implicitHeight, tabPage.availableHeight)
 
-            header: HTabBar {
+            tabBar: HTabBar {
                 shortcutsEnabled: visible && tabPage.enabled
                 visible:
                     signInLoader.sourceComponent !== signInLoader.signInSso
diff --git a/src/gui/Pages/AddAccount/ServerBrowser.qml b/src/gui/Pages/AddAccount/ServerBrowser.qml
index aa228329..60ac3ffd 100644
--- a/src/gui/Pages/AddAccount/ServerBrowser.qml
+++ b/src/gui/Pages/AddAccount/ServerBrowser.qml
@@ -155,6 +155,22 @@ HBox {
 
             width: parent.width
 
+            HButton {
+                icon.name: "go-back-to-main-pane"
+                icon.color: theme.colors.negativeBackground
+                onClicked: mainUI.mainPane.toggleFocus()
+                visible: Layout.preferredWidth > 0
+
+                Layout.fillHeight: true
+                Layout.preferredWidth:
+                    mainUI.mainPane.normalOrForceCollapse &&
+                    mainUI.accountsPresent ?
+                    implicitWidth :
+                    0
+
+                Behavior on Layout.preferredWidth { HNumberAnimation {} }
+            }
+
             HTextField {
                 id: field
 
diff --git a/src/gui/Pages/AddChat/AddChat.qml b/src/gui/Pages/AddChat/AddChat.qml
index 83a5aabc..d10072b2 100644
--- a/src/gui/Pages/AddChat/AddChat.qml
+++ b/src/gui/Pages/AddChat/AddChat.qml
@@ -15,7 +15,12 @@ HPage {
         width: Math.min(implicitWidth, page.availableWidth)
         height: Math.min(implicitHeight, page.availableHeight)
 
-        header: HTabBar {
+        showBackButton: mainUI.mainPane.normalOrForceCollapse
+        backButton.icon.name: "go-back-to-main-pane"
+        backButton.toolTip.text: qsTr("Back to main pane")
+        backButton.onClicked: mainUI.mainPane.toggleFocus()
+
+        tabBar: HTabBar {
             HTabButton { text: qsTr("Direct chat") }
             HTabButton { text: qsTr("Join room") }
             HTabButton { text: qsTr("Create room") }