From ffa89bb1a16380c41e05846b7bd2073d6d50f00e Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 8 Jul 2021 16:24:23 +0200 Subject: [PATCH 01/11] Allow open file button to resize depending on content items This re-links the widths, heights and paddings such that we can later change the width of the button depending on its contents. However there is a complication: Buttons automatically change the size of the contents based on the size of the button minus its padding. So making the size of the button in turn depend on its contents causes a binding loop. To get around this binding loop, we need to manually calculate the size of the button, such that the size of the contents ends up exactly right. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 34 +++++++++++++++++++--------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 2d3814309e..4e6c37961c 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -77,24 +77,36 @@ Item Button { id: openFileButton + + //Make the button square if the contents are. + leftPadding: topPadding + rightPadding: topPadding + bottomPadding: topPadding + height: UM.Theme.getSize("stage_menu").height - width: UM.Theme.getSize("stage_menu").height + width: openFileIconContainer.width + leftPadding + rightPadding onClicked: Cura.Actions.open.trigger() hoverEnabled: true - contentItem: Item + contentItem: Row { - anchors.fill: parent - UM.RecolorImage + Item { - id: buttonIcon - anchors.centerIn: parent - source: UM.Theme.getIcon("Folder", "medium") - width: UM.Theme.getSize("button_icon").width - height: UM.Theme.getSize("button_icon").height - color: UM.Theme.getColor("icon") + id: openFileIconContainer + height: parent.height + width: height //Square button. - sourceSize.height: height + UM.RecolorImage + { + id: buttonIcon + anchors.centerIn: parent + source: UM.Theme.getIcon("Folder", "medium") + width: UM.Theme.getSize("button_icon").width + height: UM.Theme.getSize("button_icon").height + color: UM.Theme.getColor("icon") + + sourceSize.height: height + } } } From 41642a35ffd885a6260d2dc766813884ea748bde Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 8 Jul 2021 18:00:35 +0200 Subject: [PATCH 02/11] Add chevron to select where to load models from The chevron looks a little big now. No worries, we can fix that. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 4e6c37961c..bf6b76360f 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -84,7 +84,7 @@ Item bottomPadding: topPadding height: UM.Theme.getSize("stage_menu").height - width: openFileIconContainer.width + leftPadding + rightPadding + width: leftPadding + openFileIconContainer.width + openFileChevronContainer.width + rightPadding onClicked: Cura.Actions.open.trigger() hoverEnabled: true @@ -105,6 +105,23 @@ Item height: UM.Theme.getSize("button_icon").height color: UM.Theme.getColor("icon") + sourceSize.height: height + } + } + Item + { + id: openFileChevronContainer + height: parent.height + width: UM.Theme.getSize("small_button_icon").width + + UM.RecolorImage + { + anchors.centerIn: parent + source: UM.Theme.getIcon("ChevronSingleDown") + width: UM.Theme.getSize("small_button_icon").width + height: UM.Theme.getSize("small_button_icon").height + color: UM.Theme.getColor("icon") + sourceSize.height: height } } @@ -113,8 +130,8 @@ Item background: Rectangle { id: background - height: UM.Theme.getSize("stage_menu").height - width: UM.Theme.getSize("stage_menu").height + height: parent.height + width: parent.width border.color: UM.Theme.getColor("lining") border.width: UM.Theme.getSize("default_lining").width From f4f48c0fdab65a5e520a8cf64bf677d32fbdc164 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 14:23:14 +0200 Subject: [PATCH 03/11] Move padding to only be around row Not around the individual icons. This way the chevron can be placed next to the icon closer. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 27 ++++++++++----------------- 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index bf6b76360f..850d329ab2 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -78,35 +78,28 @@ Item { id: openFileButton - //Make the button square if the contents are. + //Make the padding such that the main icon is centred, even if something else is placed besides it. + topPadding: Math.round((parent.height - buttonIcon.height) / 2) leftPadding: topPadding rightPadding: topPadding bottomPadding: topPadding height: UM.Theme.getSize("stage_menu").height - width: leftPadding + openFileIconContainer.width + openFileChevronContainer.width + rightPadding + width: leftPadding + buttonIcon.width + openFileChevronContainer.width + rightPadding onClicked: Cura.Actions.open.trigger() hoverEnabled: true contentItem: Row { - Item + UM.RecolorImage { - id: openFileIconContainer - height: parent.height - width: height //Square button. + id: buttonIcon + source: UM.Theme.getIcon("Folder", "medium") + width: UM.Theme.getSize("button_icon").width + height: UM.Theme.getSize("button_icon").height + color: UM.Theme.getColor("icon") - UM.RecolorImage - { - id: buttonIcon - anchors.centerIn: parent - source: UM.Theme.getIcon("Folder", "medium") - width: UM.Theme.getSize("button_icon").width - height: UM.Theme.getSize("button_icon").height - color: UM.Theme.getColor("icon") - - sourceSize.height: height - } + sourceSize.height: height } Item { From 6203a5c9873ee650ff7c19a0d5688effd36a0517 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 14:27:32 +0200 Subject: [PATCH 04/11] Correct chevron size and colour This is the same as what ExpandablePopup does. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 850d329ab2..323ea46050 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -110,10 +110,10 @@ Item UM.RecolorImage { anchors.centerIn: parent - source: UM.Theme.getIcon("ChevronSingleDown") - width: UM.Theme.getSize("small_button_icon").width - height: UM.Theme.getSize("small_button_icon").height - color: UM.Theme.getColor("icon") + source: UM.Theme.getIcon("ChevronSingleLeft") + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + color: UM.Theme.getColor("small_button_text") sourceSize.height: height } From c100ba88d0589f11d9979c08b94c48f35d605724 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 15:27:12 +0200 Subject: [PATCH 05/11] Move pop-up code to external item to re-use ExpandablePopup element All of what we were about to implement is already implemented in ExpandablePopup. So let's re-use that one. That guarantees that it looks consistent too. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 67 ++++++++++++++++------------ 1 file changed, 38 insertions(+), 29 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 323ea46050..576cd3cd95 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -1,4 +1,4 @@ -// Copyright (c) 2018 Ultimaker B.V. +// Copyright (c) 2021 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.7 @@ -36,9 +36,9 @@ Item { id: itemRow - anchors.left: openFileButton.right + anchors.left: parent.left anchors.right: parent.right - anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.leftMargin: UM.Theme.getSize("default_margin").width + openFileButton.width + openFileMenu.width property int machineSelectorWidth: Math.round((width - printSetupSelectorItem.width) / 3) height: parent.height @@ -74,50 +74,59 @@ Item } } + //Pop-up shown when there are multiple items to select from. + Cura.ExpandablePopup + { + id: openFileMenu + contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft + headerCornerSide: Cura.RoundedRectangle.Direction.All + headerPadding: Math.round((parent.height - UM.Theme.getSize("button_icon").height) / 2) + enabled: visible + + height: parent.height + width: visible ? (headerPadding * 3 + UM.Theme.getSize("button_icon").height + iconSize) : 0 + + headerItem: UM.RecolorImage + { + id: menuIcon + source: UM.Theme.getIcon("Folder", "medium") + color: UM.Theme.getColor("icon") + + sourceSize.height: height + } + + contentItem: Rectangle + { + width: 100 + height: 100 + color: "red" + } + } + + //If there is just a single item, show a button instead that directly chooses the one option. Button { id: openFileButton - //Make the padding such that the main icon is centred, even if something else is placed besides it. - topPadding: Math.round((parent.height - buttonIcon.height) / 2) - leftPadding: topPadding - rightPadding: topPadding - bottomPadding: topPadding - - height: UM.Theme.getSize("stage_menu").height - width: leftPadding + buttonIcon.width + openFileChevronContainer.width + rightPadding + height: parent.height + width: height //Square button. onClicked: Cura.Actions.open.trigger() + enabled: visible hoverEnabled: true - contentItem: Row + contentItem: Item { UM.RecolorImage { id: buttonIcon source: UM.Theme.getIcon("Folder", "medium") + anchors.centerIn: parent width: UM.Theme.getSize("button_icon").width height: UM.Theme.getSize("button_icon").height color: UM.Theme.getColor("icon") sourceSize.height: height } - Item - { - id: openFileChevronContainer - height: parent.height - width: UM.Theme.getSize("small_button_icon").width - - UM.RecolorImage - { - anchors.centerIn: parent - source: UM.Theme.getIcon("ChevronSingleLeft") - width: UM.Theme.getSize("standard_arrow").width - height: UM.Theme.getSize("standard_arrow").height - color: UM.Theme.getColor("small_button_text") - - sourceSize.height: height - } - } } background: Rectangle From 5bc384830114fb4144709784441f0c5900900bb9 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 15:33:57 +0200 Subject: [PATCH 06/11] Show either openFileButton or openFileMenu, depending on provider count If there's just 1 provider, show the button. If there are multiple, show the menu. If there are 0, also show the button but disable the button. The behaviour is not yet implemented though. It doesn't actually look at which providers are available and what they do. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 576cd3cd95..219979407b 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -13,6 +13,8 @@ Item { id: prepareMenu + property var fileProviderModel: CuraApplication.getFileProviderModel() + UM.I18nCatalog { id: catalog @@ -78,6 +80,8 @@ Item Cura.ExpandablePopup { id: openFileMenu + visible: prepareMenu.fileProviderModel.count > 1 + contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft headerCornerSide: Cura.RoundedRectangle.Direction.All headerPadding: Math.round((parent.height - UM.Theme.getSize("button_icon").height) / 2) @@ -107,11 +111,12 @@ Item Button { id: openFileButton + visible: prepareMenu.fileProviderModel.count <= 1 height: parent.height - width: height //Square button. + width: visible ? height : 0 //Square button (and don't take up space if invisible). onClicked: Cura.Actions.open.trigger() - enabled: visible + enabled: visible && prepareMenu.fileProviderModel.count > 0 hoverEnabled: true contentItem: Item From 0db1f1034b164b783ff395afc87e7cdc1e13a183 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 16:47:51 +0200 Subject: [PATCH 07/11] Add header, and make popup grow to its contents It was quite a hassle to allow the column to grow to the size of its contents. For some reason, things update the size to 0. And the size updates again once the pop-up actually gets opened for the first time, because then the column actually gets populated lazily. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 38 ++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 219979407b..1916a5813d 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -1,7 +1,7 @@ // Copyright (c) 2021 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. -import QtQuick 2.7 +import QtQuick 2.9 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.3 @@ -99,11 +99,39 @@ Item sourceSize.height: height } - contentItem: Rectangle + contentItem: Item { - width: 100 - height: 100 - color: "red" + id: popup + width: openProviderColumn.width + height: openProviderColumn.height + + Column + { + id: openProviderColumn + + //The column doesn't automatically listen to its children rect if the children change internally, so we need to explicitly update the size. + onChildrenRectChanged: + { + popup.height = childrenRect.height + popup.width = childrenRect.width + } + onPositioningComplete: + { + popup.height = childrenRect.height + popup.width = childrenRect.width + } + + Label + { + text: catalog.i18nc("@menu:header", "Open file") + color: UM.Theme.getColor("text_medium") + font: UM.Theme.getFont("medium") + renderType: Text.NativeRendering + + width: contentWidth + height: contentHeight + } + } } } From f8aa6a3398d2dda18b7c78b6121281f137cd5c6f Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 17:02:38 +0200 Subject: [PATCH 08/11] Add list of open file providers to submenu The layout isn't quite there yet, but it mostly works and I want to have a save point to return to if I tinker too much. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 43 ++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 1916a5813d..31da2f356b 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -131,6 +131,49 @@ Item width: contentWidth height: contentHeight } + + Repeater + { + model: prepareMenu.fileProviderModel + delegate: Button + { + leftPadding: UM.Theme.getSize("thick_margin").width + rightPadding: UM.Theme.getSize("thick_margin").width + width: contentItem.width + leftPadding + rightPadding + height: UM.Theme.getSize("action_button").height + hoverEnabled: true + + contentItem: Label + { + text: model.displayText + color: UM.Theme.getColor("text") + font: UM.Theme.getFont("medium") + renderType: Text.NativeRendering + verticalAlignment: Text.AlignVCenter + + width: contentWidth + height: contentHeight + } + + onClicked: + { + if(model.index == 0) //The 0th element is the "From Disk" option, which should activate the open local file dialog. + { + Cura.Actions.open.trigger(); + } + else + { + prepareMenu.fileProviderModel.trigger(model.name); + } + } + + background: Rectangle + { + color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent" + radius: UM.Theme.getSize("action_button_radius").width + } + } + } } } } From 739f8834d0de2a1a04be14814510bcb2784d8066 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 9 Jul 2021 17:20:32 +0200 Subject: [PATCH 09/11] Align layout of providers with machine selector It's quite different in detail because there is a lot less content to show here (no machine type, icons, etc), but the basics are the same now. One possible issue is that the button doesn't extend all the way to the right, so you can't click everywhere on the shortest item. I'll see if that can still be fixed. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 31da2f356b..5126d0aba6 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -85,6 +85,7 @@ Item contentAlignment: Cura.ExpandablePopup.ContentAlignment.AlignLeft headerCornerSide: Cura.RoundedRectangle.Direction.All headerPadding: Math.round((parent.height - UM.Theme.getSize("button_icon").height) / 2) + contentPadding: UM.Theme.getSize("default_lining").width enabled: visible height: parent.height @@ -102,8 +103,6 @@ Item contentItem: Item { id: popup - width: openProviderColumn.width - height: openProviderColumn.height Column { @@ -127,9 +126,11 @@ Item color: UM.Theme.getColor("text_medium") font: UM.Theme.getFont("medium") renderType: Text.NativeRendering + verticalAlignment: Text.AlignVCenter width: contentWidth - height: contentHeight + height: UM.Theme.getSize("action_button").height + leftPadding: UM.Theme.getSize("default_margin").width } Repeater @@ -152,7 +153,7 @@ Item verticalAlignment: Text.AlignVCenter width: contentWidth - height: contentHeight + height: parent.height } onClicked: @@ -171,6 +172,7 @@ Item { color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent" radius: UM.Theme.getSize("action_button_radius").width + width: popup.width } } } From 55bdb81e785bf9fa94e419076cca58b55a74334a Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Mon, 12 Jul 2021 11:13:06 +0200 Subject: [PATCH 10/11] Reduce margins of options in the open file drop-down This was a desire from the developer. It shouldn't be consistent with the printer selector. The margins being all the same is more important. Contributes to issue CURA-8008. --- plugins/PrepareStage/PrepareMenu.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/PrepareStage/PrepareMenu.qml b/plugins/PrepareStage/PrepareMenu.qml index 5126d0aba6..061db0b8f6 100644 --- a/plugins/PrepareStage/PrepareMenu.qml +++ b/plugins/PrepareStage/PrepareMenu.qml @@ -138,8 +138,8 @@ Item model: prepareMenu.fileProviderModel delegate: Button { - leftPadding: UM.Theme.getSize("thick_margin").width - rightPadding: UM.Theme.getSize("thick_margin").width + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("default_margin").width width: contentItem.width + leftPadding + rightPadding height: UM.Theme.getSize("action_button").height hoverEnabled: true From 3d6b58d5c08a1f3b8901b47d33bbb13d780926b7 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Mon, 12 Jul 2021 11:19:04 +0200 Subject: [PATCH 11/11] Always show down arrow regardless of expanded state This is something our UX designer wants to change for all expandable header bar menus. The down arrow indicates that something will pop-up downwards once clicked. It is unnecessary to feedback the state of the expansion in the icon. Contributes to CURA-8008. --- resources/qml/ExpandableComponent.qml | 2 +- resources/qml/ExpandablePopup.qml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/ExpandableComponent.qml b/resources/qml/ExpandableComponent.qml index bbe617e27d..18eb8c0fa6 100644 --- a/resources/qml/ExpandableComponent.qml +++ b/resources/qml/ExpandableComponent.qml @@ -167,7 +167,7 @@ Item verticalCenter: parent.verticalCenter margins: background.padding } - source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") + source: UM.Theme.getIcon("ChevronSingleDown") visible: source != "" width: UM.Theme.getSize("standard_arrow").width height: UM.Theme.getSize("standard_arrow").height diff --git a/resources/qml/ExpandablePopup.qml b/resources/qml/ExpandablePopup.qml index da56470bfb..3bcfdbb6f8 100644 --- a/resources/qml/ExpandablePopup.qml +++ b/resources/qml/ExpandablePopup.qml @@ -180,7 +180,7 @@ Item verticalCenter: parent.verticalCenter margins: background.padding } - source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") + source: UM.Theme.getIcon("ChevronSingleDown") visible: source != "" width: UM.Theme.getSize("standard_arrow").width height: UM.Theme.getSize("standard_arrow").height