Display different types of manage buttons through Loader.sourceComponent

cura 8734
This commit is contained in:
casper 2021-12-08 14:46:29 +01:00
parent fb92f1f49a
commit 4a436b5598
3 changed files with 109 additions and 211 deletions

View file

@ -11,48 +11,54 @@ import Cura 1.6 as Cura
RowLayout RowLayout
{ {
id: manageButton 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 property bool confirmedTextChoice: true
signal clicked(bool primary_action) signal clicked(bool primary_action)
property Component primaryButton: Component
{
Cura.PrimaryButton Cura.PrimaryButton
{ {
id: primaryButton id: primaryButton
enabled: manageButton.enabled enabled: manageButton.enabled
text: manageButton.primaryText
onClicked: onClicked:
{ {
busyMessage.text = manageButton.busyPrimaryText manageButton.confirmedTextChoice = true
confirmedMessage.text = manageButton.confirmedPrimaryText
manageButton.clicked(true) manageButton.clicked(true)
} }
} }
}
property Component secondaryButton: Component
{
Cura.SecondaryButton Cura.SecondaryButton
{ {
id: secondaryButton id: secondaryButton
enabled: manageButton.enabled enabled: manageButton.enabled
text: manageButton.secondaryText
onClicked: onClicked:
{ {
busyMessage.text = manageButton.busySecondaryText manageButton.confirmedTextChoice = false
confirmedMessage.text = manageButton.confirmedSecondaryText
manageButton.clicked(false) manageButton.clicked(false)
} }
} }
}
property Component busyButton: Component
{
Item Item
{ {
id: busyMessage id: busyMessage
property alias text: busyMessageText.text
height: UM.Theme.getSize("action_button").height height: UM.Theme.getSize("action_button").height
width: childrenRect.width width: childrenRect.width
@ -85,16 +91,18 @@ RowLayout
anchors.left: busyIndicator.right anchors.left: busyIndicator.right
anchors.leftMargin: UM.Theme.getSize("narrow_margin").width anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: manageButton.busyMessageText
font: UM.Theme.getFont("medium_bold") font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("primary") color: UM.Theme.getColor("primary")
} }
} }
}
property Component confirmButton: Component
{
Item Item
{ {
id: confirmedMessage
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
@ -103,134 +111,31 @@ RowLayout
{ {
id: confirmedMessageText id: confirmedMessageText
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: manageButton.confirmedTextChoice ? manageButton.confirmedPrimaryText : manageButton.confirmedSecondaryText
font: UM.Theme.getFont("medium_bold") font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("primary") color: UM.Theme.getColor("primary")
} }
} }
}
states: Loader
[
State
{ {
name: "primary" sourceComponent:
PropertyChanges
{ {
target: primaryButton switch (manageButton.button_style)
visible: true
}
PropertyChanges
{ {
target: secondaryButton case "primary":
visible: false return manageButton.primaryButton;
} case "secondary":
PropertyChanges return manageButton.secondaryButton;
{ case "busy":
target: busyMessage return manageButton.busyButton;
visible: false case "confirmed":
} return manageButton.confirmButton;
PropertyChanges default:
{ return;
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
} }
} }
]
} }

View file

@ -29,6 +29,7 @@ Rectangle
width: parent.width width: parent.width
height: UM.Theme.getSize("card").height height: UM.Theme.getSize("card").height
// card icon
Image Image
{ {
id: packageItem id: packageItem
@ -44,6 +45,7 @@ Rectangle
source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
} }
//
ColumnLayout ColumnLayout
{ {
anchors anchors
@ -142,6 +144,7 @@ Rectangle
} }
} }
// description
Item Item
{ {
id: shortDescription id: shortDescription
@ -222,6 +225,7 @@ Rectangle
spacing: UM.Theme.getSize("narrow_margin").width spacing: UM.Theme.getSize("narrow_margin").width
// label "By"
Label Label
{ {
id: authorBy id: authorBy
@ -232,6 +236,7 @@ Rectangle
color: UM.Theme.getColor("text") color: UM.Theme.getColor("text")
} }
// clickable author name
Cura.TertiaryButton Cura.TertiaryButton
{ {
Layout.fillWidth: true Layout.fillWidth: true
@ -252,9 +257,7 @@ Rectangle
ManageButton ManageButton
{ {
id: enableManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Enable") primaryText: catalog.i18nc("@button", "Enable")
busyPrimaryText: catalog.i18nc("@button", "Enabling...") busyPrimaryText: catalog.i18nc("@button", "Enabling...")
@ -280,9 +283,7 @@ Rectangle
ManageButton ManageButton
{ {
id: installManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Install") primaryText: catalog.i18nc("@button", "Install")
busyPrimaryText: catalog.i18nc("@button", "Installing...") busyPrimaryText: catalog.i18nc("@button", "Installing...")
@ -309,9 +310,7 @@ Rectangle
ManageButton ManageButton
{ {
id: updateManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Update") primaryText: catalog.i18nc("@button", "Update")
busyPrimaryText: catalog.i18nc("@button", "Updating...") busyPrimaryText: catalog.i18nc("@button", "Updating...")

View file

@ -207,9 +207,7 @@ Rectangle
ManageButton ManageButton
{ {
id: enableManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Enable") primaryText: catalog.i18nc("@button", "Enable")
busyPrimaryText: catalog.i18nc("@button", "Enabling...") busyPrimaryText: catalog.i18nc("@button", "Enabling...")
@ -235,9 +233,7 @@ Rectangle
ManageButton ManageButton
{ {
id: installManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Install") primaryText: catalog.i18nc("@button", "Install")
busyPrimaryText: catalog.i18nc("@button", "Installing...") busyPrimaryText: catalog.i18nc("@button", "Installing...")
@ -264,9 +260,7 @@ Rectangle
ManageButton ManageButton
{ {
id: updateManageButton 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 Layout.alignment: Qt.AlignTop
primaryText: catalog.i18nc("@button", "Update") primaryText: catalog.i18nc("@button", "Update")
busyPrimaryText: catalog.i18nc("@button", "Updating...") busyPrimaryText: catalog.i18nc("@button", "Updating...")