Merge pull request #33765 from ajuncosa/truncated-text

Re-design PropertiesPanelTabButtons to hug contents instead of having equal widths

Author: ajuncosa

muse

@@ -30,5 +30,39 @@ StyledTabBar {
 
     background: Item {
         implicitHeight: 28
+
+        SeparatorLine {
+            id: underlineStroke
+            anchors.bottom: parent.bottom
+        }
+    }
+
+    // Equally divided share given to overflowing tabs, or Infinity when everything fits:
+    readonly property real truncatedItemWidth: {
+        let items = contentChildren.filter(i => i.visible)
+        if (items.length === 0) {
+            return Infinity
+        }
+
+        let totalSpacing = (items.length - 1) * root.spacing
+        let totalContent = items.reduce((s, i) => s + i.implicitWidth, 0)
+        if (totalContent + totalSpacing <= root.width) {
+            return Infinity
+        }
+
+        let availableWidth = Math.max(0, root.width - totalSpacing)
+        let share = availableWidth / items.length
+        let prev = -1
+        while (share !== prev) {
+            prev = share
+            let fittedItems = items.filter(i => i.implicitWidth < share)
+            let totalFittedWidth = fittedItems.reduce((s, i) => s + i.implicitWidth, 0)
+            let remaining = items.length - fittedItems.length
+            share = remaining > 0
+                    ? Math.max(0, (root.width - totalFittedWidth - totalSpacing) / remaining)
+                    : 0
+        }
+        return share
     }
+
 }

src/propertiespanel/qml/MuseScore/PropertiesPanel/common/PropertiesPanelTabBar.qml

@@ -24,6 +24,10 @@ import QtQuick
 import Muse.UiComponents
 
 StyledTabButton {
-    fillWidth: true
+    required property real maxWidth
+
     font: ui.theme.bodyBoldFont
+    width: Math.min(implicitWidth, maxWidth)
+    leftPadding: 4
+    rightPadding: 4
 }

src/propertiespanel/qml/MuseScore/PropertiesPanel/common/PropertiesPanelTabButton.qml

@@ -56,6 +56,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Chords")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "ChordsTab"
             navigation.panel: root.navigationPanel
@@ -64,6 +65,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Frame")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "FrameTab"
             navigation.panel: root.navigationPanel

src/propertiespanel/qml/MuseScore/PropertiesPanel/notation/frames/FretFrameSettings.qml

@@ -48,6 +48,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "General")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "GeneralTab"
             navigation.panel: root.navigationPanel
@@ -56,6 +57,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Settings")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "SettingsTab"
             navigation.panel: root.navigationPanel

src/propertiespanel/qml/MuseScore/PropertiesPanel/notation/fretdiagrams/internal/FretDiagramTabPanel.qml

@@ -51,6 +51,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Position")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "PositionTab"
             navigation.panel: root.navigationPanel
@@ -59,6 +60,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Style")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "StyleTab"
             navigation.panel: root.navigationPanel
@@ -67,6 +69,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Text")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "TextTab"
             navigation.panel: root.navigationPanel

src/propertiespanel/qml/MuseScore/PropertiesPanel/notation/lines/GradualTempoChangeSettings.qml

@@ -53,6 +53,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Position")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "PositionTab"
             navigation.panel: root.navigationPanel
@@ -61,6 +62,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Style")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "StyleTab"
             navigation.panel: root.navigationPanel
@@ -69,6 +71,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Text")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "TextTab"
             navigation.panel: root.navigationPanel

src/propertiespanel/qml/MuseScore/PropertiesPanel/notation/lines/HairpinLineSettings.qml

@@ -53,6 +53,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Style")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "StyleTab"
             navigation.panel: root.navigationPanel
@@ -61,6 +62,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: qsTrc("propertiespanel", "Text")
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "TextTab"
             navigation.panel: root.navigationPanel

src/propertiespanel/qml/MuseScore/PropertiesPanel/notation/lines/LineSettings.qml

@@ -70,6 +70,7 @@ Column {
 
         PropertiesPanelTabButton {
             text: root.headModel?.title ?? ""
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "HeadTab"
             navigation.panel: root.navigationPanel
@@ -79,6 +80,7 @@ Column {
         PropertiesPanelTabButton {
             visible: root.headModel ? !root.headModel.isTrillCueNote : true
             text: root.stemModel ? root.stemModel.title : ""
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "StemTab"
             navigation.panel: root.navigationPanel
@@ -88,6 +90,7 @@ Column {
         PropertiesPanelTabButton {
             visible: root.headModel ? !root.headModel.isTrillCueNote : true
             text: root.beamModel ? root.beamModel.title : ""
+            maxWidth: tabBar.truncatedItemWidth
 
             navigation.name: "BeamTab"
             navigation.panel: root.navigationPanel