From 4a436b5598f9df2dfdd0f192539ecc5943b0f737 Mon Sep 17 00:00:00 2001 From: casper Date: Wed, 8 Dec 2021 14:46:29 +0100 Subject: [PATCH] Display different types of manage buttons through Loader.sourceComponent cura 8734 --- .../resources/qml/ManageButton.qml | 291 ++++++------------ .../Marketplace/resources/qml/PackageCard.qml | 17 +- .../Marketplace/resources/qml/PackagePage.qml | 12 +- 3 files changed, 109 insertions(+), 211 deletions(-) diff --git a/plugins/Marketplace/resources/qml/ManageButton.qml b/plugins/Marketplace/resources/qml/ManageButton.qml index b2a3ec7f1b..0614e90c87 100644 --- a/plugins/Marketplace/resources/qml/ManageButton.qml +++ b/plugins/Marketplace/resources/qml/ManageButton.qml @@ -11,226 +11,131 @@ import Cura 1.6 as Cura RowLayout { id: manageButton - property alias primaryText: primaryButton.text - property alias secondaryText: secondaryButton.text - property string busyPrimaryText: busyMessageText.text - property string busySecondaryText: busyMessageText.text - property string confirmedPrimaryText: confirmedMessageText.text - property string confirmedSecondaryText: confirmedMessageText.text - property bool busy - property bool confirmed + property string button_style + property string primaryText + property string secondaryText + property string busyPrimaryText + property string busySecondaryText + property string confirmedPrimaryText + property string confirmedSecondaryText property bool confirmedTextChoice: true signal clicked(bool primary_action) - Cura.PrimaryButton + property Component primaryButton: Component { - id: primaryButton - enabled: manageButton.enabled - - onClicked: + Cura.PrimaryButton { - busyMessage.text = manageButton.busyPrimaryText - confirmedMessage.text = manageButton.confirmedPrimaryText - manageButton.clicked(true) + id: primaryButton + enabled: manageButton.enabled + text: manageButton.primaryText + + onClicked: + { + manageButton.confirmedTextChoice = true + manageButton.clicked(true) + } } } - Cura.SecondaryButton + property Component secondaryButton: Component { - id: secondaryButton - enabled: manageButton.enabled - - onClicked: + Cura.SecondaryButton { - busyMessage.text = manageButton.busySecondaryText - confirmedMessage.text = manageButton.confirmedSecondaryText - manageButton.clicked(false) + id: secondaryButton + enabled: manageButton.enabled + text: manageButton.secondaryText + + onClicked: + { + manageButton.confirmedTextChoice = false + manageButton.clicked(false) + } } } - Item + property Component busyButton: Component { - id: busyMessage - property alias text: busyMessageText.text - height: UM.Theme.getSize("action_button").height - width: childrenRect.width - - UM.RecolorImage + Item { - id: busyIndicator - width: height - anchors.left: parent.left - anchors.top: parent.top - anchors.topMargin: UM.Theme.getSize("narrow_margin").height - anchors.bottom: parent.bottom - anchors.bottomMargin: anchors.topMargin + id: busyMessage + height: UM.Theme.getSize("action_button").height + width: childrenRect.width - source: UM.Theme.getIcon("Spinner") - color: UM.Theme.getColor("primary") - - RotationAnimator + UM.RecolorImage { - target: busyIndicator - running: busyMessage.visible - from: 0 - to: 360 - loops: Animation.Infinite - duration: 2500 - } - } - Label - { - id: busyMessageText - anchors.left: busyIndicator.right - anchors.leftMargin: UM.Theme.getSize("narrow_margin").width - anchors.verticalCenter: parent.verticalCenter + id: busyIndicator + width: height + anchors.left: parent.left + anchors.top: parent.top + anchors.topMargin: UM.Theme.getSize("narrow_margin").height + anchors.bottom: parent.bottom + anchors.bottomMargin: anchors.topMargin - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("primary") + source: UM.Theme.getIcon("Spinner") + color: UM.Theme.getColor("primary") + + RotationAnimator + { + target: busyIndicator + running: busyMessage.visible + from: 0 + to: 360 + loops: Animation.Infinite + duration: 2500 + } + } + Label + { + id: busyMessageText + anchors.left: busyIndicator.right + anchors.leftMargin: UM.Theme.getSize("narrow_margin").width + anchors.verticalCenter: parent.verticalCenter + text: manageButton.busyMessageText + + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("primary") + } } } - Item + property Component confirmButton: Component { - id: confirmedMessage - property alias text: confirmedMessageText.text + Item + { - height: UM.Theme.getSize("action_button").height - width: childrenRect.width + height: UM.Theme.getSize("action_button").height + width: childrenRect.width - Label - { - id: confirmedMessageText - anchors.verticalCenter: parent.verticalCenter - - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("primary") - } - } - - states: - [ - State - { - name: "primary" - PropertyChanges + Label { - target: primaryButton - visible: true - } - PropertyChanges - { - target: secondaryButton - visible: false - } - PropertyChanges - { - target: busyMessage - visible: false - } - PropertyChanges - { - target: confirmedMessage - visible: false - } - }, - State - { - name: "secondary" - PropertyChanges - { - target: primaryButton - visible: false - } - PropertyChanges - { - target: secondaryButton - visible: true - } - PropertyChanges - { - target: busyMessage - visible: false - } - PropertyChanges - { - target: confirmedMessage - visible: false - } - }, - State - { - name: "hidden" - PropertyChanges - { - target: primaryButton - visible: false - } - PropertyChanges - { - target: secondaryButton - visible: false - } - PropertyChanges - { - target: busyMessage - visible: false - } - PropertyChanges - { - target: confirmedMessage - visible: false - } - }, - State - { - name: "busy" - PropertyChanges - { - target: primaryButton - visible: false - } - PropertyChanges - { - target: secondaryButton - visible: false - } - PropertyChanges - { - target: busyMessage - visible: true - } - PropertyChanges - { - target: confirmedMessage - visible: false - } - }, - State - { - name: "confirmed" - PropertyChanges - { - target: primaryButton - visible: false - } - PropertyChanges - { - target: secondaryButton - visible: false - } - PropertyChanges - { - target: busyMessage - visible: false - } - PropertyChanges - { - target: confirmedMessage - visible: true + id: confirmedMessageText + anchors.verticalCenter: parent.verticalCenter text: manageButton.confirmedTextChoice ? manageButton.confirmedPrimaryText : manageButton.confirmedSecondaryText + + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("primary") } } - ] + } + + Loader + { + sourceComponent: + { + switch (manageButton.button_style) + { + case "primary": + return manageButton.primaryButton; + case "secondary": + return manageButton.secondaryButton; + case "busy": + return manageButton.busyButton; + case "confirmed": + return manageButton.confirmButton; + default: + return; + } + } + } } diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 1625f6cff3..6893b70e56 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -29,6 +29,7 @@ Rectangle width: parent.width height: UM.Theme.getSize("card").height + // card icon Image { id: packageItem @@ -44,6 +45,7 @@ Rectangle source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" } + // ColumnLayout { anchors @@ -142,6 +144,7 @@ Rectangle } } + // description Item { id: shortDescription @@ -222,6 +225,7 @@ Rectangle spacing: UM.Theme.getSize("narrow_margin").width + // label "By" Label { id: authorBy @@ -232,6 +236,7 @@ Rectangle color: UM.Theme.getColor("text") } + // clickable author name Cura.TertiaryButton { Layout.fillWidth: true @@ -252,9 +257,7 @@ Rectangle ManageButton { id: enableManageButton - state: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden" - busy: packageData.enableManageButton == "busy" - confirmed: packageData.enableManageButton == "confirmed" + button_style: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Enable") busyPrimaryText: catalog.i18nc("@button", "Enabling...") @@ -280,9 +283,7 @@ Rectangle ManageButton { id: installManageButton - state: (root.manageableInListView || installManageButton.confirmed) && !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden" - busy: packageData.stateManageInstallButton == "busy" - confirmed: packageData.stateManageInstallButton == "confirmed" + button_style: (root.manageableInListView || installManageButton.confirmed) && !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Install") busyPrimaryText: catalog.i18nc("@button", "Installing...") @@ -309,9 +310,7 @@ Rectangle ManageButton { id: updateManageButton - state: (root.manageableInListView) && (!installManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageUpdateButton : "hidden" - busy: packageData.stateManageUpdateButton == "busy" - confirmed: packageData.stateManageUpdateButton == "confirmed" + button_style: (root.manageableInListView) && (!installManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageUpdateButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Update") busyPrimaryText: catalog.i18nc("@button", "Updating...") diff --git a/plugins/Marketplace/resources/qml/PackagePage.qml b/plugins/Marketplace/resources/qml/PackagePage.qml index 1669f8ffc7..5529373ba3 100644 --- a/plugins/Marketplace/resources/qml/PackagePage.qml +++ b/plugins/Marketplace/resources/qml/PackagePage.qml @@ -207,9 +207,7 @@ Rectangle ManageButton { id: enableManageButton - state: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden" - busy: packageData.enableManageButton == "busy" - confirmed: packageData.enableManageButton == "confirmed" + button_style: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Enable") busyPrimaryText: catalog.i18nc("@button", "Enabling...") @@ -235,9 +233,7 @@ Rectangle ManageButton { id: installManageButton - state: !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden" - busy: packageData.stateManageInstallButton == "busy" - confirmed: packageData.stateManageInstallButton == "confirmed" + button_style: !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Install") busyPrimaryText: catalog.i18nc("@button", "Installing...") @@ -264,9 +260,7 @@ Rectangle ManageButton { id: updateManageButton - state: !installManageButton.confirmed || updateManageButton.confirmed ? packageData.stateManageUpdateButton : "hidden" - busy: packageData.stateManageUpdateButton == "busy" - confirmed: packageData.stateManageUpdateButton == "confirmed" + button_style: !installManageButton.confirmed || updateManageButton.confirmed ? packageData.stateManageUpdateButton : "hidden" Layout.alignment: Qt.AlignTop primaryText: catalog.i18nc("@button", "Update") busyPrimaryText: catalog.i18nc("@button", "Updating...")