Display different types of manage buttons through Loader.sourceComponent

cura 8734

3 files changed, 108 insertions, 210 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
-
-            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
+            id: busyMessage
+            height: UM.Theme.getSize("action_button").height
+            width: childrenRect.width
+
+            UM.RecolorImage
+            {
+                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
+
+                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")
             }
         }
-        Label
-        {
-            id: busyMessageText
-            anchors.left: busyIndicator.right
-            anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
-            anchors.verticalCenter: parent.verticalCenter
-
-            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
+            Label
+            {
+                id: confirmedMessageText
+                anchors.verticalCenter: parent.verticalCenter
+                text: manageButton.confirmedTextChoice ? manageButton.confirmedPrimaryText : manageButton.confirmedSecondaryText
 
-            font: UM.Theme.getFont("medium_bold")
-            color: UM.Theme.getColor("primary")
+                font: UM.Theme.getFont("medium_bold")
+                color: UM.Theme.getColor("primary")
+            }
         }
     }
 
-    states:
-    [
-        State
-        {
-            name: "primary"
-            PropertyChanges
-            {
-                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
+    Loader
+    {
+        sourceComponent:
         {
-            name: "confirmed"
-            PropertyChanges
-            {
-                target: primaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: secondaryButton
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: busyMessage
-                visible: false
-            }
-            PropertyChanges
-            {
-                target: confirmedMessage
-                visible: true
-                text: manageButton.confirmedTextChoice ? manageButton.confirmedPrimaryText : manageButton.confirmedSecondaryText
+            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...")