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
This commit is contained in:
Jelle Spijker 2021-11-30 12:03:15 +01:00
parent 02d74b4226
commit eb156f114c
No known key found for this signature in database
GPG key ID: 6662DC033BE6B99A
2 changed files with 187 additions and 22 deletions

View file

@ -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

View file

@ -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
}
}
]
}