From a793a06b609c6e5c33db84e9c400c9c464b16469 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Fri, 22 Mar 2019 17:10:42 +0100 Subject: [PATCH 1/2] Add a maximumWidth to the ActionButton In case the text is too long, it can exceed the limits of the container. This is an optional flag that will work only in case it's set up. Contributes to CURA-6412. --- resources/qml/ActionButton.qml | 6 +++++- resources/qml/PrinterSelector/MachineSelector.qml | 2 ++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/resources/qml/ActionButton.qml b/resources/qml/ActionButton.qml index e4e2aedb8a..905863a561 100644 --- a/resources/qml/ActionButton.qml +++ b/resources/qml/ActionButton.qml @@ -40,6 +40,10 @@ Button // we elide the text to the right so the text will be cut off with the three dots at the end. property var fixedWidthMode: false + // This property is used when the space for the button is limited. In case the button needs to grow with the text, + // but it can exceed a maximum, then this value have to be set. + property int maximumWidth: 0 + leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width height: UM.Theme.getSize("action_button").height @@ -73,7 +77,7 @@ Button renderType: Text.NativeRendering height: parent.height anchors.verticalCenter: parent.verticalCenter - width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : undefined + width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : ((maximumWidth != 0 && contentWidth > maximumWidth) ? maximumWidth : undefined) horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter elide: Text.ElideRight diff --git a/resources/qml/PrinterSelector/MachineSelector.qml b/resources/qml/PrinterSelector/MachineSelector.qml index e9452f4d35..c632c5ee11 100644 --- a/resources/qml/PrinterSelector/MachineSelector.qml +++ b/resources/qml/PrinterSelector/MachineSelector.qml @@ -159,6 +159,7 @@ Cura.ExpandablePopup leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width text: catalog.i18nc("@button", "Add printer") + maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - 2.5 * UM.Theme.getSize("default_margin").width onClicked: { toggleContent() @@ -171,6 +172,7 @@ Cura.ExpandablePopup leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width text: catalog.i18nc("@button", "Manage printers") + maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - 2.5 * UM.Theme.getSize("default_margin").width onClicked: { toggleContent() From 742329a170c3932138f9508ea7656b49436915bd Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Thu, 28 Mar 2019 09:29:31 +0100 Subject: [PATCH 2/2] Document where the magic numbers come from For the maximumSize of a button. Contributes to CURA-6412. --- resources/qml/PrinterSelector/MachineSelector.qml | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/resources/qml/PrinterSelector/MachineSelector.qml b/resources/qml/PrinterSelector/MachineSelector.qml index c632c5ee11..f7ac3fdcba 100644 --- a/resources/qml/PrinterSelector/MachineSelector.qml +++ b/resources/qml/PrinterSelector/MachineSelector.qml @@ -159,7 +159,9 @@ Cura.ExpandablePopup leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width text: catalog.i18nc("@button", "Add printer") - maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - 2.5 * UM.Theme.getSize("default_margin").width + // The maximum width of the button is half of the total space, minus the padding of the parent, the left + // padding of the component and half the spacing because of the space between buttons. + maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - parent.padding - leftPadding - parent.spacing / 2 onClicked: { toggleContent() @@ -172,7 +174,9 @@ Cura.ExpandablePopup leftPadding: UM.Theme.getSize("default_margin").width rightPadding: UM.Theme.getSize("default_margin").width text: catalog.i18nc("@button", "Manage printers") - maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - 2.5 * UM.Theme.getSize("default_margin").width + // The maximum width of the button is half of the total space, minus the padding of the parent, the right + // padding of the component and half the spacing because of the space between buttons. + maximumWidth: UM.Theme.getSize("machine_selector_widget_content").width / 2 - parent.padding - rightPadding - parent.spacing / 2 onClicked: { toggleContent()