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
This commit is contained in:
miruka 2021-04-10 00:52:52 -04:00
parent 46e058f2de
commit 01e7a1ac13
5 changed files with 56 additions and 8 deletions

View File

@ -8,10 +8,33 @@ import QtQuick.Layouts 1.12
HPage { HPage {
default property alias swipeViewData: swipeView.contentData default property alias swipeViewData: swipeView.contentData
property Component tabBar: HTabBar {}
property alias backButton: backButton
property bool showBackButton: false
readonly property alias swipeView: swipeView
contentWidth: contentWidth:
Math.max(swipeView.contentWidth, theme.controls.box.defaultWidth) 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 { background: Rectangle {
color: theme.controls.box.background color: theme.controls.box.background
@ -29,7 +52,7 @@ HPage {
Behavior on implicitHeight { HNumberAnimation {} } Behavior on implicitHeight { HNumberAnimation {} }
Binding { Binding {
target: header target: tabBarLoader.item
property: "currentIndex" property: "currentIndex"
value: swipeView.currentIndex value: swipeView.currentIndex
} }
@ -38,8 +61,7 @@ HPage {
id: swipeView id: swipeView
anchors.fill: parent anchors.fill: parent
clip: true clip: true
currentIndex: header.currentIndex currentIndex: tabBarLoader.item.currentIndex
onCurrentItemChanged: currentItem.takeFocus() onCurrentItemChanged: currentItem.takeFocus()
} }
} }

View File

@ -17,7 +17,12 @@ HPage {
width: Math.min(implicitWidth, page.availableWidth) width: Math.min(implicitWidth, page.availableWidth)
height: Math.min(implicitHeight, page.availableHeight) 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("General") }
HTabButton { text: qsTr("Notifications") } HTabButton { text: qsTr("Notifications") }
HTabButton { text: qsTr("Security") } HTabButton { text: qsTr("Security") }

View File

@ -39,7 +39,7 @@ SwipeView {
width: Math.min(implicitWidth, tabPage.availableWidth) width: Math.min(implicitWidth, tabPage.availableWidth)
height: Math.min(implicitHeight, tabPage.availableHeight) height: Math.min(implicitHeight, tabPage.availableHeight)
header: HTabBar { tabBar: HTabBar {
shortcutsEnabled: visible && tabPage.enabled shortcutsEnabled: visible && tabPage.enabled
visible: visible:
signInLoader.sourceComponent !== signInLoader.signInSso signInLoader.sourceComponent !== signInLoader.signInSso

View File

@ -155,6 +155,22 @@ HBox {
width: parent.width 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 { HTextField {
id: field id: field

View File

@ -15,7 +15,12 @@ HPage {
width: Math.min(implicitWidth, page.availableWidth) width: Math.min(implicitWidth, page.availableWidth)
height: Math.min(implicitHeight, page.availableHeight) 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("Direct chat") }
HTabButton { text: qsTr("Join room") } HTabButton { text: qsTr("Join room") }
HTabButton { text: qsTr("Create room") } HTabButton { text: qsTr("Create room") }