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.
This commit is contained in:
Ghostkeeper 2021-12-06 16:52:38 +01:00
parent c73ef84395
commit f932239b6a
No known key found for this signature in database
GPG Key ID: D2A8871EE34EC59A
2 changed files with 13 additions and 6 deletions

View File

@ -53,21 +53,24 @@ RowLayout
height: UM.Theme.getSize("action_button").height height: UM.Theme.getSize("action_button").height
width: childrenRect.width width: childrenRect.width
BusyIndicator UM.RecolorImage
{ {
id: busyIndicator id: busyIndicator
visible: parent.visible visible: parent.visible
width: height width: height
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: UM.Theme.getSize("narrow_margin").height
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: anchors.topMargin
palette.dark: UM.Theme.getColor("text") source: UM.Theme.getIcon("Spinner")
color: UM.Theme.getColor("primary")
RotationAnimator RotationAnimator
{ {
target: busyIndicator.contentItem target: busyIndicator
running: busyIndicator.visible && busyIndicator.running running: busyIndicator.visible
from: 0 from: 0
to: 360 to: 360
loops: Animation.Infinite loops: Animation.Infinite
@ -79,10 +82,11 @@ RowLayout
id: busyMessageText id: busyMessageText
visible: parent.visible visible: parent.visible
anchors.left: busyIndicator.right anchors.left: busyIndicator.right
anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font: UM.Theme.getFont("default") font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("text") color: UM.Theme.getColor("primary")
} }
} }

View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M22 12C22 14.6522 20.9464 17.1957 19.0711 19.0711C17.1957 20.9464 14.6522 22 12 22C9.34784 22 6.8043 20.9464 4.92893 19.0711C3.05357 17.1957 2 14.6522 2 12H4C4 13.5823 4.46919 15.129 5.34824 16.4446C6.22729 17.7602 7.47672 18.7855 8.93853 19.391C10.4003 19.9965 12.0089 20.155 13.5607 19.8463C15.1126 19.5376 16.538 18.7757 17.6569 17.6569C18.7757 16.538 19.5376 15.1126 19.8463 13.5607C20.155 12.0089 19.9965 10.4003 19.391 8.93853C18.7855 7.47672 17.7602 6.22729 16.4446 5.34824C15.129 4.46919 13.5823 4 12 4V2C14.6508 2.00436 17.1918 3.05933 19.0662 4.93375C20.9407 6.80817 21.9956 9.34917 22 12Z"/>
</svg>

After

Width:  |  Height:  |  Size: 703 B