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:
parent
46e058f2de
commit
01e7a1ac13
|
@ -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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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") }
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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") }
|
||||||
|
|
Loading…
Reference in New Issue
Block a user