Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix some text clipping issues #16302

Merged
merged 5 commits into from
Feb 14, 2023
Merged

Fix some text clipping issues #16302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
70f7a01
Fix QML warning in "How would you like to save?" dialog
cbjeukendrup Feb 9, 2023
c2373dc
Fix text wrap in Score Upload Success dialog
cbjeukendrup Feb 9, 2023
6415538
Fix vertical spacing in Score Upload Success dialog
cbjeukendrup Feb 9, 2023
8b126a2
Fix width of checkboxes in New Workspace dialog
cbjeukendrup Feb 9, 2023
39ed2a5
Elide text at the borders of FlatButton
cbjeukendrup Feb 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/appshell/qml/DevTools/Gallery/GeneralComponentsGallery.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
13 changes: 10 additions & 3 deletions src/framework/uicomponents/qml/MuseScore/UiComponents/FlatButton.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
}
Expand All @@ -185,6 +188,7 @@ FocusScope {
id: verticalContentComponent

ColumnLayout {
width: Math.min(implicitWidth, root.width)
spacing: 4

StyledIconLabel {
Expand All @@ -195,6 +199,7 @@ FocusScope {
}

StyledTextLabel {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
text: root.text
font: root.textFont
Expand All @@ -209,6 +214,7 @@ FocusScope {
id: horizontalContentComponent

RowLayout {
width: Math.min(implicitWidth, root.width)
spacing: 8

StyledIconLabel {
Expand All @@ -219,6 +225,7 @@ FocusScope {
}

StyledTextLabel {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
text: root.text
font: root.textFont
Expand Down Expand Up @@ -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
}
Expand Down
3 changes: 2 additions & 1 deletion src/playback/qml/MuseScore/Playback/internal/AudioResourceControl.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
3 changes: 2 additions & 1 deletion src/project/qml/MuseScore/Project/AskSaveLocationTypeDialog.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,12 +62,13 @@ StyledDialogView {
}

RowLayout {
id: optionsRowLayout
spacing: 24

NavigationPanel {
id: optionsNavPanel
name: "SaveLocationOptionsButtons"
enabled: parent.enabled && parent.visible
enabled: optionsRowLayout.enabled && optionsRowLayout.visible
direction: NavigationPanel.Horizontal
section: root.navigationSection
order: 1
Expand Down
156 changes: 90 additions & 66 deletions src/project/qml/MuseScore/Project/ProjectUploadedDialog.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,121 +103,145 @@ StyledDialogView {
StyledTextLabel {
id: titleLabel

Layout.fillWidth: true

text: qsTrc("global", "Success!")
font: ui.theme.tabBoldFont
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
}

StyledTextLabel {
id: subtitleLabel

Layout.fillWidth: true
Layout.topMargin: 6

text: qsTrc("project", "All saved changes will now update to the cloud")
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
}

Item {
Layout.fillWidth: true
Layout.preferredHeight: 228
Layout.fillHeight: true
Layout.topMargin: 24

Rectangle {
anchors.fill: parent
implicitHeight: bodyItem.implicitHeight

color: ui.theme.buttonColor
opacity: 0.4
radius: 3
}
Item {
id: bodyItem

ColumnLayout {
anchors.fill: parent
anchors.margins: 28
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right

z: 1000
implicitHeight: bodyColumn.implicitHeight + 2 * bodyColumn.anchors.margins

StyledTextLabel {
id: publishTitleLabel
Rectangle {
anchors.fill: parent

text: qsTrc("project", "Publish your finished scores on MuseScore.com")
font: ui.theme.largeBodyBoldFont
color: ui.theme.buttonColor
opacity: 0.4
radius: 3
}

Column {
Layout.fillWidth: true
ColumnLayout {
id: bodyColumn

spacing: 14
anchors.fill: parent
anchors.margins: 28

Repeater {
id: repeater
spacing: 24

function contentText() {
var result = ""
for (var i = 0; i < repeater.count; ++i) {
var item = itemAt(i)
result += item.title + "; "
}
StyledTextLabel {
id: publishTitleLabel

return result
}
Layout.fillWidth: true

model: [
qsTrc("project", "Create a portfolio to showcase your music"),
qsTrc("project", "Gain followers and receive score comments and ratings"),
qsTrc("project", "Share your projects and collaborate with other musicians")
]
text: qsTrc("project", "Publish your finished scores on MuseScore.com")
font: ui.theme.largeBodyBoldFont
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
}

Row {
spacing: 10
Column {
Layout.fillWidth: true

property string title: modelData
spacing: 12

Rectangle {
anchors.verticalCenter: parent.verticalCenter
Repeater {
id: repeater

width: 9
height: width
radius: width / 2
function contentText() {
var result = ""
for (var i = 0; i < repeater.count; ++i) {
var item = itemAt(i)
result += item.title + "; "
}

color: ui.theme.accentColor
return result
}

StyledTextLabel {
text: title
model: [
qsTrc("project", "Create a portfolio to showcase your music"),
qsTrc("project", "Gain followers and receive score comments and ratings"),
qsTrc("project", "Share your projects and collaborate with other musicians")
]

RowLayout {
width: parent.width
spacing: 10

property string title: modelData

Rectangle {
width: 9
height: width
radius: width / 2

color: ui.theme.accentColor
}

StyledTextLabel {
Layout.fillWidth: true

text: title
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
}
}
}
}
}

FlatButton {
id: watchVideoButton
FlatButton {
id: watchVideoButton

Layout.alignment: Qt.AlignLeft
Layout.alignment: Qt.AlignLeft

accentButton: true
text: qsTrc("project", "Watch video")
accentButton: true
text: qsTrc("project", "Watch video")

navigation.panel: buttonsNavPanel
navigation.column: 1
navigation.accessible.ignored: true
navigation.onActiveChanged: {
if (!navigation.active) {
accessible.ignored = false
accessible.focused = true
accessibleInfo.resetFocus()
navigation.panel: buttonsNavPanel
navigation.column: 1
navigation.accessible.ignored: true
navigation.onActiveChanged: {
if (!navigation.active) {
accessible.ignored = false
accessible.focused = true
accessibleInfo.resetFocus()
}
}
}

onClicked: {
Qt.openUrlExternally("https://youtu.be/6LP4U_BF23w")
root.hide()
onClicked: {
Qt.openUrlExternally("https://youtu.be/6LP4U_BF23w")
root.hide()
}
}
}
}
}

Item {
Layout.fillHeight: true
}

Row {
Layout.alignment: Qt.AlignRight

Expand Down
14 changes: 11 additions & 3 deletions src/workspace/qml/MuseScore/Workspace/NewWorkspaceDialog.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ StyledDialogView {
Layout.topMargin: 12
Layout.fillWidth: true

horizontalAlignment: Qt.AlignLeft
horizontalAlignment: Text.AlignLeft
text: workspaceModel.errorMessage
}

Expand All @@ -113,7 +113,7 @@ StyledDialogView {

text: qsTrc("workspace", "Select the options you want remembered in your new workspace")

horizontalAlignment: Qt.AlignLeft
horizontalAlignment: Text.AlignLeft
}

Grid {
Expand All @@ -123,9 +123,11 @@ StyledDialogView {

columns: 2
rowSpacing: 20
columnSpacing: rowSpacing * 4
columnSpacing: rowSpacing

CheckBox {
width: (parent.width - parent.columnSpacing) / 2

checked: workspaceModel.useUiPreferences

text: qsTrc("workspace", "UI preferences (colors, canvas style, etc.)")
Expand All @@ -141,6 +143,8 @@ StyledDialogView {
}

CheckBox {
width: (parent.width - parent.columnSpacing) / 2

checked: workspaceModel.useUiArrangement

text: qsTrc("workspace", "UI arrangement")
Expand All @@ -155,6 +159,8 @@ StyledDialogView {
}

CheckBox {
width: (parent.width - parent.columnSpacing) / 2

checked: workspaceModel.usePalettes

text: qsTrc("workspace", "Palettes")
Expand All @@ -169,6 +175,8 @@ StyledDialogView {
}

CheckBox {
width: (parent.width - parent.columnSpacing) / 2

checked: workspaceModel.useToolbarCustomization

text: qsTrc("workspace", "Toolbar customizations")
Expand Down