Add room header buttons to access sidepanes

src/backend/user_files.py

@@ -194,6 +194,7 @@ class UISettings(JSONDataFile):
     async def default_data(self) -> JsonData:
         return {
             "alertOnMessageForMsec": 4000,
+            "alwaysCenterRoomHeader": False,
             "clearRoomFilterOnEnter": True,
             "clearRoomFilterOnEscape": True,
             "collapseSidePanesUnderWindowWidth": 400,

src/gui/MainPane/MainPane.qml

@@ -14,7 +14,6 @@ HDrawer {
         if (! hasFocus) mainPaneList.detachedCurrentIndex = false
 
 
-
     property alias filter: bottomBar.roomFilter
 
     readonly property bool small:

src/gui/Pages/Chat/RoomHeader.qml

@@ -8,10 +8,35 @@ Rectangle {
     implicitHeight: theme.baseElementsHeight
     color: theme.chat.roomHeader.background
 
+
+    readonly property bool showPaneButtons: mainUI.mainPane.collapse
+
+    readonly property bool center:
+        showPaneButtons || window.settings.alwaysCenterRoomHeader
+
+
     HRowLayout {
         id: row
         anchors.fill: parent
 
+        HButton {
+            id: goToMainPaneButton
+            icon.name: "go-back-to-main-pane"
+            padded: false
+            visible: Layout.preferredWidth > 0
+
+            onClicked: mainUI.mainPane.toggleFocus()
+
+            Layout.preferredWidth: showPaneButtons ? avatar.width : 0
+            Layout.fillHeight: true
+
+            Behavior on Layout.preferredWidth { HNumberAnimation {} }
+        }
+
+        HSpacer {
+            visible: center
+        }
+
         HRoomAvatar {
             id: avatar
             roomId: chat.roomId
@@ -34,7 +59,12 @@ Rectangle {
             rightPadding: leftPadding
 
             Layout.preferredWidth: Math.min(
-                implicitWidth, row.width - row.spacing - avatar.width
+                implicitWidth,
+                row.width -
+                row.spacing * (showPaneButtons ? 3 : 1) -
+                goToMainPaneButton.width -
+                avatar.width -
+                goToRoomPaneButton.width
             )
             Layout.fillHeight: true
 
@@ -52,7 +82,16 @@ Rectangle {
             verticalAlignment: Text.AlignVCenter
             rightPadding: nameLabel.rightPadding
 
-            Layout.fillWidth: true
+            Layout.preferredWidth: Math.min(
+                implicitWidth,
+                row.width -
+                row.spacing * (showPaneButtons ? 3 : 1) -
+                goToMainPaneButton.width -
+                avatar.width -
+                nameLabel.width -
+                goToRoomPaneButton.width
+            )
+            Layout.fillWidth: ! center
             Layout.fillHeight: true
 
             HoverHandler { id: topicHover }
@@ -70,5 +109,21 @@ Rectangle {
             readonly property string topic:
                 topicLabel.truncated ?  chat.roomInfo.topic : ""
         }
+
+        HSpacer {
+            visible: center
+        }
+
+        HButton {
+            id: goToRoomPaneButton
+            padded: false
+            icon.name: "go-to-room-pane"
+            visible: goToMainPaneButton.visible
+
+            onClicked: chat.roomPane.toggleFocus()
+
+            Layout.preferredWidth: goToMainPaneButton.Layout.preferredWidth
+            Layout.fillHeight: true
+        }
     }
 }

src/gui/Pages/Chat/RoomPane/MemberView.qml

@@ -7,6 +7,9 @@ import "../../.."
 import "../../../Base"
 
 HColumnLayout {
+    readonly property alias keybindFocusItem: filterField
+
+
     HListView {
         id: memberList
         clip: true

src/gui/Pages/Chat/RoomPane/RoomPane.qml

@@ -34,6 +34,18 @@ MultiviewPane {
         onClicked: swipeView.currentIndex = Math.min(index, 1)
     }
 
+
+    function toggleFocus() {
+        if (swipeView.currentItem.keybindFocusItem.activeFocus) {
+            pageLoader.takeFocus()
+            return
+        }
+
+        roomPane.open()
+        swipeView.currentItem.keybindFocusItem.forceActiveFocus()
+    }
+
+
     MemberView {}
     SettingsView { fillAvailableHeight: true }
 }

src/gui/Pages/Chat/RoomPane/SettingsView.qml

@@ -53,6 +53,17 @@ HBox {
         encryptCheckBox.changed || requireInviteCheckbox.changed ||
         forbidGuestsCheckBox.changed
 
+    readonly property Item keybindFocusItem: {
+        for (let i = 0; i < visibleChildren.length; i++) {
+            const child = visibleChildren[i]
+
+            if (child.focus || (child.field && child.field.focus))
+                return visibleChildren[i]
+        }
+
+        return nameField.field
+    }
+
 
     HRoomAvatar {
         id: avatar
@@ -74,6 +85,8 @@ HBox {
         field.enabled: chat.roomInfo.can_set_name
 
         Layout.fillWidth: true
+
+        Component.onCompleted: field.forceActiveFocus()
     }
 
     HLabeledTextField {

src/icons/thin/go-back-to-main-pane.svg

@@ -0,0 +1,3 @@
+<svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="m157.11671 264.09364 163.98439 163.9844c2.34598 2.34598 5.04388 3.51897 8.09365 3.51897 3.04979 0 5.74768-1.17299 8.09364-3.51897l17.59491-17.59489c2.34598-2.34599 3.51897-5.04386 3.51897-8.09365 0-3.04981-1.17299-5.74766-3.51897-8.09366l-138.29586-138.29584 138.29586-138.29584c2.34598-2.34599 3.51897-5.04388 3.51897-8.09366s-1.17299-5.74766-3.51897-8.09364l-17.59491-17.594899c-2.34596-2.345973-5.04385-3.518979-8.09364-3.518979-3.04977 0-5.74767 1.173006-8.09365 3.518979l-163.98439 163.984399c-2.34598 2.34598-3.51898 5.04385-3.51898 8.09364 0 3.0498 1.173 5.74767 3.51898 8.09364z" stroke-width=".351898"/>
+</svg>

src/icons/thin/go-to-room-pane.svg

@@ -0,0 +1,3 @@
+<svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
+    <path d="m354.88329 264.09364-163.98439 163.9844c-2.34598 2.34598-5.04388 3.51897-8.09365 3.51897-3.04979 0-5.74768-1.17299-8.09364-3.51897l-17.59491-17.59489c-2.34598-2.34599-3.51897-5.04386-3.51897-8.09365 0-3.04981 1.17299-5.74766 3.51897-8.09366l138.29586-138.29584-138.29586-138.29584c-2.34598-2.34599-3.51897-5.04388-3.51897-8.09366s1.17299-5.74766 3.51897-8.09364l17.59491-17.594899c2.34596-2.345973 5.04385-3.518979 8.09364-3.518979 3.04977 0 5.74767 1.173006 8.09365 3.518979l163.98439 163.984399c2.34598 2.34598 3.51898 5.04385 3.51898 8.09364 0 3.0498-1.173 5.74767-3.51898 8.09364z" stroke-width=".351898"/>
+</svg>