From 4b3b0e0e0cf64aead03e871a0ac7e675b557052c Mon Sep 17 00:00:00 2001
From: Casper Jeukendrup <48658420+cbjeukendrup@users.noreply.github.com>
Date: Thu, 9 Feb 2023 23:44:18 +0100
Subject: [PATCH] Elide text at the borders of FlatButton

---
 .../Gallery/GeneralComponentsGallery.qml      | 24 +++++++++++++++++++
 .../qml/MuseScore/UiComponents/FlatButton.qml | 13 +++++++---
 .../internal/AudioResourceControl.qml         |  4 ++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/appshell/qml/DevTools/Gallery/GeneralComponentsGallery.qml b/src/appshell/qml/DevTools/Gallery/GeneralComponentsGallery.qml
index f9658ff278231..ecdd2abc2316a 100644
--- a/src/appshell/qml/DevTools/Gallery/GeneralComponentsGallery.qml
+++ b/src/appshell/qml/DevTools/Gallery/GeneralComponentsGallery.qml
@@ -366,12 +366,36 @@ Rectangle {
                 text: "Text with icon"
             }
 
+            FlatButton {
+                icon: IconCode.SAVE
+                text: "Suuuuuuuuuuuuuper long text with icon"
+            }
+
+            FlatButton {
+                icon: IconCode.SAVE
+                text: "Elided suuuuuuuuuuuuuper long text with icon"
+                width: 132
+            }
+
             FlatButton {
                 icon: IconCode.SAVE
                 text: "Text with icon"
                 orientation: Qt.Horizontal
             }
 
+            FlatButton {
+                icon: IconCode.SAVE
+                text: "Suuuuuuuuuuuuuper long text with icon"
+                orientation: Qt.Horizontal
+            }
+
+            FlatButton {
+                icon: IconCode.SAVE
+                text: "Elided suuuuuuuuuuuuuper long text with icon"
+                orientation: Qt.Horizontal
+                width: 132
+            }
+
             FlatButton {
                 text: "Just text"
             }
diff --git a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
index 2882bed5d91c2..ff8701702c9bf 100644
--- a/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
+++ b/src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
@@ -97,8 +97,8 @@ FocusScope {
 
     objectName: root.text
 
-    implicitWidth: contentLoader.implicitWidth + 2 * margins
-    implicitHeight: Math.max(contentLoader.implicitHeight, ui.theme.defaultButtonSize)
+    implicitWidth: contentLoader.itemImplicitWidth + 2 * margins
+    implicitHeight: Math.max(contentLoader.itemImplicitHeight, ui.theme.defaultButtonSize)
 
     opacity: root.enabled ? 1.0 : ui.theme.itemOpacityDisabled
 
@@ -176,6 +176,9 @@ FocusScope {
         anchors.verticalCenter: parent ? parent.verticalCenter : undefined
         anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
 
+        readonly property real itemImplicitWidth: item ? item.implicitWidth : 0
+        readonly property real itemImplicitHeight: item ? item.implicitHeight : 0
+
         sourceComponent: root.contentItem ? root.contentItem : defaultContentComponent
         readonly property Component defaultContentComponent: root.isVertical ? verticalContentComponent : horizontalContentComponent
     }
@@ -184,6 +187,7 @@ FocusScope {
         id: verticalContentComponent
 
         ColumnLayout {
+            width: Math.min(implicitWidth, root.width)
             spacing: 4
 
             StyledIconLabel {
@@ -194,6 +198,7 @@ FocusScope {
             }
 
             StyledTextLabel {
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
                 text: root.text
                 font: root.textFont
@@ -208,6 +213,7 @@ FocusScope {
         id: horizontalContentComponent
 
         RowLayout {
+            width: Math.min(implicitWidth, root.width)
             spacing: 8
 
             StyledIconLabel {
@@ -218,6 +224,7 @@ FocusScope {
             }
 
             StyledTextLabel {
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
                 text: root.text
                 font: root.textFont
@@ -246,7 +253,7 @@ FocusScope {
 
             PropertyChanges {
                 target: root
-                implicitWidth: Math.max(contentLoader.implicitWidth + 2 * root.margins,
+                implicitWidth: Math.max(contentLoader.itemImplicitWidth + 2 * root.margins,
                                         root.minWidth)
                 implicitHeight: ui.theme.defaultButtonSize
             }
diff --git a/src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml b/src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml
index ef2a3565c40f3..8d92f35e9aa81 100644
--- a/src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml
+++ b/src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml
@@ -234,6 +234,10 @@ Item {
                     width: titleLoader.width - 8 // 4px padding on each side
 
                     text: root.title
+
+                    onImplicitWidthChanged: {
+                        let i = implicitWidth // workaround for strange binding loop warning
+                    }
                 }
 
                 onClicked: {