Cura/plugins/Marketplace/resources/qml/ManageButton.qml
Ghostkeeper f932239b6a
Implement aesthetics of busy indicator
Don't use the default spinner but use an image from our theme. A new image. And change the font size, colour and spacings a bit according to our designs.

Contributes to issue CURA-8587.
2021-12-06 16:52:47 +01:00

162 lines
3.9 KiB
QML

// 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 bool enabled: true
property bool busy: state == "busy"
signal clicked(bool primary_action)
Cura.PrimaryButton
{
id: primaryButton
visible: false
enabled: manageButton.enabled
onClicked:
{
busyMessageText.text = manageButton.busyPrimaryText
manageButton.clicked(true)
}
}
Cura.SecondaryButton
{
id: secondaryButton
visible: false
enabled: manageButton.enabled
onClicked:
{
busyMessageText.text = manageButton.busySecondaryText
manageButton.clicked(false)
}
}
Item
{
id: busyMessage
visible: false
height: UM.Theme.getSize("action_button").height
width: childrenRect.width
UM.RecolorImage
{
id: busyIndicator
visible: parent.visible
width: height
anchors.left: parent.left
anchors.top: parent.top
anchors.topMargin: UM.Theme.getSize("narrow_margin").height
anchors.bottom: parent.bottom
anchors.bottomMargin: anchors.topMargin
source: UM.Theme.getIcon("Spinner")
color: UM.Theme.getColor("primary")
RotationAnimator
{
target: busyIndicator
running: busyIndicator.visible
from: 0
to: 360
loops: Animation.Infinite
duration: 2500
}
}
Label
{
id: busyMessageText
visible: parent.visible
anchors.left: busyIndicator.right
anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
anchors.verticalCenter: parent.verticalCenter
font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("primary")
}
}
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: manageButton.visible
}
}
]
}