Make room settings pane scrollable

The new Base/ButtonLayout components will be used in the near future to
refactor other HBox-based components

src/gui/Pages/Chat/Chat.qml

@@ -29,6 +29,9 @@ Item {
     readonly property alias loader: loader
     readonly property alias roomPane: roomPaneLoader.item
 
+    readonly property bool composerHasFocus:
+        Boolean(loader.item && loader.item.composer.hasFocus)
+
 
     HShortcut {
         sequences: window.settings.keys.leaveRoom

src/gui/Pages/Chat/ChatPage.qml

@@ -10,8 +10,7 @@ import "Timeline"
 
 HColumnPage {
     id: chatPage
-    leftPadding: 0
-    rightPadding: 0
+    padding: 0
 
     onLoadEventListChanged: if (loadEventList) loadedOnce = true
     Component.onDestruction: if (loadMembersFuture) loadMembersFuture.cancel()

src/gui/Pages/Chat/Composer/Composer.qml

@@ -7,6 +7,7 @@ import "../../../Base"
 
 Rectangle {
     property alias eventList: messageArea.eventList
+    readonly property bool hasFocus: messageArea.activeFocus
 
 
     function takeFocus() { messageArea.forceActiveFocus() }

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

@@ -76,7 +76,7 @@ MultiviewPane {
     }
 
     MemberView {}
-    SettingsView { fillAvailableHeight: true }
+    SettingsView {}
 
     HShortcut {
         sequences: window.settings.keys.toggleFocusRoomPane

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

@@ -3,66 +3,9 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 import "../../../Base"
+import "../../../Base/ButtonLayout"
 
-HBox {
-    color: theme.chat.roomPane.roomSettings.background
-
-    buttonModel: [
-        {
-            name: "apply",
-            text: qsTr("Save"),
-            iconName: "apply",
-            enabled: anyChange,
-            loading: saveFuture !== null,
-            disableWhileLoading: false,
-        },
-        {
-            name: "cancel",
-            text: qsTr("Cancel"),
-            iconName: "cancel",
-            enabled: anyChange || saveFuture !== null,
-        },
-    ]
-
-    buttonCallbacks: ({
-        apply: button => {
-            if (saveFuture) saveFuture.cancel()
-
-            const args = [
-                chat.roomId,
-                nameField.item.changed ? nameField.item.text : undefined,
-                topicArea.item.changed ? topicArea.item.text : undefined,
-                encryptCheckBox.changed ? true : undefined,
-
-                requireInviteCheckbox.changed ?
-                requireInviteCheckbox.checked : undefined,
-
-                forbidGuestsCheckBox.changed ?
-                forbidGuestsCheckBox.checked : undefined,
-            ]
-
-            function onDone() { saveFuture = null }
-
-            saveFuture = py.callClientCoro(
-                chat.userId, "room_set", args, onDone, onDone,
-            )
-        },
-
-        cancel: button => {
-            if (saveFuture) {
-                saveFuture.cancel()
-                saveFuture = null
-            }
-
-            nameField.item.reset()
-            topicArea.item.reset()
-            encryptCheckBox.reset()
-            requireInviteCheckbox.reset()
-            forbidGuestsCheckBox.reset()
-        },
-    })
-
-
+HFlickableColumnPage {
     property var saveFuture: null
 
     readonly property bool anyChange:
@@ -73,6 +16,69 @@ HBox {
     readonly property Item keybindFocusItem: nameField.item
 
 
+    function save() {
+        if (saveFuture) saveFuture.cancel()
+
+        const args = [
+            chat.roomId,
+            nameField.item.changed ? nameField.item.text : undefined,
+            topicArea.item.changed ? topicArea.item.text : undefined,
+            encryptCheckBox.changed ? true : undefined,
+
+            requireInviteCheckbox.changed ?
+            requireInviteCheckbox.checked : undefined,
+
+            forbidGuestsCheckBox.changed ?
+            forbidGuestsCheckBox.checked : undefined,
+        ]
+
+        function onDone() { saveFuture = null }
+
+        saveFuture = py.callClientCoro(
+            chat.userId, "room_set", args, onDone, onDone,
+        )
+    }
+
+    function cancel() {
+        if (saveFuture) {
+            saveFuture.cancel()
+            saveFuture = null
+        }
+
+        nameField.item.reset()
+        topicArea.item.reset()
+        encryptCheckBox.reset()
+        requireInviteCheckbox.reset()
+        forbidGuestsCheckBox.reset()
+    }
+
+
+    useVariableSpacing: false
+    column.spacing: theme.spacing * 1.5
+
+    flickShortcuts.active:
+        ! mainUI.debugConsole.visible && ! chat.composerHasFocus
+
+    background: Rectangle {
+        color: theme.chat.roomPane.roomSettings.background
+    }
+
+    footer: ButtonLayout {
+        ApplyButton {
+            enabled: anyChange
+            loading: saveFuture !== null
+            disableWhileLoading: false
+            onClicked: save()
+
+        }
+
+        CancelButton {
+            enabled: anyChange || saveFuture !== null
+            onClicked: cancel()
+        }
+    }
+
+
     HRoomAvatar {
         id: avatar
         roomId: chat.roomId
@@ -108,6 +114,7 @@ HBox {
         Layout.fillWidth: true
 
         HTextArea {
+            // TODO: limit height
             width: parent.width
             placeholderText: qsTr("This room is about...")
             defaultText: chat.roomInfo.plain_topic

src/gui/Pages/Chat/Timeline/EventList.qml

@@ -175,7 +175,7 @@ Rectangle {
     }
 
     FlickShortcuts {
-        active: ! mainUI.debugConsole.visible
+        active: chat.composerHasFocus
         flickable: eventList
     }