Improve Delegate Width Sizing

Create a cpp helper class to calculate the correct delegate width given it's parent width. This is designed to be more robust and hopefully easier to understand than the current mass of javascript calcs. BUG: 470167
2023-05-30 18:14:25 +00:00
parent f1be509d13
commit fa37f28c94
10 changed files with 492 additions and 23 deletions
--- a/src/qml/Component/ChatBox/ChatBar.qml
+++ b/src/qml/Component/ChatBox/ChatBar.qml
@@ -119,7 +119,7 @@ QQC2.Control {
        QQC2.TextArea {
            id: textField

-            x: Math.round((root.width - chatBoxMaxWidth) / 2) - (root.width > chatBoxMaxWidth ? Kirigami.Units.largeSpacing * 1.5 : 0)
+            x: Math.round((root.width - chatBarSizeHelper.currentWidth) / 2) - (root.width > chatBarSizeHelper.currentWidth + Kirigami.Units.largeSpacing * 2.5 ? Kirigami.Units.largeSpacing * 1.5 : 0)
            topPadding: Kirigami.Units.largeSpacing + (paneLoader.visible ? paneLoader.height : 0)
            bottomPadding: Kirigami.Units.largeSpacing
            leftPadding: LayoutMirroring.enabled ? actionsRow.width : Kirigami.Units.largeSpacing
@@ -232,9 +232,9 @@ QQC2.Control {

                anchors.top: parent.top
                anchors.left: parent.left
-                anchors.leftMargin: root.width > chatBoxMaxWidth ? 0 : Kirigami.Units.largeSpacing
+                anchors.leftMargin: Kirigami.Units.largeSpacing
                anchors.right: parent.right
-                anchors.rightMargin: root.width > chatBoxMaxWidth ? 0 : (chatBarScrollView.QQC2.ScrollBar.vertical.visible ? Kirigami.Units.largeSpacing * 3.5 : Kirigami.Units.largeSpacing)
+                anchors.rightMargin: root.width > chatBarSizeHelper.currentWidth ? 0 : (chatBarScrollView.QQC2.ScrollBar.vertical.visible ? Kirigami.Units.largeSpacing * 3.5 : Kirigami.Units.largeSpacing)

                active: visible
                visible: root.isReplying || root.attachmentPaneVisible
@@ -299,7 +299,7 @@ QQC2.Control {
        id: cancelButton
        anchors.top: parent.top
        anchors.right: parent.right
-        anchors.rightMargin: (root.width - chatBoxMaxWidth) / 2 + Kirigami.Units.largeSpacing + (chatBarScrollView.QQC2.ScrollBar.vertical.visible && !(root.width > chatBoxMaxWidth) ? Kirigami.Units.largeSpacing * 2.5 : 0)
+        anchors.rightMargin: (root.width - chatBarSizeHelper.currentWidth) / 2 + Kirigami.Units.largeSpacing + (chatBarScrollView.QQC2.ScrollBar.vertical.visible && !(root.width > chatBarSizeHelper.currentWidth) ? Kirigami.Units.largeSpacing * 2.5 : 0)

        visible: root.isReplying
        display: QQC2.AbstractButton.IconOnly
@@ -320,7 +320,7 @@ QQC2.Control {
        padding: Kirigami.Units.smallSpacing
        spacing: Kirigami.Units.smallSpacing
        anchors.right: parent.right
-        property var requiredMargin: (root.width - chatBoxMaxWidth) / 2 + Kirigami.Units.largeSpacing + (chatBarScrollView.QQC2.ScrollBar.vertical.visible && !(root.width > chatBoxMaxWidth) ? Kirigami.Units.largeSpacing * 2.5 : 0)
+        property var requiredMargin: (root.width - chatBarSizeHelper.currentWidth) / 2 + Kirigami.Units.largeSpacing + (chatBarScrollView.QQC2.ScrollBar.vertical.visible && !(root.width > chatBarSizeHelper.currentWidth) ? Kirigami.Units.largeSpacing * 2.5 : 0)
        anchors.leftMargin: layoutDirection === Qt.RightToLeft ? requiredMargin : 0
        anchors.rightMargin: layoutDirection === Qt.RightToLeft ? 0 : requiredMargin
        anchors.bottom: parent.bottom
@@ -400,6 +400,17 @@ QQC2.Control {
        }
    }

+    DelegateSizeHelper {
+        id: chatBarSizeHelper
+        startBreakpoint: Kirigami.Units.gridUnit * 46
+        endBreakpoint: Kirigami.Units.gridUnit * 66
+        startPercentWidth: 100
+        endPercentWidth: Config.compactLayout ? 100 : 85
+        maxWidth: Config.compactLayout ? -1 : Kirigami.Units.gridUnit * 60
+
+        parentWidth: root.width
+    }
+
    function forceActiveFocus() {
        textField.forceActiveFocus();
        // set the cursor to the end of the text
--- a/src/qml/Component/ChatBox/ChatBox.qml
+++ b/src/qml/Component/ChatBox/ChatBox.qml
@@ -16,9 +16,6 @@ ColumnLayout {

    property alias chatBar: chatBar

-    readonly property int extraWidth: width >= Kirigami.Units.gridUnit * 47 ? Math.min((width - Kirigami.Units.gridUnit * 47), Kirigami.Units.gridUnit * 20) : 0
-    readonly property int chatBoxMaxWidth: Config.compactLayout ? width : Math.min(width, Kirigami.Units.gridUnit * 39 + extraWidth)
-
    spacing: 0

    Kirigami.Theme.colorSet: Kirigami.Theme.View
--- a/src/qml/Component/Timeline/StateDelegate.qml
+++ b/src/qml/Component/Timeline/StateDelegate.qml
@@ -14,11 +14,7 @@ QQC2.Control {

    readonly property bool sectionVisible: model.showSection

-    // extraWidth defines how the delegate can grow after the listView gets very wide
-    readonly property int extraWidth: parent ? (parent.width >= Kirigami.Units.gridUnit * 46 ? Math.min((parent.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0) : 0
-    readonly property int delegateMaxWidth: parent ? (Config.compactLayout ? parent.width: Math.min(parent.width, Kirigami.Units.gridUnit * 40 + extraWidth)) : 0
-
-    width: delegateMaxWidth
+    width: stateDelegateSizeHelper.currentWidth

    state: Config.compactLayout ? "alignLeft" : "alignCenter"
    // Align left when in compact mode and center when using bubbles
@@ -170,4 +166,15 @@ QQC2.Control {
            excessAvatars: excessReadMarkers
        }
    }
+
+    DelegateSizeHelper {
+        id: stateDelegateSizeHelper
+        startBreakpoint: Kirigami.Units.gridUnit * 46
+        endBreakpoint: Kirigami.Units.gridUnit * 66
+        startPercentWidth: 100
+        endPercentWidth: Config.compactLayout ? 100 : 85
+        maxWidth: Config.compactLayout ? -1 : Kirigami.Units.gridUnit * 60
+
+        parentWidth: stateDelegate.parent ? stateDelegate.parent.width : 0
+    }
 }
--- a/src/qml/Component/Timeline/TimelineContainer.qml
+++ b/src/qml/Component/Timeline/TimelineContainer.qml
@@ -66,7 +66,6 @@ ColumnLayout {

    /**
     * @brief The delegate type of the message.
-     */
    required property int delegateType

    /**
@@ -290,15 +289,9 @@ ColumnLayout {
        onTriggered: isTemporaryHighlighted = false
    }

-    // TODO: make these private
-    // The bubble and delegate widths are allowed to grow once the ListView gets beyond a certain size
-    // extraWidth defines this as the excess after a certain ListView width, capped to a max value
-    readonly property int extraWidth: parent ? (parent.width >= Kirigami.Units.gridUnit * 46 ? Math.min((parent.width - Kirigami.Units.gridUnit * 46), Kirigami.Units.gridUnit * 20) : 0) : 0
-    readonly property int bubbleMaxWidth: Kirigami.Units.gridUnit * 20 + extraWidth * 0.5
-    readonly property int delegateWidth: parent ? (Config.compactLayout ? parent.width - Kirigami.Units.smallSpacing - (ListView.view.width >= Kirigami.Units.gridUnit * 20 ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing : 0) : Math.min(parent.width, Kirigami.Units.gridUnit * 40 + extraWidth)) : 0
-    readonly property int contentMaxWidth: Config.compactLayout ? width - (Config.showAvatarInTimeline ? Kirigami.Units.gridUnit * 2 : 0) - Kirigami.Units.largeSpacing * 4 : Math.min(width - Kirigami.Units.gridUnit * 2 - Kirigami.Units.largeSpacing * 6, bubbleMaxWidth)
+    readonly property int contentMaxWidth: bubbleSizeHelper.currentWidth

-    width: delegateWidth
+    width: parent ? timelineDelegateSizeHelper.currentWidth : 0
    spacing: Kirigami.Units.smallSpacing

    state: Config.compactLayout ? "alignLeft" : "alignCenter"
@@ -567,7 +560,7 @@ ColumnLayout {
    }

    ReactionDelegate {
-        Layout.maximumWidth: delegateWidth - Kirigami.Units.largeSpacing * 2
+        Layout.maximumWidth: root.width - Kirigami.Units.largeSpacing * 2
        Layout.alignment: showUserMessageOnRight ? Qt.AlignRight : Qt.AlignLeft
        Layout.leftMargin: showUserMessageOnRight ? 0 : bubble.x + bubble.anchors.leftMargin
        Layout.rightMargin: showUserMessageOnRight ? Kirigami.Units.largeSpacing : 0
@@ -621,4 +614,24 @@ ColumnLayout {
    function setHoverActionsToDelegate() {
        ListView.view.setHoverActionsToDelegate(root)
    }
+
+    DelegateSizeHelper {
+        id: timelineDelegateSizeHelper
+        startBreakpoint: Kirigami.Units.gridUnit * 46
+        endBreakpoint: Kirigami.Units.gridUnit * 66
+        startPercentWidth: 100
+        endPercentWidth: Config.compactLayout ? 100 : 85
+        maxWidth: Config.compactLayout ? -1 : Kirigami.Units.gridUnit * 60
+
+        parentWidth: root.parent ? root.parent.width - (Config.compactLayout && root.ListView.view.width >= Kirigami.Units.gridUnit * 20 ? Kirigami.Units.gridUnit * 2 + Kirigami.Units.largeSpacing : 0) : 0
+    }
+    DelegateSizeHelper {
+        id: bubbleSizeHelper
+        startBreakpoint: Kirigami.Units.gridUnit * 25
+        endBreakpoint: Kirigami.Units.gridUnit * 40
+        startPercentWidth: Config.compactLayout ? 100 : 90
+        endPercentWidth: Config.compactLayout ? 100 : 60
+
+        parentWidth: mainContainer.availableWidth - (Config.showAvatarInTimeline ? avatar.width + bubble.anchors.leftMargin : 0)
+    }
 }