From fb3b1490a9803392f7ba1318b89ea33ff73e5d61 Mon Sep 17 00:00:00 2001 From: James Graham Date: Sun, 28 Jan 2024 17:13:23 +0000 Subject: [PATCH] Compact Mode Improvements 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) --- src/qml/Bubble.qml | 1 + src/qml/MessageDelegate.qml | 126 +++++++++++++++-------------------- src/qml/TimelineDelegate.qml | 2 +- 3 files changed, 55 insertions(+), 74 deletions(-) diff --git a/src/qml/Bubble.qml b/src/qml/Bubble.qml index c5aa183ce..c3784b953 100644 --- a/src/qml/Bubble.qml +++ b/src/qml/Bubble.qml @@ -8,6 +8,7 @@ import QtQuick.Layouts import org.kde.kirigami as Kirigami import org.kde.neochat +import org.kde.neochat.config /** * @brief A chat bubble for displaying the content of message events. diff --git a/src/qml/MessageDelegate.qml b/src/qml/MessageDelegate.qml index b3e370314..9b7e1bc6c 100644 --- a/src/qml/MessageDelegate.qml +++ b/src/qml/MessageDelegate.qml @@ -228,14 +228,14 @@ TimelineDelegate { * * @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. * * @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. @@ -319,13 +319,10 @@ TimelineDelegate { } QQC2.ItemDelegate { id: mainContainer - 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: { if (root.isReply && root.replyDelegateType === DelegateType.Other) { @@ -340,78 +337,60 @@ TimelineDelegate { } } - KirigamiComponents.AvatarButton { - id: avatar - width: visible || Config.showAvatarInTimeline ? Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2: 0 - height: width - anchors { - left: parent.left - leftMargin: Kirigami.Units.smallSpacing - top: parent.top - topMargin: Kirigami.Units.smallSpacing - } + contentItem: RowLayout { + RowLayout { + id: avatarBubbleRow + Layout.alignment: _private.showUserMessageOnRight && !Config.compactLayout ? Qt.AlignRight : Qt.AlignLeft + KirigamiComponents.AvatarButton { + id: avatar + Layout.topMargin: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : 0 + Layout.alignment: Qt.AlignTop + implicitWidth: Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing * 2 + implicitHeight: implicitWidth - visible: (root.showAuthor || root.alwaysShowAuthor) && - Config.showAvatarInTimeline && - (Config.compactLayout || !_private.showUserMessageOnRight) - name: root.author.displayName - source: root.author.avatarSource - color: root.author.color - QQC2.ToolTip.text: root.author.escapedDisplayName + visible: (root.showAuthor || root.alwaysShowAuthor) && + Config.showAvatarInTimeline && + (Config.compactLayout || !_private.showUserMessageOnRight) + name: root.author.displayName + source: root.author.avatarSource + color: root.author.color + QQC2.ToolTip.text: root.author.escapedDisplayName - 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 - } + onClicked: RoomManager.resolveResource(root.author.id, "mention") } - ] + Item { + visible: !avatar.visible + implicitWidth: avatar.implicitWidth + } + Bubble { + id: bubble + Layout.fillWidth: Config.compactLayout ? true : false + maxContentWidth: root.contentMaxWidth - author: root.author - showAuthor: root.showAuthor || root.alwaysShowAuthor - time: root.time - timeString: root.timeString + topPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + bottomPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + leftPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing + 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 - replyId: root.replyId - replyAuthor: root.replyAuthor - replyDelegateType: root.replyDelegateType - replyDisplay: root.replyDisplay - replyMediaInfo: root.replyMediaInfo + showHighlight: root.showHighlight - 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 { @@ -434,8 +413,9 @@ TimelineDelegate { ReactionDelegate { Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2 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.bottomMargin: Config.compactLayout ? Kirigami.Units.smallSpacing : 0 visible: root.showReactions model: root.reaction @@ -458,7 +438,7 @@ TimelineDelegate { startPercentWidth: Config.compactLayout || root.alwaysMaxWidth ? 100 : 90 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) } } diff --git a/src/qml/TimelineDelegate.qml b/src/qml/TimelineDelegate.qml index fcc1c05f5..d06aebbdd 100644 --- a/src/qml/TimelineDelegate.qml +++ b/src/qml/TimelineDelegate.qml @@ -55,7 +55,7 @@ Item { id: contentItemParent anchors.top: parent.top 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" // Align left when in compact mode and center when using bubbles