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

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