Display different types of manage buttons through Loader.sourceComponent

cura 8734

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 string button_style
-    property alias secondaryText: secondaryButton.text
+    property string primaryText
-    property string busyPrimaryText: busyMessageText.text
+    property string secondaryText
-    property string busySecondaryText: busyMessageText.text
+    property string busyPrimaryText
-    property string confirmedPrimaryText: confirmedMessageText.text
+    property string busySecondaryText
-    property string confirmedSecondaryText: confirmedMessageText.text
+    property string confirmedPrimaryText
-    property bool busy
+    property string confirmedSecondaryText
-    property bool confirmed
     property bool confirmedTextChoice: true
 
     signal clicked(bool primary_action)
 
-    Cura.PrimaryButton
+    property Component primaryButton: Component
     {
-        id: primaryButton
+        Cura.PrimaryButton
-        enabled: manageButton.enabled
-
-        onClicked:
         {
-            busyMessage.text = manageButton.busyPrimaryText
+            id: primaryButton
-            confirmedMessage.text = manageButton.confirmedPrimaryText
+            enabled: manageButton.enabled
-            manageButton.clicked(true)
+            text: manageButton.primaryText
+
+            onClicked:
+            {
+                manageButton.confirmedTextChoice = true
+                manageButton.clicked(true)
+            }
         }
     }
 
-    Cura.SecondaryButton
+    property Component secondaryButton: Component
     {
-        id: secondaryButton
+        Cura.SecondaryButton
-        enabled: manageButton.enabled
-
-        onClicked:
         {
-            busyMessage.text = manageButton.busySecondaryText
+            id: secondaryButton
-            confirmedMessage.text = manageButton.confirmedSecondaryText
+            enabled: manageButton.enabled
-            manageButton.clicked(false)
+            text: manageButton.secondaryText
+
+            onClicked:
+            {
+                manageButton.confirmedTextChoice = false
+                manageButton.clicked(false)
+            }
         }
     }
 
-    Item
+    property Component busyButton: Component
     {
-        id: busyMessage
+        Item
-        property alias text: busyMessageText.text
-        height: UM.Theme.getSize("action_button").height
-        width: childrenRect.width
-
-        UM.RecolorImage
         {
-            id: busyIndicator
+            id: busyMessage
-            width: height
+            height: UM.Theme.getSize("action_button").height
-            anchors.left: parent.left
+            width: childrenRect.width
-            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")
+            UM.RecolorImage
-            color: UM.Theme.getColor("primary")
-
-            RotationAnimator
             {
-                target: busyIndicator
+                id: busyIndicator
-                running: busyMessage.visible
+                width: height
-                from: 0
+                anchors.left: parent.left
-                to: 360
+                anchors.top: parent.top
-                loops: Animation.Infinite
+                anchors.topMargin: UM.Theme.getSize("narrow_margin").height
-                duration: 2500
+                anchors.bottom: parent.bottom
-            }
+                anchors.bottomMargin: anchors.topMargin
-        }
-        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")
+                source: UM.Theme.getIcon("Spinner")
-            color: UM.Theme.getColor("primary")
+                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
+        Item
-        property alias text: confirmedMessageText.text
+        {
 
-        height: UM.Theme.getSize("action_button").height
+            height: UM.Theme.getSize("action_button").height
-        width: childrenRect.width
+            width: childrenRect.width
 
-        Label
+            Label
-        {
-            id: confirmedMessageText
-            anchors.verticalCenter: parent.verticalCenter
-
-            font: UM.Theme.getFont("medium_bold")
-            color: UM.Theme.getColor("primary")
-        }
-    }
-
-    states:
-    [
-        State
-        {
-            name: "primary"
-            PropertyChanges
             {
-                target: primaryButton
+                id: confirmedMessageText
-                visible: true
+                anchors.verticalCenter: parent.verticalCenter
-            }
-            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
                 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;
+            }
+        }
+    }
 }

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"
+                        button_style: !(installManageButton.confirmed || updateManageButton.confirmed) || enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden"
-                        busy: packageData.enableManageButton == "busy"
-                        confirmed: packageData.enableManageButton == "confirmed"
                         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"
+                        button_style: (root.manageableInListView || installManageButton.confirmed) && !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden"
-                        busy: packageData.stateManageInstallButton == "busy"
-                        confirmed: packageData.stateManageInstallButton == "confirmed"
                         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"
+                        button_style: (root.manageableInListView) && (!installManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageUpdateButton : "hidden"
-                        busy: packageData.stateManageUpdateButton == "busy"
-                        confirmed: packageData.stateManageUpdateButton == "confirmed"
                         Layout.alignment: Qt.AlignTop
                         primaryText: catalog.i18nc("@button", "Update")
                         busyPrimaryText: catalog.i18nc("@button", "Updating...")

plugins/Marketplace/resources/qml/PackagePage.qml

@@ -207,9 +207,7 @@ Rectangle
                     ManageButton
                     {
                         id: enableManageButton
-                        state: !(installManageButton.confirmed || updateManageButton.confirmed) ||  enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden"
+                        button_style: !(installManageButton.confirmed || updateManageButton.confirmed) ||  enableManageButton.confirmed ? packageData.stateManageEnableButton : "hidden"
-                        busy: packageData.enableManageButton == "busy"
-                        confirmed: packageData.enableManageButton == "confirmed"
                         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"
+                        button_style: !(enableManageButton.confirmed || updateManageButton.confirmed) ? packageData.stateManageInstallButton : "hidden"
-                        busy: packageData.stateManageInstallButton == "busy"
-                        confirmed: packageData.stateManageInstallButton == "confirmed"
                         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"
+                        button_style: !installManageButton.confirmed || updateManageButton.confirmed ? packageData.stateManageUpdateButton : "hidden"
-                        busy: packageData.stateManageUpdateButton == "busy"
-                        confirmed: packageData.stateManageUpdateButton == "confirmed"
                         Layout.alignment: Qt.AlignTop
                         primaryText: catalog.i18nc("@button", "Update")
                         busyPrimaryText: catalog.i18nc("@button", "Updating...")