mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-24 23:23:57 -06:00
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:
parent
02d74b4226
commit
eb156f114c
2 changed files with 187 additions and 22 deletions
154
plugins/Marketplace/resources/qml/ManageButton.qml
Normal file
154
plugins/Marketplace/resources/qml/ManageButton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue