From eb156f114c7d596bf778c48dfee7ff9ddfb7bcff Mon Sep 17 00:00:00 2001 From: Jelle Spijker Date: Tue, 30 Nov 2021 12:03:15 +0100 Subject: [PATCH] Introduce a ManageButton The state and styling of this coupled with the available options. Discussed with UX that primary state: Install, Enable, Update while secondary states are: Uninstall, Disable Each primary/secondary state also has a busy state, with the verb and spinner. Contributes to: CURA-8587 --- plugins/Marketplace/PackageModel.py | 55 ++++--- .../resources/qml/ManageButton.qml | 154 ++++++++++++++++++ 2 files changed, 187 insertions(+), 22 deletions(-) create mode 100644 plugins/Marketplace/resources/qml/ManageButton.qml diff --git a/plugins/Marketplace/PackageModel.py b/plugins/Marketplace/PackageModel.py index 24f9671b34..4a4973a2dc 100644 --- a/plugins/Marketplace/PackageModel.py +++ b/plugins/Marketplace/PackageModel.py @@ -99,34 +99,45 @@ class PackageModel(QObject): def sectionTitle(self) -> Optional[str]: return self._section_title - enableManageButtonChanged = pyqtSignal() + isInstalledChanged = pyqtSignal() - @pyqtProperty(str, notify = enableManageButtonChanged) - def enableManageButtonText(self): - if self._is_active: - return catalog.i18nc("@button", "Disable") - else: - return catalog.i18nc("@button", "Enable") - - @pyqtProperty(bool, notify = enableManageButtonChanged) - def enableManageButtonVisible(self): + @pyqtProperty(bool, notify = isInstalledChanged) + def isInstalled(self): return self._is_installed - installManageButtonChanged = pyqtSignal() + isEnabledChanged = pyqtSignal() - @pyqtProperty(str, notify = installManageButtonChanged) - def installManageButtonText(self): + @pyqtProperty(bool, notify = isEnabledChanged) + def isEnabled(self): + return self._is_active + + manageEnableStateChanged = pyqtSignal() + + @pyqtProperty(str, notify = manageEnableStateChanged) + def manageEnableState(self): + # TODO: Handle manual installed packages if self._is_installed: - return catalog.i18nc("@button", "Uninstall") + if self._is_active: + return "secondary" + else: + return "primary" else: - return catalog.i18nc("@button", "Install") + return "hidden" - @pyqtProperty(bool, notify = installManageButtonChanged) - def installManageButtonVisible(self): - return not self._is_bundled + manageInstallStateChanged = pyqtSignal() - updateManageButtonChanged = pyqtSignal() + @pyqtProperty(str, notify = manageInstallStateChanged) + def manageInstallState(self): + if self._is_installed: + if self._is_bundled: + return "hidden" + else: + return "secondary" + else: + return "primary" - @pyqtProperty(bool, notify = updateManageButtonChanged) - def updateManageButtonVisible(self): - return False # Todo: implement + manageUpdateStateChanged = pyqtSignal() + + @pyqtProperty(str, notify = manageUpdateStateChanged) + def manageUpdateState(self): + return "hidden" # TODO: implement diff --git a/plugins/Marketplace/resources/qml/ManageButton.qml b/plugins/Marketplace/resources/qml/ManageButton.qml new file mode 100644 index 0000000000..e58347124a --- /dev/null +++ b/plugins/Marketplace/resources/qml/ManageButton.qml @@ -0,0 +1,154 @@ +// Copyright (c) 2021 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.1 + +import UM 1.6 as UM +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 mainState: "primary" + + state: mainState + + Cura.PrimaryButton + { + id: primaryButton + visible: false + + onClicked: + { + manageButton.state = "busy" + } + } + + Cura.SecondaryButton + { + id: secondaryButton + visible: false + + onClicked: + { + manageButton.state = "busy" + } + } + + Item + { + id: busyMessage + visible: false + height: UM.Theme.getSize("action_button").height + width: childrenRect.width + + BusyIndicator + { + id: busyIndicator + visible: parent.visible + width: height + anchors.left: parent.left + anchors.top: parent.top + anchors.bottom: parent.bottom + + palette.dark: UM.Theme.getColor("text") + + RotationAnimator + { + target: busyIndicator.contentItem + running: busyIndicator.visible && busyIndicator.running + from: 0 + to: 360 + loops: Animation.Infinite + duration: 2500 + } + } + Label + { + id: busyMessageText + visible: parent.visible + text: manageButton.mainState == "primary" ? manageButton.busyPrimaryText : manageButton.busySecondaryText + anchors.left: busyIndicator.right + anchors.verticalCenter: parent.verticalCenter + + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + } + + states: + [ + State + { + name: "primary" + PropertyChanges + { + target: primaryButton + visible: true + } + PropertyChanges + { + target: secondaryButton + visible: false + } + PropertyChanges + { + target: busyMessage + visible: false + } + }, + State + { + name: "secondary" + PropertyChanges + { + target: primaryButton + visible: false + } + PropertyChanges + { + target: secondaryButton + visible: true + } + PropertyChanges + { + target: busyMessage + visible: false + } + }, + State + { + name: "hidden" + PropertyChanges + { + target: manageButton + visible: false + } + }, + State + { + name: "busy" + PropertyChanges + { + target: primaryButton + visible: false + } + PropertyChanges + { + target: secondaryButton + visible: false + } + PropertyChanges + { + target: busyMessage + visible: true + } + } + ] +}