From 524775f316a04289b9babf21664b28f21d0086fb Mon Sep 17 00:00:00 2001 From: Casper Jeukendrup <48658420+cbjeukendrup@users.noreply.github.com> Date: Sat, 25 Oct 2025 20:59:34 +0200 Subject: [PATCH 1/4] Tweak Style > Chord symbols page Avoid text clipping in dropdowns Avoid hard-coded widths Remove unnecessary property assignments etc N.B. the dropdown changes also affect the Measure numbers and Repeats page, so those need a regression check --- .../internal/EditStyle/ChordSymbolsPage.qml | 71 +++++++------------ .../internal/EditStyle/ComboBoxDropdown.qml | 2 +- .../internal/EditStyle/MeasureNumbersPage.qml | 24 ++++--- 3 files changed, 42 insertions(+), 55 deletions(-) diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml index 4c9502b19ff59..df6ed646b94b1 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml @@ -121,7 +121,7 @@ StyledFlickable { // TODO - replace with StyledDropdown once this whole dialog is written in QML ComboBoxDropdown { id: presetDropdown - Layout.preferredWidth: 191 + Layout.minimumWidth: 192 model: chordSymbolsModel.possiblePresetOptions() styleItem: chordSymbolsModel.chordStylePreset @@ -138,7 +138,7 @@ StyledFlickable { TextInputField { id: customXMLField - Layout.preferredWidth: 191 + Layout.preferredWidth: presetDropdown.width readOnly: true currentText: chordSymbolsModel.chordDescriptionFile ? chordSymbolsModel.chordDescriptionFile.value : "" } @@ -207,14 +207,12 @@ StyledFlickable { ColumnLayout { spacing: 12 - Layout.fillWidth: true RowLayout { spacing: 8 - Layout.fillWidth: true StyleToggle { - Layout.preferredWidth: 460 + Layout.fillWidth: true styleItem: chordSymbolsModel.automaticCapitalization text: qsTrc("notation/editstyle/chordsymbols", "Automatically capitalize note names") } @@ -229,7 +227,6 @@ StyledFlickable { ColumnLayout { spacing: 8 - Layout.fillWidth: true CheckBox { text: qsTrc("notation/editstyle/chordsymbols", "Lowercase minor chords") @@ -267,7 +264,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -277,7 +273,7 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 IncrementalPropertyControl { width: 80 @@ -306,7 +302,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -344,7 +339,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -354,8 +348,9 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 + IncrementalPropertyControl { width: 80 @@ -383,7 +378,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -410,6 +404,7 @@ StyledFlickable { } CheckBox { + Layout.fillWidth: true text: qsTrc("notation/editstyle/chordsymbols", "Vertically stack modifiers") checked: chordSymbolsModel.verticallyStackModifiers.value === true onClicked: chordSymbolsModel.verticallyStackModifiers.value = !chordSymbolsModel.verticallyStackModifiers.value @@ -427,7 +422,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -437,7 +431,7 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 RadioButtonGroup { @@ -455,7 +449,7 @@ StyledFlickable { delegate: FlatRadioButton { height: 48 - navigation.accessible.name: modelData.title ? modelData.title : (modelData.text ? modelData.text : "") + navigation.accessible.name: modelData.title || modelData.text || "" checked: chordSymbolsModel.chordBassNoteStagger.value === modelData.value onToggled: chordSymbolsModel.chordBassNoteStagger.value = modelData.value @@ -466,13 +460,13 @@ StyledFlickable { StyledIconLabel { anchors.horizontalCenter: parent.horizontalCenter - iconCode: modelData.iconCode ? modelData.iconCode : IconCode.NONE - font.pixelSize: modelData.iconSize ? modelData.iconSize : 28 + iconCode: modelData.iconCode || IconCode.NONE + font.pixelSize: modelData.iconSize || 28 } StyledTextLabel { anchors.horizontalCenter: parent.horizontalCenter - text: modelData.text ? modelData.text : "" + text: modelData.text || "" } } } @@ -527,7 +521,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -537,8 +530,9 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 + IncrementalPropertyControl { width: 80 @@ -566,7 +560,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -607,17 +600,12 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true - - Item { - Layout.preferredWidth: 480 - implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 - CheckBox { - text: qsTrc("notation/editstyle/chordsymbols", "Vertically align chord symbols and fretboard diagrams on the same system") - checked: chordSymbolsModel.verticallyAlignChordSymbols.value === true - onClicked: chordSymbolsModel.verticallyAlignChordSymbols.value = !chordSymbolsModel.verticallyAlignChordSymbols.value - } + CheckBox { + Layout.fillWidth: true + text: qsTrc("notation/editstyle/chordsymbols", "Vertically align chord symbols and fretboard diagrams on the same system") + checked: chordSymbolsModel.verticallyAlignChordSymbols.value === true + onClicked: chordSymbolsModel.verticallyAlignChordSymbols.value = !chordSymbolsModel.verticallyAlignChordSymbols.value } FlatButton { @@ -628,7 +616,6 @@ StyledFlickable { } } - IconAndTextButtonSelector { styleItem: chordSymbolsModel.chordAlignmentToNotehead label: qsTrc("notation", "Alignment to notehead:") @@ -676,7 +663,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -686,8 +672,9 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true implicitHeight: children.length === 1 ? children[0].implicitHeight : 0 + IncrementalPropertyControl { width: 80 @@ -715,7 +702,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -743,7 +729,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -782,7 +767,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -792,13 +776,12 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true Layout.preferredHeight: interpretationDropdown.height // TODO - replace with StyledDropdown once this whole dialog is written in QML ComboBoxDropdown { id: interpretationDropdown - Layout.preferredWidth: 172 model: chordSymbolsModel.possibleHarmonyVoiceLiteralOptions() styleItem: chordSymbolsModel.harmonyVoiceLiteral @@ -815,7 +798,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -825,13 +807,12 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true Layout.preferredHeight: voicingDropdown.height // TODO - replace with StyledDropdown once this whole dialog is written in QML ComboBoxDropdown { id: voicingDropdown - Layout.preferredWidth: 172 model: chordSymbolsModel.possibleHarmonyVoicingOptions() styleItem: chordSymbolsModel.harmonyVoicing @@ -841,7 +822,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true StyledTextLabel { Layout.preferredWidth: 120 @@ -851,12 +831,12 @@ StyledFlickable { } Item { - Layout.preferredWidth: 326 + Layout.fillWidth: true Layout.preferredHeight: durationDropdown.height + // TODO - replace with StyledDropdown once this whole dialog is written in QML ComboBoxDropdown { id: durationDropdown - Layout.preferredWidth: 172 model: chordSymbolsModel.possibleHarmonyDurationOptions() styleItem: chordSymbolsModel.harmonyDuration @@ -877,7 +857,6 @@ StyledFlickable { RowLayout { spacing: 6 - Layout.fillWidth: true RadioButtonGroup { id: capoRadioButtonGroup diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml index d86075c811899..70cb5ec8e9f5d 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml @@ -35,7 +35,7 @@ ComboBox { signal handleItem(var value) - width: 172 + implicitWidth: 12 + implicitContentWidth + 6 + implicitIndicatorWidth + 8 textRole: "text" valueRole: "value" diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/MeasureNumbersPage.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/MeasureNumbersPage.qml index ad2b4e8ec0c08..ce4425deffeca 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/MeasureNumbersPage.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/MeasureNumbersPage.qml @@ -84,7 +84,7 @@ StyledFlickable { ComboBoxDropdown { id: barNumTextStyleDropdown - Layout.preferredWidth: 190 + Layout.minimumWidth: 192 model: barNumbersModel.textStyles styleItem: barNumbersModel.measureNumberTextStyle onHandleItem: function(value) { @@ -269,10 +269,13 @@ StyledFlickable { spacing: 8 RowLayout { + spacing: 6 + StyledTextLabel { - Layout.preferredWidth: 145 + Layout.preferredWidth: 156 text: qsTrc("notation/editstyle/voltas", "Offset when above staff:") horizontalAlignment: Text.AlignLeft + wrapMode: Text.Wrap } StyledXYControllerWithReset { @@ -281,10 +284,13 @@ StyledFlickable { } RowLayout { + spacing: 6 + StyledTextLabel { - Layout.preferredWidth: 145 + Layout.preferredWidth: 156 text: qsTrc("notation/editstyle/voltas", "Offset when below staff:") horizontalAlignment: Text.AlignLeft + wrapMode: Text.Wrap } StyledXYControllerWithReset { @@ -319,10 +325,12 @@ StyledFlickable { horizontalAlignment: Text.AlignLeft } - RowLayout { + RowLayout { + spacing: 4 + ComboBoxDropdown { id: mmRestBarRangeTextStyleDropdown - Layout.preferredWidth: 190 + Layout.minimumWidth: 192 model: barNumbersModel.textStyles styleItem: barNumbersModel.mmRestRangeTextStyle onHandleItem: function(value) { @@ -355,14 +363,14 @@ StyledFlickable { } RadioButtonGroup { + width: 362 model: [ { text: qsTrc("notation/editstyle/voltas", "Brackets"), value: 0}, - { text: qsTrc("notation/editstyle/voltas", "Parenthesis"), value: 1}, + { text: qsTrc("notation/editstyle/voltas", "Parentheses"), value: 1}, { text: qsTrc("notation/editstyle/voltas", "None"), value: 2}, ] delegate: FlatRadioButton { - width: 116 height: ui.theme.defaultButtonSize text: modelData.text checked: barNumbersModel.mmRestRangeBracketType.value === modelData.value @@ -411,13 +419,13 @@ StyledFlickable { } RadioButtonGroup { + width: 362 model: [ { text: qsTrc("notation/editstyle/voltas", "Above"), value: 0}, { text: qsTrc("notation/editstyle/voltas", "Below"), value: 1}, ] delegate: FlatRadioButton { - width: 176 height: ui.theme.defaultButtonSize text: modelData.text checked: barNumbersModel.mmRestRangeVPlacement.value === modelData.value From 7ae7ebb171405b1032d5c5e5412a902238bc464f Mon Sep 17 00:00:00 2001 From: Casper Jeukendrup <48658420+cbjeukendrup@users.noreply.github.com> Date: Thu, 30 Oct 2025 23:49:36 +0100 Subject: [PATCH 2/4] More tweaks to ComboBoxDropdown --- .../internal/EditStyle/ComboBoxDropdown.qml | 41 +++++++++++++++++-- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml index 70cb5ec8e9f5d..ff374df11359b 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ComboBoxDropdown.qml @@ -36,12 +36,15 @@ ComboBox { signal handleItem(var value) implicitWidth: 12 + implicitContentWidth + 6 + implicitIndicatorWidth + 8 + implicitContentWidthPolicy: ComboBox.WidestText textRole: "text" valueRole: "value" flat: true + opacity: enabled ? 1.0 : ui.theme.itemOpacityDisabled + background: Rectangle { id: backgroundItem implicitWidth: 120 @@ -51,7 +54,26 @@ ComboBox { border.color: ui.theme.strokeColor color: ui.theme.buttonColor radius: 3 - opacity: 0.7 + opacity: ui.theme.buttonOpacityNormal + + states: [ + State { + name: "hovered" + when: comboDropdown.hovered + PropertyChanges { + target: backgroundItem + opacity: ui.theme.buttonOpacityHover + } + }, + State { + name: "pressed" + when: comboDropdown.pressed + PropertyChanges { + target: backgroundItem + opacity: ui.theme.buttonOpacityPressed + } + } + ] } indicator: StyledIconLabel { @@ -63,15 +85,26 @@ ComboBox { iconCode: IconCode.SMALL_ARROW_DOWN } - contentItem: StyledTextLabel { - id: labelItem + // It must be a TextInput to make `implicitContentWidthPolicy` work + contentItem: TextInput { anchors.top: parent.top anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: dropIconItem.left anchors.leftMargin: 12 anchors.rightMargin: 6 - horizontalAlignment: Text.AlignLeft + + readOnly: true + enabled: false // don't consume mouse events + + color: ui.theme.fontPrimaryColor + verticalAlignment: Text.AlignVCenter + + font { + family: ui.theme.bodyFont.family + pixelSize: ui.theme.bodyFont.pixelSize + } + text: comboDropdown.displayText } From 6fd255efcb134c7f2f2d649889f93482c01a0487 Mon Sep 17 00:00:00 2001 From: Casper Jeukendrup <48658420+cbjeukendrup@users.noreply.github.com> Date: Fri, 31 Oct 2025 00:22:14 +0100 Subject: [PATCH 3/4] Make the three dropdowns on the chord symbols page the same width --- .../internal/EditStyle/ChordSymbolsPage.qml | 131 +++++++++--------- .../internal/EditStyle/RepeatPage.qml | 1 - 2 files changed, 64 insertions(+), 68 deletions(-) diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml index df6ed646b94b1..dbe3a9adea0f6 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/ChordSymbolsPage.qml @@ -761,87 +761,84 @@ StyledFlickable { Layout.minimumWidth: 500 title: qsTrc("notation/editstyle/chordsymbols", "Playback") - ColumnLayout { - spacing: 12 - width: parent.width - - RowLayout { - spacing: 6 - - StyledTextLabel { - Layout.preferredWidth: 120 - horizontalAlignment: Text.AlignLeft - wrapMode: Text.WordWrap - text: qsTrc("notation", "Interpretation:") - } - - Item { - Layout.fillWidth: true - Layout.preferredHeight: interpretationDropdown.height + GridLayout { + anchors.fill: parent + rowSpacing: 12 + columnSpacing: 6 + columns: 3 + + StyledTextLabel { + Layout.preferredWidth: 120 + Layout.row: 0 + Layout.column: 0 + horizontalAlignment: Text.AlignLeft + wrapMode: Text.WordWrap + text: qsTrc("notation", "Interpretation:") + } - // TODO - replace with StyledDropdown once this whole dialog is written in QML - ComboBoxDropdown { - id: interpretationDropdown - model: chordSymbolsModel.possibleHarmonyVoiceLiteralOptions() + // TODO - replace with StyledDropdown once this whole dialog is written in QML + ComboBoxDropdown { + id: interpretationDropdown + Layout.fillWidth: true + Layout.row: 0 + Layout.column: 1 + model: chordSymbolsModel.possibleHarmonyVoiceLiteralOptions() + styleItem: chordSymbolsModel.harmonyVoiceLiteral + } - styleItem: chordSymbolsModel.harmonyVoiceLiteral - } - } + Item { + Layout.fillWidth: true + Layout.horizontalStretchFactor: 1 + Layout.row: 0 + Layout.column: 2 + implicitWidth: resetPlaybackStylesButton.implicitWidth + implicitHeight: resetPlaybackStylesButton.implicitHeight FlatButton { - Layout.alignment: Qt.AlignTop | Qt.AlignRight + id: resetPlaybackStylesButton + anchors.right: parent.right icon: IconCode.UNDO enabled: isResetEnabled(root.playbackStyles) onClicked: resetStyles(root.playbackStyles) } } - RowLayout { - spacing: 6 - - StyledTextLabel { - Layout.preferredWidth: 120 - horizontalAlignment: Text.AlignLeft - wrapMode: Text.WordWrap - text: qsTrc("notation", "Voicing:") - } - - Item { - Layout.fillWidth: true - Layout.preferredHeight: voicingDropdown.height - - // TODO - replace with StyledDropdown once this whole dialog is written in QML - ComboBoxDropdown { - id: voicingDropdown - model: chordSymbolsModel.possibleHarmonyVoicingOptions() - - styleItem: chordSymbolsModel.harmonyVoicing - } - } + StyledTextLabel { + Layout.preferredWidth: 120 + Layout.row: 1 + Layout.column: 0 + horizontalAlignment: Text.AlignLeft + wrapMode: Text.WordWrap + text: qsTrc("notation", "Voicing:") } - RowLayout { - spacing: 6 - - StyledTextLabel { - Layout.preferredWidth: 120 - horizontalAlignment: Text.AlignLeft - wrapMode: Text.WordWrap - text: qsTrc("notation", "Duration:") - } - - Item { - Layout.fillWidth: true - Layout.preferredHeight: durationDropdown.height + // TODO - replace with StyledDropdown once this whole dialog is written in QML + ComboBoxDropdown { + id: voicingDropdown + Layout.fillWidth: true + Layout.row: 1 + Layout.column: 1 + model: chordSymbolsModel.possibleHarmonyVoicingOptions() + styleItem: chordSymbolsModel.harmonyVoicing + } - // TODO - replace with StyledDropdown once this whole dialog is written in QML - ComboBoxDropdown { - id: durationDropdown - model: chordSymbolsModel.possibleHarmonyDurationOptions() + StyledTextLabel { + Layout.preferredWidth: 120 + Layout.row: 2 + Layout.column: 0 + horizontalAlignment: Text.AlignLeft + wrapMode: Text.WordWrap + text: qsTrc("notation", "Duration:") + } - styleItem: chordSymbolsModel.harmonyDuration - } - } + // TODO - replace with StyledDropdown once this whole dialog is written in QML + ComboBoxDropdown { + id: durationDropdown + Layout.fillWidth: true + Layout.row: 2 + Layout.column: 1 + model: chordSymbolsModel.possibleHarmonyDurationOptions() + styleItem: chordSymbolsModel.harmonyDuration } } } diff --git a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/RepeatPage.qml b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/RepeatPage.qml index af1f0c10d7b05..647aef52d32be 100644 --- a/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/RepeatPage.qml +++ b/src/notation/qml/MuseScore/NotationScene/internal/EditStyle/RepeatPage.qml @@ -182,7 +182,6 @@ Rectangle { enabled: repeatPlayCountTextModel.repeatPlayCountShow.value === true ComboBoxDropdown { - Layout.preferredWidth: 290 - editTextStyleButton.width - 6 model: repeatPlayCountTextModel.textPresetOptions() styleItem: repeatPlayCountTextModel.repeatTextPreset From 5ab38c777db0743eb560f47cd653c78b0f938fce Mon Sep 17 00:00:00 2001 From: Casper Jeukendrup <48658420+cbjeukendrup@users.noreply.github.com> Date: Sat, 20 Sep 2025 01:08:18 +0200 Subject: [PATCH 4/4] Fix text clipping issue in Style > Lyrics removed hardcoded maximum width --- src/notation/view/widgets/editstyle.ui | 35 +++++++++++++++++--------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/src/notation/view/widgets/editstyle.ui b/src/notation/view/widgets/editstyle.ui index cdacac0e58273..df2235f198b17 100644 --- a/src/notation/view/widgets/editstyle.ui +++ b/src/notation/view/widgets/editstyle.ui @@ -10250,19 +10250,30 @@ Lyrics text - + - - - - 130 - 16777215 - - - - Edit lyrics text style - - + + + + + Edit lyrics text style + + + + + + + Qt::Orientation::Horizontal + + + + 0 + 0 + + + + +