From 7b7cb43b021bed388d7f7edc910419540bdec518 Mon Sep 17 00:00:00 2001
From: Ghostkeeper <rubend@tutanota.com>
Date: Tue, 9 Nov 2021 16:58:30 +0100
Subject: [PATCH] Improved elision

It seems to correctly place the elide character now. One more detail that's incorrect is that it shows two elision characters if it's eliding due to maximum line count. I'll see what I can do...

Contributes to issue CURA-8561.
---
 .../Marketplace/resources/qml/PackageCard.qml | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml
index 4b1ab78c72..ee35e6c5a0 100644
--- a/plugins/Marketplace/resources/qml/PackageCard.qml
+++ b/plugins/Marketplace/resources/qml/PackageCard.qml
@@ -112,6 +112,7 @@ Rectangle
                 {
                     id: descriptionLabel
                     width: parent.width
+                    property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.
 
                     text: packageData.description
                     maximumLineCount: 2
@@ -122,7 +123,9 @@ Rectangle
                     {
                         if(truncated && line.isLast)
                         {
-                            line.width = Math.min(line.width, parent.width - readMoreButton.width);
+                            line.width = Math.min(line.implicitWidth,
+                                parent.width - readMoreButton.width - fontMetrics.advanceWidth("… "));
+                            descriptionLabel.lastLineWidth = line.implicitWidth;
                         }
                     }
                 }
@@ -132,15 +135,26 @@ Rectangle
                     id: readMoreButton
                     anchors.right: parent.right
                     anchors.bottom: parent.bottom
-                    height: authorBy.height //Height of a single line.
+                    height: fontMetrics.height //Height of a single line.
+
+                    text: catalog.i18nc("@info", "Read more")
+                    iconSource: UM.Theme.getIcon("LinkExternal")
 
                     visible: descriptionLabel.truncated
                     enabled: visible
                     leftPadding: UM.Theme.getSize("default_margin").width
-                    rightPadding: 0
+                    rightPadding: UM.Theme.getSize("wide_margin").width
                     textFont: descriptionLabel.font
+                    isIconOnRightSide: true
+                }
 
-                    text: catalog.i18nc("@info", "Read more")
+                Label
+                {
+                    text: "... "
+                    visible: descriptionLabel.truncated
+                    anchors.left: parent.left
+                    anchors.leftMargin: descriptionLabel.lastLineWidth
+                    anchors.bottom: readMoreButton.bottom
                 }
             }
 
@@ -186,4 +200,10 @@ Rectangle
             }
         }
     }
+
+    FontMetrics
+    {
+        id: fontMetrics
+        font: UM.Theme.getFont("default")
+    }
 }