Use HBusyIndicator as button loading indicator
This commit is contained in:
miruka
parent
effc268cac
commit
2ef75faa71
|
|
@ -13,7 +13,6 @@ Button {
|
||||||
leftPadding: padded ? spacing / (circle ? 1.5 : 1) : 0
|
leftPadding: padded ? spacing / (circle ? 1.5 : 1) : 0
|
||||||
rightPadding: leftPadding
|
rightPadding: leftPadding
|
||||||
|
|
||||||
iconItem.svgName: loading ? "hourglass" : icon.name
|
|
||||||
icon.color: theme.icons.colorize
|
icon.color: theme.icons.colorize
|
||||||
|
|
||||||
// Must be explicitely set to display correctly on KDE
|
// Must be explicitely set to display correctly on KDE
|
||||||
|
|
|
||||||
|
|
@ -21,60 +21,34 @@ HRowLayout {
|
||||||
Behavior on opacity { HNumberAnimation {} }
|
Behavior on opacity { HNumberAnimation {} }
|
||||||
|
|
||||||
|
|
||||||
HIcon {
|
Item {
|
||||||
property bool loading: button.loading || false
|
visible: button.icon.name || button.loading
|
||||||
|
|
||||||
id: icon
|
|
||||||
svgName: button.icon.name
|
|
||||||
colorize: button.icon.color
|
|
||||||
// cache: button.icon.cache // XXX: need Qt 5.13+
|
|
||||||
|
|
||||||
onLoadingChanged: if (! loading) resetAnimations.start()
|
|
||||||
|
|
||||||
|
Layout.preferredWidth: icon.width
|
||||||
Layout.fillHeight: true
|
Layout.fillHeight: true
|
||||||
Layout.alignment: Qt.AlignCenter
|
Layout.alignment: Qt.AlignCenter
|
||||||
|
|
||||||
|
HIcon {
|
||||||
|
id: icon
|
||||||
|
svgName: button.icon.name
|
||||||
|
colorize: button.icon.color
|
||||||
|
// cache: button.icon.cache // TODO: need Qt 5.13+
|
||||||
|
|
||||||
ParallelAnimation {
|
width: svgName ? implicitWidth : 0
|
||||||
id: resetAnimations
|
visible: width > 0
|
||||||
HNumberAnimation { target: icon; property: "opacity"; to: 1 }
|
|
||||||
HNumberAnimation { target: icon; property: "rotation"; to: 0 }
|
opacity: button.loading ? 0 : 1
|
||||||
|
|
||||||
|
Behavior on opacity { HNumberAnimation {} }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
HBusyIndicator {
|
||||||
|
width: height
|
||||||
|
height: parent.height
|
||||||
|
opacity: button.loading ? 1 : 0
|
||||||
|
visible: opacity > 0
|
||||||
|
|
||||||
HNumberAnimation on opacity {
|
Behavior on opacity { HNumberAnimation {} }
|
||||||
id: blink
|
|
||||||
from: 1
|
|
||||||
to: 0.5
|
|
||||||
factor: 2
|
|
||||||
running: button.loading || false
|
|
||||||
onFinished: { [from, to] = [to, from]; start() }
|
|
||||||
}
|
|
||||||
|
|
||||||
SequentialAnimation {
|
|
||||||
running: button.loading || false
|
|
||||||
loops: Animation.Infinite
|
|
||||||
|
|
||||||
HPauseAnimation { factor: blink.factor * 8 }
|
|
||||||
|
|
||||||
HNumberAnimation {
|
|
||||||
id: rotation1
|
|
||||||
target: icon
|
|
||||||
property: "rotation"
|
|
||||||
from: 0
|
|
||||||
to: 180
|
|
||||||
factor: blink.factor
|
|
||||||
}
|
|
||||||
|
|
||||||
HPauseAnimation { factor: blink.factor * 8 }
|
|
||||||
|
|
||||||
HNumberAnimation {
|
|
||||||
target: rotation1.target
|
|
||||||
property: rotation1.property
|
|
||||||
from: rotation1.to
|
|
||||||
to: 360
|
|
||||||
factor: rotation1.factor
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ TabButton {
|
||||||
leftPadding: spacing
|
leftPadding: spacing
|
||||||
rightPadding: leftPadding
|
rightPadding: leftPadding
|
||||||
|
|
||||||
iconItem.svgName: loading ? "hourglass" : icon.name
|
|
||||||
icon.color: theme.icons.colorize
|
icon.color: theme.icons.colorize
|
||||||
|
|
||||||
implicitWidth: Math.max(
|
implicitWidth: Math.max(
|
||||||
|
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="m926 68v-8.3c0-27.4-22.4-49.8-49.8-49.8h-752.5c-27.3.1-49.7 22.5-49.7 49.9v8.2c0 27.4 22.4 49.8 49.8 49.8h19.2c9.9 0 9.1 9.2 9.1 13.9 0 55.3 22.7 119.2 40 160 34.8 81.9 114.1 149 179.2 196.4 11.9 8.7 9 16.7 2.1 22.2-63.1 50.6-146.1 115.2-181.3 198-17.1 40.2-39.3 102.7-40 157.4-.1 5.6 2.2 16.5-11.2 16.5h-17.1c-27.4 0-49.8 22.4-49.8 49.8v8.3c0 27.4 22.4 49.8 49.8 49.8h752.5c27.4 0 49.8-22.4 49.8-49.8v-8.3c0-27.4-22.4-49.8-49.8-49.8h-10.8c-19.8 0-17.8-14.8-17.6-22.5 1.4-51.1-13.6-109.1-35.6-152.7-48.9-97-125.9-158.7-173.4-194.4-10.3-7.7-11.3-17.3 0-25.1 48.9-33.7 124.5-97.5 173.4-194.5 23.4-46.5 38.9-109.3 35.1-162.6-.3-4.3-.6-12.6 10.6-12.6h18.3c27.3 0 49.7-22.4 49.7-49.8zm-153.4 205c-45.5 90.3-118.4 154.8-181.9 193.8-3.8 2.3-11.1 8.1-11.1 24.3v19.3c0 17.1 7.8 20.9 11.8 23.4 63.4 39 135.8 103.4 181.1 193.3 20.9 41.6 31.8 91.8 30.7 131.8-.2 8.3 3 23.4-18.7 23.4h-569.6c-19 0-18.3-9.5-18.2-14.7.3-36.4 12.9-86.8 36.3-141.8 40.6-95.5 125.9-155.1 182.7-190.7 2.5-1.6 7.4-4.4 7.4-19.5v-28.9c0-15.6-7.5-21.7-11.4-24.2-56.7-35.8-139-94.9-178.7-188.1-23.7-55.6-36.2-106.5-36.3-142.9 0-4.8.6-13.6 11.2-13.6h582.9c11.8 0 11.6 8.9 12 13.6 3.3 41.2-7.6 96.5-30.2 141.5z"/>
|
|
||||||
<path d="m488.4 563.6-194 242.7c-6.4 8-3.3 14.6 7 14.6h397.2c10.3 0 13.4-6.6 7-14.6l-194-242.7c-6.4-8-16.8-8-23.2 0z"/>
|
|
||||||
<path d="m486.8 450.8c7.3 7.2 19.2 7.2 26.4 0l97.6-97.3c7.3-7.2 4.8-13.2-5.5-13.2h-210.6c-10.3 0-12.7 5.9-5.5 13.2z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in New Issue
Block a user