Elide text at the borders of FlatButton

musescore · Feb 9, 2023 · 4b3b0e0 · 4b3b0e0
1 parent d41062a
commit 4b3b0e0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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: {