Make BusyIndicator style use threaded animations

This uses a graphic that will work even when the application is
busy. It should still work pretty well on most light and dark
backgrounds.

Change-Id: I5506120140fe37cdfbd7d88004f5ad3d817b5aed
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

5 files changed, 20 insertions, 28 deletions

diff --git a/src/controls/Styles/Base/BusyIndicatorStyle.qml b/src/controls/Styles/Base/BusyIndicatorStyle.qml
index 2a033024..d53ccb29 100644
--- a/src/controls/Styles/Base/BusyIndicatorStyle.qml
+++ b/src/controls/Styles/Base/BusyIndicatorStyle.qml
@@ -37,7 +37,7 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-import QtQuick 2.1
+import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Private 1.0
 
@@ -77,36 +77,25 @@ Style {
 
     /*! This defines the appearance of the busy indicator. */
     property Component indicator: Item {
-        implicitWidth: 32
-        implicitHeight: 32
+        implicitWidth: 48
+        implicitHeight: 48
 
         opacity: control.running ? 1 : 0
-        Behavior on opacity { NumberAnimation { duration: 250 } }
+        Behavior on opacity { OpacityAnimator { duration: 250 } }
 
-        Timer {
-            interval: 16
-            running: control.running
-            repeat: true
-            onTriggered: { repeater.counter += 0.20 }
-        }
-
-        Repeater {
-            id: repeater
-            model: 9
-            anchors.fill: parent
-            property real counter: 0
-            Rectangle {
-                width: repeater.width/6 + 2
-                height: width
-                radius: width/2
-                x: repeater.width/2
-                transform: Rotation { origin.x: 0 ; origin.y: repeater.width/2 ; angle: 5 + (360/repeater.count) * index}
-                border.color: Qt.rgba(0, 0, 0, 0.24)
-                color: Qt.rgba(lum, lum, lum, lum/2 + 0.3)
-                property real lum: {
-                    var idx = ((repeater.count-index) + repeater.counter) % repeater.count
-                    return Math.max( 0.3, 1 - (idx/(repeater.count - 1)))
-                }
+        Image {
+            anchors.centerIn: parent
+            anchors.alignWhenCentered: true
+            width: Math.min(parent.width, parent.height)
+            height: width
+            source: width <= 32 ? "images/spinner_small.png" :
+                                  width >= 48 ? "images/spinner_large.png" :
+                                                "images/spinner_medium.png"
+            RotationAnimator on rotation {
+                duration: 800
+                loops: Animation.Infinite
+                from: 0
+                to: 360
             }
         }
     }
diff --git a/src/controls/Styles/Base/images/spinner_large.png b/src/controls/Styles/Base/images/spinner_large.png
new file mode 100644
index 00000000..bfd1b637
--- /dev/null
+++ b/src/controls/Styles/Base/images/spinner_large.png
diff --git a/src/controls/Styles/Base/images/spinner_medium.png b/src/controls/Styles/Base/images/spinner_medium.png
new file mode 100644
index 00000000..41409d45
--- /dev/null
+++ b/src/controls/Styles/Base/images/spinner_medium.png
diff --git a/src/controls/Styles/Base/images/spinner_small.png b/src/controls/Styles/Base/images/spinner_small.png
new file mode 100644
index 00000000..2f6048e4
--- /dev/null
+++ b/src/controls/Styles/Base/images/spinner_small.png
diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri
index 5a36767e..d695893a 100644
--- a/src/controls/Styles/styles.pri
+++ b/src/controls/Styles/styles.pri
@@ -73,6 +73,9 @@ STYLES_QML_FILES += \
     $$PWD/Base/images/arrow-left@2x.png \
     $$PWD/Base/images/arrow-right.png \
     $$PWD/Base/images/arrow-right@2x.png \
+    $$PWD/Base/images/spinner_small.png \
+    $$PWD/Base/images/spinner_medium.png \
+    $$PWD/Base/images/spinner_large.png \
     $$PWD/Base/images/check.png \
     $$PWD/Base/images/check@2x.png