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

Compact Mode Improvements

Browse Source 
Get rid of the anchors and move to layouts for th bubble and avatars.

This allows the timestamp to be fixed in compact mode so it always sits on the far right. It's also just now more compact than before.

![image](/uploads/7747a9b3f2f4cfb56a8d9b0f943a127f/image.png)
This commit is contained in:
James Graham
2024-01-28 17:13:23 +00:00
parent 48502480df
commit fb3b1490a9
3 changed files with 55 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/qml/Bubble.qml
View File

@@ -8,6 +8,7 @@ import QtQuick.Layouts
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
import org.kde.neochat import org.kde.neochat
import org.kde.neochat.config
/** /**
* @brief A chat bubble for displaying the content of message events. * @brief A chat bubble for displaying the content of message events.

126
src/qml/MessageDelegate.qml
View File

@@ -228,14 +228,14 @@ TimelineDelegate {
* *
* @note Used for positioning the hover actions. * @note Used for positioning the hover actions.
*/ */
readonly property real bubbleX: bubble.x + bubble.anchors.leftMargin readonly property real bubbleX: bubble.x + avatarBubbleRow.x + mainContainer.leftPadding
/** /**
* @brief The y position of the message bubble. * @brief The y position of the message bubble.
* *
* @note Used for positioning the hover actions. * @note Used for positioning the hover actions.
*/ */
readonly property alias bubbleY: mainContainer.y readonly property real bubbleY: mainContainer.y + (Config.compactLayout ? 0 : mainContainer.topPadding)
/** /**
* @brief The width of the message bubble. * @brief The width of the message bubble.
@@ -319,13 +319,10 @@ TimelineDelegate {
} }
QQC2.ItemDelegate { QQC2.ItemDelegate {
id: mainContainer id: mainContainer
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: root.showAuthor || root.alwaysShowAuthor ? Kirigami.Units.largeSpacing : (Config.compactLayout ? 1 : Kirigami.Units.smallSpacing)
Layout.leftMargin: Kirigami.Units.smallSpacing
Layout.rightMargin: Kirigami.Units.smallSpacing
implicitHeight: Math.max(root.showAuthor || root.alwaysShowAuthor ? avatar.implicitHeight : 0, bubble.height) leftPadding: Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.largeSpacing
Component.onCompleted: { Component.onCompleted: {
if (root.isReply && root.replyDelegateType === DelegateType.Other) { if (root.isReply && root.replyDelegateType === DelegateType.Other) {
@@ -340,78 +337,60 @@ TimelineDelegate {
} }
} }
KirigamiComponents.AvatarButton { contentItem: RowLayout {
id: avatar RowLayout {
width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0 id: avatarBubbleRow
height: width Layout.alignment: _private.showUserMessageOnRight && !Config.compactLayout ? Qt.AlignRight : Qt.AlignLeft
anchors { KirigamiComponents.AvatarButton {
left: parent.left id: avatar
leftMargin: Kirigami.Units.smallSpacing Layout.topMargin: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : 0
top: parent.top Layout.alignment: Qt.AlignTop
topMargin: Kirigami.Units.smallSpacing implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2
} implicitHeight: implicitWidth
visible: (root.showAuthor || root.alwaysShowAuthor) && visible: (root.showAuthor || root.alwaysShowAuthor) &&
Config.showAvatarInTimeline && Config.showAvatarInTimeline &&
(Config.compactLayout || !_private.showUserMessageOnRight) (Config.compactLayout || !_private.showUserMessageOnRight)
name: root.author.displayName name: root.author.displayName
source: root.author.avatarSource source: root.author.avatarSource
color: root.author.color color: root.author.color
QQC2.ToolTip.text: root.author.escapedDisplayName QQC2.ToolTip.text: root.author.escapedDisplayName
onClicked: RoomManager.resolveResource(root.author.id, "mention") onClicked: RoomManager.resolveResource(root.author.id, "mention")
}
Bubble {
id: bubble
anchors.left: avatar.right
anchors.leftMargin: Kirigami.Units.largeSpacing
anchors.rightMargin: Kirigami.Units.largeSpacing
maxContentWidth: root.contentMaxWidth
topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
rightPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
state: _private.showUserMessageOnRight ? "userMessageOnRight" : "userMessageOnLeft"
// states for anchor animations on window resize
// as setting anchors to undefined did not work reliably
states: [
State {
name: "userMessageOnRight"
AnchorChanges {
target: bubble
anchors.left: undefined
anchors.right: parent.right
}
},
State {
name: "userMessageOnLeft"
AnchorChanges {
target: bubble
anchors.left: avatar.right
anchors.right: undefined
}
} }
] Item {
visible: !avatar.visible
implicitWidth: avatar.implicitWidth
}
Bubble {
id: bubble
Layout.fillWidth: Config.compactLayout ? true : false
maxContentWidth: root.contentMaxWidth
author: root.author topPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing
showAuthor: root.showAuthor || root.alwaysShowAuthor bottomPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing
time: root.time leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
timeString: root.timeString rightPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
showHighlight: root.showHighlight author: root.author
showAuthor: root.showAuthor || root.alwaysShowAuthor
time: root.time
timeString: root.timeString
isReply: root.isReply showHighlight: root.showHighlight
replyId: root.replyId
replyAuthor: root.replyAuthor
replyDelegateType: root.replyDelegateType
replyDisplay: root.replyDisplay
replyMediaInfo: root.replyMediaInfo
onReplyClicked: (eventId) => {root.replyClicked(eventId)} isReply: root.isReply
replyId: root.replyId
replyAuthor: root.replyAuthor
replyDelegateType: root.replyDelegateType
replyDisplay: root.replyDisplay
replyMediaInfo: root.replyMediaInfo
showBackground: root.cardBackground && !Config.compactLayout onReplyClicked: (eventId) => {root.replyClicked(eventId)}
showBackground: root.cardBackground && !Config.compactLayout
}
}
} }
background: Rectangle { background: Rectangle {
@@ -434,8 +413,9 @@ TimelineDelegate {
ReactionDelegate { ReactionDelegate {
Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2 Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2
Layout.alignment: _private.showUserMessageOnRight ? Qt.AlignRight : Qt.AlignLeft Layout.alignment: _private.showUserMessageOnRight ? Qt.AlignRight : Qt.AlignLeft
Layout.leftMargin: _private.showUserMessageOnRight ? 0 : bubble.x + bubble.anchors.leftMargin Layout.leftMargin: _private.showUserMessageOnRight ? 0 : bubble.x + mainContainer.leftPadding
Layout.rightMargin: _private.showUserMessageOnRight ? Kirigami.Units.largeSpacing : 0 Layout.rightMargin: _private.showUserMessageOnRight ? Kirigami.Units.largeSpacing : 0
Layout.bottomMargin: Config.compactLayout ? Kirigami.Units.smallSpacing : 0
visible: root.showReactions visible: root.showReactions
model: root.reaction model: root.reaction
@@ -458,7 +438,7 @@ TimelineDelegate {
startPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 90 startPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 90
endPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 60 endPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 60
parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + bubble.anchors.leftMargin : 0) parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + avatarBubbleRow.spacing : 0)
} }
} }

2
src/qml/TimelineDelegate.qml
View File

@@ -55,7 +55,7 @@ Item {
id: contentItemParent id: contentItemParent
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.leftMargin: state === "alignLeft" ? Kirigami.Units.largeSpacing : 0 anchors.leftMargin: state === "alignLeft" ? Kirigami.Units.smallSpacing : 0
state: Config.compactLayout || root.alwaysMaxWidth ? "alignLeft" : "alignCenter" state: Config.compactLayout || root.alwaysMaxWidth ? "alignLeft" : "alignCenter"
// Align left when in compact mode and center when using bubbles // Align left when in compact mode and center when using bubbles