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

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

View File

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

View File

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

View File

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