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

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

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,16 +337,16 @@ TimelineDelegate {
                 }
             }
 
+            contentItem: RowLayout {
+                RowLayout {
+                    id: avatarBubbleRow
+                    Layout.alignment: _private.showUserMessageOnRight && !Config.compactLayout ? Qt.AlignRight : Qt.AlignLeft
                     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
-                }
+                        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 &&
@@ -361,39 +358,19 @@ TimelineDelegate {
 
                         onClicked: RoomManager.resolveResource(root.author.id, "mention")
                     }
+                    Item {
+                        visible: !avatar.visible
+                        implicitWidth: avatar.implicitWidth
+                    }
                     Bubble {
                         id: bubble
-                anchors.left: avatar.right
-                anchors.leftMargin: Kirigami.Units.largeSpacing
-                anchors.rightMargin: Kirigami.Units.largeSpacing
+                        Layout.fillWidth: Config.compactLayout ? true : false
                         maxContentWidth: root.contentMaxWidth
 
-                topPadding: Config.compactLayout ? Kirigami.Units.smallSpacing / 2 : Kirigami.Units.largeSpacing
-                bottomPadding: Config.compactLayout ? Kirigami.Units.mediumSpacing / 2 : Kirigami.Units.largeSpacing
+                        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: 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
-                        }
-                    }
-                ]
+                        rightPadding: Config.compactLayout ? 0 : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
 
                         author: root.author
                         showAuthor: root.showAuthor || root.alwaysShowAuthor
@@ -413,6 +390,8 @@ TimelineDelegate {
 
                         showBackground: root.cardBackground && !Config.compactLayout
                     }
+                }
+            }
 
             background: Rectangle {
                 visible: mainContainer.hovered && (Config.compactLayout || root.alwaysMaxWidth)
@@ -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)
         }
     }
 

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