ESCA111/neochat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve spaces support

Browse Source
This commit is contained in:
Tobias Fella
2023-05-09 08:11:47 +00:00
parent 30c7d86045
commit 11343e6bdf
10 changed files with 490 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/qml/Component/AvatarTabButton.qml Normal file
View File

@@ -0,0 +1,190 @@
// SPDX-FileCopyrightText: 2021 Devin Lin <espidev@gmail.com>
// SPDX-FileCopyrightText: 2021 Noah Davis <noahadvs@gmail.com>
// SPDX-License-Identifier: LGPL-2.0-or-later
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Templates 2.15 as T
import org.kde.kirigami 2.19 as Kirigami
T.TabButton {
id: control
/**
* @brief This property specifies the index of this tab within the tab bar.
*/
readonly property int tabIndex: {
let tabIdx = 0
for (let i = 0; i < parent.children.length; ++i) {
if (parent.children[i] === this) {
return tabIdx
}
// Checking for AbstractButtons because any AbstractButton can act as a tab
if (parent.children[i] instanceof T.AbstractButton) {
++tabIdx
}
}
return -1
}
/**
* @brief This property sets whether the icon colors should be masked with a single color.
*
* default: ``true``
*
* @since KDE Frameworks 5.96
*/
property bool recolorIcon: true
property color foregroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
property color highlightForegroundColor: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.85)
property color highlightBarColor: Kirigami.Theme.highlightColor
property color pressedColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.3)
property color hoverSelectColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.2)
property color checkedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.7)
property color pressedBorderColor: Qt.rgba(highlightBarColor.r, highlightBarColor.g, highlightBarColor.b, 0.9)
property url source
property string name
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
display: T.AbstractButton.TextUnderIcon
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.inherit: false
// not using the hover handler built into control, since it seems to misbehave and
// permanently report hovered after a touch event
HoverHandler {
id: hoverHandler
}
padding: Kirigami.Units.smallSpacing
spacing: Kirigami.Units.smallSpacing
icon.height: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
icon.width: control.display === T.AbstractButton.TextBesideIcon ? Kirigami.Units.iconSizes.small : Kirigami.Units.iconSizes.smallMedium
icon.color: control.checked ? control.highlightForegroundColor : control.foregroundColor
background: Rectangle {
Kirigami.Theme.colorSet: Kirigami.Theme.Button
Kirigami.Theme.inherit: false
implicitHeight: (control.display === T.AbstractButton.TextBesideIcon) ? 0 : (Kirigami.Units.gridUnit * 3 + Kirigami.Units.smallSpacing * 2)
color: "transparent"
Rectangle {
width: parent.width - Kirigami.Units.largeSpacing
height: parent.height - Kirigami.Units.largeSpacing
anchors.centerIn: parent
radius: Kirigami.Units.smallSpacing
color: control.down ? pressedColor : (control.checked || hoverHandler.hovered ? hoverSelectColor : "transparent")
border.color: control.checked ? checkedBorderColor : (control.down ? pressedBorderColor : color)
border.width: 1
Behavior on color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
Behavior on border.color { ColorAnimation { duration: Kirigami.Units.shortDuration } }
}
}
contentItem: GridLayout {
id: gridLayout
columnSpacing: 0
rowSpacing: (label.visible && label.lineCount > 1) ? 0 : control.spacing
// if this is a row or a column
columns: control.display !== T.AbstractButton.TextBesideIcon ? 1 : 2
property real verticalMargins: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.largeSpacing : 0
Kirigami.Avatar {
id: icon
source: control.source
name: control.name
Layout.topMargin: gridLayout.verticalMargins
Layout.bottomMargin: gridLayout.verticalMargins
Layout.leftMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
Layout.rightMargin: (control.display === T.AbstractButton.TextBesideIcon) ? Kirigami.Units.gridUnit : 0
Layout.alignment: {
if (control.display === T.AbstractButton.TextBesideIcon) {
// row layout
return Qt.AlignVCenter | Qt.AlignRight;
} else {
// column layout
return Qt.AlignHCenter | ((!label.visible || label.lineCount > 1) ? Qt.AlignVCenter : Qt.AlignBottom);
}
}
Layout.preferredWidth: Kirigami.Units.iconSizes.medium
Layout.preferredHeight: Kirigami.Units.iconSizes.medium
}
QQC2.Label {
id: label
Kirigami.MnemonicData.enabled: control.enabled && control.visible
Kirigami.MnemonicData.controlType: Kirigami.MnemonicData.MenuItem
Kirigami.MnemonicData.label: control.text
text: Kirigami.MnemonicData.richTextLabel
horizontalAlignment: (control.display === T.AbstractButton.TextBesideIcon) ? Text.AlignLeft : Text.AlignHCenter
visible: control.display !== T.AbstractButton.IconOnly
wrapMode: Text.Wrap
elide: Text.ElideMiddle
color: control.checked ? control.highlightForegroundColor : control.foregroundColor
font.bold: control.checked
font.family: Kirigami.Theme.smallFont.family
font.pointSize: {
if (control.display === T.AbstractButton.TextBesideIcon) {
// row layout
return Kirigami.Theme.defaultFont.pointSize;
} else {
// column layout
return icon.visible ? Kirigami.Theme.smallFont.pointSize : Kirigami.Theme.defaultFont.pointSize * 1.20; // 1.20 is equivalent to level 2 heading
}
}
Behavior on color { ColorAnimation {} }
Behavior on opacity { NumberAnimation {} }
Layout.topMargin: gridLayout.verticalMargins
Layout.bottomMargin: gridLayout.verticalMargins
Layout.alignment: {
if (control.display === T.AbstractButton.TextBesideIcon) {
// row layout
return Qt.AlignVCenter | Qt.AlignLeft;
} else {
// column layout
return icon.visible ? Qt.AlignHCenter | Qt.AlignTop : Qt.AlignCenter;
}
}
// Work around bold text changing implicit size
Layout.preferredWidth: boldMetrics.implicitWidth
Layout.preferredHeight: boldMetrics.implicitHeight * label.lineCount
Layout.fillWidth: true
QQC2.Label {
id: boldMetrics
visible: false
text: parent.text
font.bold: true
font.family: Kirigami.Theme.smallFont.family
font.pointSize: Kirigami.Theme.smallFont.pointSize
horizontalAlignment: Text.AlignHCenter
wrapMode: QQC2.Label.Wrap
elide: Text.ElideMiddle
}
}
}
}

