Elide text at the borders of FlatButton

musescore · Feb 10, 2023 · 39ed2a5 · 39ed2a5
1 parent 8b126a2
commit 39ed2a5
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 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
@@ -98,8 +98,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
 
@@ -177,6 +177,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
     }
@@ -185,6 +188,7 @@ FocusScope {
         id: verticalContentComponent
 
         ColumnLayout {
+            width: Math.min(implicitWidth, root.width)
             spacing: 4
 
             StyledIconLabel {
@@ -195,6 +199,7 @@ FocusScope {
             }
 
             StyledTextLabel {
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
                 text: root.text
                 font: root.textFont
@@ -209,6 +214,7 @@ FocusScope {
         id: horizontalContentComponent
 
         RowLayout {
+            width: Math.min(implicitWidth, root.width)
             spacing: 8
 
             StyledIconLabel {
@@ -219,6 +225,7 @@ FocusScope {
             }
 
             StyledTextLabel {
+                Layout.fillWidth: true
                 Layout.alignment: Qt.AlignVCenter
                 text: root.text
                 font: root.textFont
@@ -247,7 +254,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
@@ -230,8 +230,9 @@ Item {
                 }
 
                 contentItem: StyledTextLabel {
-                    height: root.height
+                    // To do: this causes a binding loop warning
                     width: titleLoader.width - 8 // 4px padding on each side
+                    height: root.height
 
                     text: root.title
                 }