Add room header buttons to access sidepanes

This commit is contained in:
miruka 2020-03-17 16:39:29 -04:00
parent 5392016dab
commit b092cc11eb
8 changed files with 92 additions and 3 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

After

Width:  |  Height:  |  Size: 757 B

View File

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

After

Width:  |  Height:  |  Size: 755 B