263
src/qml/Page/RoomList/Page.qml
View File

@@ -13,8 +13,9 @@ import org.kde.kitemmodels 1.0
import org.kde.neochat 1.0
import './' as RoomList
import '../' as NeoChat
Kirigami.ScrollablePage {
Kirigami.Page {
id: root
/**
@@ -23,7 +24,8 @@ Kirigami.ScrollablePage {
* @note Other objects can access the value but the private function makes sure
* that only the internal members can modify it.
*/
readonly property int currentWidth: _private.currentWidth
readonly property int currentWidth: _private.currentWidth + spaceListWidth
readonly property alias spaceListWidth: spaceDrawer.width
readonly property RoomListModel roomListModel: RoomListModel {
connection: Controller.activeConnection
@@ -37,24 +39,6 @@ Kirigami.ScrollablePage {
sortFilterRoomListModel.filterText = "";
}
header: ColumnLayout {
visible: !root.collapsed
spacing: 0
RoomList.SpaceListView {
roomListModel: root.roomListModel
}
Kirigami.Separator {
Layout.fillWidth: true
}
Component {
id: spaceListContextMenu
SpaceListContextMenu {}
}
}
Connections {
target: RoomManager
function onCurrentRoomChanged() {
@@ -106,135 +90,158 @@ Kirigami.ScrollablePage {
collapsed: root.collapsed
}
ListView {
id: listView
padding: 0
activeFocusOnTab: true
clip: AccountRegistry.count > 1
RowLayout {
anchors.fill: parent
spacing: 1
header: QQC2.ItemDelegate {
width: visible ? ListView.view.width : 0
height: visible ? Kirigami.Units.gridUnit * 2 : 0
visible: root.collapsed
topPadding: Kirigami.Units.largeSpacing
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
bottomPadding: Kirigami.Units.largeSpacing
onClicked: quickView.item.open();
Kirigami.Icon {
anchors.centerIn: parent
width: Kirigami.Units.iconSizes.smallMedium
height: Kirigami.Units.iconSizes.smallMedium
source: "search"
}
Kirigami.Separator {
width: parent.width
anchors.bottom: parent.bottom
}
NeoChat.SpaceDrawer {
id: spaceDrawer
Layout.preferredWidth: spaceDrawer.enabled ? Kirigami.Units.gridUnit * 3 : 0
Layout.fillHeight: true
}
Layout.fillWidth: true
QQC2.ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
Kirigami.PlaceholderMessage {
anchors.centerIn: parent
width: parent.width - (Kirigami.Units.largeSpacing * 4)
visible: listView.count == 0
text: sortFilterRoomListModel.filterText.length > 0 ? i18n("No rooms found") : i18n("Join some rooms to get started")
helpfulAction: Kirigami.Action {
icon.name: sortFilterRoomListModel.filterText.length > 0 ? "search" : "list-add"
text: sortFilterRoomListModel.filterText.length > 0 ? i18n("Search in room directory") : i18n("Explore rooms")
onTriggered: pageStack.layers.push("qrc:/JoinRoomPage.qml", {
connection: Controller.activeConnection,
keyword: sortFilterRoomListModel.filterText
})
background: Rectangle {
color: Kirigami.Theme.backgroundColor
Kirigami.Theme.colorSet: Kirigami.Theme.View
}
}
ItemSelectionModel {
id: itemSelection
model: root.roomListModel
onCurrentChanged: listView.currentIndex = sortFilterRoomListModel.mapFromSource(current).row
}
ListView {
id: listView
model: SortFilterRoomListModel {
id: sortFilterRoomListModel
activeFocusOnTab: true
clip: AccountRegistry.count > 1
sourceModel: root.roomListModel
roomSortOrder: Config.mergeRoomList ? SortFilterRoomListModel.LastActivity : SortFilterRoomListModel.Categories
onLayoutChanged: {
listView.currentIndex = sortFilterRoomListModel.mapFromSource(itemSelection.currentIndex).row
}
}
header: QQC2.ItemDelegate {
width: visible ? ListView.view.width : 0
height: visible ? Kirigami.Units.gridUnit * 2 : 0
section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null
section.delegate: root.collapsed ? foldButton : sectionHeader
visible: root.collapsed
Component {
id: sectionHeader
Kirigami.ListSectionHeader {
height: implicitHeight
label: roomListModel.categoryName(section)
action: Kirigami.Action {
onTriggered: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
}
contentItem.children: QQC2.ToolButton {
icon {
name: roomListModel.categoryVisible(section) ? "go-up" : "go-down"
width: Kirigami.Units.iconSizes.small
height: Kirigami.Units.iconSizes.small
}
topPadding: Kirigami.Units.largeSpacing
leftPadding: Kirigami.Units.largeSpacing
rightPadding: Kirigami.Units.largeSpacing
bottomPadding: Kirigami.Units.largeSpacing
onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
}
}
}
Component {
id: foldButton
Item {
width: ListView.view.width
height: visible ? width : 0
QQC2.ToolButton {
id: button
anchors.centerIn: parent
onClicked: quickView.item.open();
icon {
name: hovered ? (roomListModel.categoryVisible(section) ? "go-up" : "go-down") : roomListModel.categoryIconName(section)
Kirigami.Icon {
anchors.centerIn: parent
width: Kirigami.Units.iconSizes.smallMedium
height: Kirigami.Units.iconSizes.smallMedium
source: "search"
}
onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
QQC2.ToolTip.text: roomListModel.categoryName(section)
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
Kirigami.Separator {
width: parent.width
anchors.bottom: parent.bottom
}
}
}
}
reuseItems: true
currentIndex: -1 // we don't want any room highlighted by default
Kirigami.PlaceholderMessage {
anchors.centerIn: parent
width: parent.width - (Kirigami.Units.largeSpacing * 4)
visible: listView.count == 0
text: sortFilterRoomListModel.filterText.length > 0 ? i18n("No rooms found") : i18n("Join some rooms to get started")
helpfulAction: Kirigami.Action {
icon.name: sortFilterRoomListModel.filterText.length > 0 ? "search" : "list-add"
text: sortFilterRoomListModel.filterText.length > 0 ? i18n("Search in room directory") : i18n("Explore rooms")
onTriggered: pageStack.layers.push("qrc:/JoinRoomPage.qml", {
connection: Controller.activeConnection,
keyword: sortFilterRoomListModel.filterText
})
}
}
delegate: root.collapsed ? collapsedModeListComponent : normalModeListComponent
ItemSelectionModel {
id: itemSelection
model: root.roomListModel
onCurrentChanged: listView.currentIndex = sortFilterRoomListModel.mapFromSource(current).row
}
Component {
id: collapsedModeListComponent
model: SortFilterRoomListModel {
id: sortFilterRoomListModel
RoomList.CollapsedRoomDelegate {
filterText: sortFilterRoomListModel.filterText
}
}
sourceModel: root.roomListModel
roomSortOrder: Config.mergeRoomList ? SortFilterRoomListModel.LastActivity : SortFilterRoomListModel.Categories
onLayoutChanged: {
listView.currentIndex = sortFilterRoomListModel.mapFromSource(itemSelection.currentIndex).row
}
activeSpaceId: spaceDrawer.selectedSpaceId
}
Component {
id: normalModeListComponent
section.property: sortFilterRoomListModel.filterText.length === 0 && !Config.mergeRoomList ? "category" : null
section.delegate: root.collapsed ? foldButton : sectionHeader
RoomList.RoomDelegate {
filterText: sortFilterRoomListModel.filterText
Component {
id: sectionHeader
Kirigami.ListSectionHeader {
height: implicitHeight
label: roomListModel.categoryName(section)
action: Kirigami.Action {
onTriggered: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
}
contentItem.children: QQC2.ToolButton {
icon {
name: roomListModel.categoryVisible(section) ? "go-up" : "go-down"
width: Kirigami.Units.iconSizes.small
height: Kirigami.Units.iconSizes.small
}
onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
}
}
}
Component {
id: foldButton
Item {
width: ListView.view.width
height: visible ? width : 0
QQC2.ToolButton {
id: button
anchors.centerIn: parent
icon {
name: hovered ? (roomListModel.categoryVisible(section) ? "go-up" : "go-down") : roomListModel.categoryIconName(section)
width: Kirigami.Units.iconSizes.smallMedium
height: Kirigami.Units.iconSizes.smallMedium
}
onClicked: roomListModel.setCategoryVisible(section, !roomListModel.categoryVisible(section))
QQC2.ToolTip.text: roomListModel.categoryName(section)
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
}
}
}
reuseItems: true
currentIndex: -1 // we don't want any room highlighted by default
delegate: root.collapsed ? collapsedModeListComponent : normalModeListComponent
Component {
id: collapsedModeListComponent
RoomList.CollapsedRoomDelegate {
filterText: sortFilterRoomListModel.filterText
}
}
Component {
id: normalModeListComponent
RoomList.RoomDelegate {
filterText: sortFilterRoomListModel.filterText
}
}
}
}
}
@@ -269,7 +276,7 @@ Kirigami.ScrollablePage {
// we moved to the right
if (_private.currentWidth < _private.collapseWidth && _private.currentWidth + (mouse.x - _lastX) >= _private.collapseWidth) {
// Here we get back directly to a more wide mode.
_private.currentWidth = _private.collapseWidth;
_private.currentWidth = _private.defaultWidth;
Config.collapsed = false;
} else if (_private.currentWidth >= _private.collapseWidth) {
// Increase page width
@@ -278,7 +285,7 @@ Kirigami.ScrollablePage {
} else if (mouse.x < _lastX) {
const tmpWidth = _private.currentWidth - (_lastX - mouse.x);
if (tmpWidth < _private.collapseWidth) {
_private.currentWidth = Qt.binding(() => _private.collapsedSize + (root.contentItem.QQC2.ScrollBar.vertical.visible ? root.contentItem.QQC2.ScrollBar.vertical.width : 0));
_private.currentWidth = Qt.binding(() => _private.collapsedSize);
Config.collapsed = true;
} else {
_private.currentWidth = tmpWidth;
@@ -296,6 +303,6 @@ Kirigami.ScrollablePage {
property int currentWidth: Config.collapsed ? collapsedSize : defaultWidth
readonly property int defaultWidth: Kirigami.Units.gridUnit * 17
readonly property int collapseWidth: Kirigami.Units.gridUnit * 10
readonly property int collapsedSize: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3
readonly property int collapsedSize: Kirigami.Units.gridUnit * 3 - Kirigami.Units.smallSpacing * 3 + (scrollView.QQC2.ScrollBar.vertical.visible ? scrollView.QQC2.ScrollBar.vertical.width : 0)
}
}

115
src/qml/Page/RoomList/SpaceDrawer.qml Normal file
View File

@@ -0,0 +1,115 @@
// SPDX-FileCopyrightText: 2020-2023 Tobias Fella <tobias.fella@kde.org>
// SPDX-FileCopyrightText: 2021-2022 Bart De Vries <bart@mogwai.be>
// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami
import '.'
import org.kde.neochat 1.0
QQC2.Control {
id: root
readonly property real pinnedWidth: Kirigami.Units.gridUnit * 6
readonly property int buttonDisplayMode: Kirigami.NavigationTabButton.IconOnly
property bool drawerEnabled: true
Kirigami.Theme.colorSet: Kirigami.Theme.Window
Kirigami.Theme.inherit: false
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0
property string selectedSpaceId
background: Rectangle {
color: Kirigami.Theme.backgroundColor
Kirigami.Theme.colorSet: Kirigami.Theme.View
Kirigami.Theme.inherit: false
}
contentItem: Loader {
id: sidebarColumn
active: root.drawerEnabled
z: 0
sourceComponent: ColumnLayout {
spacing: 0
QQC2.ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
QQC2.ScrollBar.vertical.policy: QQC2.ScrollBar.AlwaysOff
QQC2.ScrollBar.horizontal.policy: QQC2.ScrollBar.AlwaysOff
contentWidth: -1 // disable horizontal scroll
ColumnLayout {
id: column
width: scrollView.width
spacing: 0
Kirigami.NavigationTabButton {
Layout.fillWidth: true
Layout.preferredHeight: width
display: Kirigami.NavigationTabButton.IconOnly
text: i18n("All Rooms")
icon.name: "globe"
checked: true
onClicked: root.selectedSpaceId = ""
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.text: text
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
}
Repeater {
model: SortFilterSpaceListModel {
sourceModel: RoomListModel {
connection: Controller.activeConnection
}
}
onCountChanged: root.enabled = count > 0
delegate: AvatarTabButton {
Layout.fillWidth: true
Layout.preferredHeight: width
display: Kirigami.NavigationTabButton.IconOnly
text: model.name
source: "image://mxc/" + model.avatar
name: model.name
onClicked: root.selectedSpaceId = model.id
QQC2.ToolTip.visible: hovered
QQC2.ToolTip.text: text
QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
onPressAndHold: root.createContextMenu(model.currentRoom)
TapHandler {
acceptedButtons: Qt.RightButton
acceptedDevices: PointerDevice.Mouse
onTapped: root.createContextMenu(model.currentRoom)
}
}
}
}
}
}
}
function createContextMenu(room) {
let context = spaceListContextMenu.createObject(root, {
room: room
});
context.open()
}
Component {
id: spaceListContextMenu
SpaceListContextMenu {}
}
}