From 9d952ae34819231a25edda9fd760409ae30fdb5b Mon Sep 17 00:00:00 2001
From: J-P Nurmi <jpnurmi@theqtcompany.com>
Date: Wed, 25 Nov 2015 19:01:58 +0100
Subject: Optimize Material CheckBox

Before:

    tst_ObjectCount::material(CheckBox):
         QQuickItems: 5 (total of QObjects: 28 )
    tst_CreationTime::material():"CheckBox":
         0.28 msecs per iteration (total: 72, iterations: 256)

After:

    tst_ObjectCount::material(CheckBox):
         QQuickItems: 5 (total of QObjects: 19 )
    tst_CreationTime::material():"CheckBox":
         0.20 msecs per iteration (total: 53, iterations: 256)

Change-Id: I63a76f5bfb190655237d21d68397d5dc93941fe0
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
---
 src/imports/controls/material/CheckBox.qml | 124 +++++++++--------------------
 1 file changed, 37 insertions(+), 87 deletions(-)

(limited to 'src')

diff --git a/src/imports/controls/material/CheckBox.qml b/src/imports/controls/material/CheckBox.qml
index 5884a64e..939d5a31 100644
--- a/src/imports/controls/material/CheckBox.qml
+++ b/src/imports/controls/material/CheckBox.qml
@@ -60,12 +60,23 @@ T.CheckBox {
         y: control.topPadding + (control.availableHeight - height) / 2
         implicitWidth: 20
         implicitHeight: 20
-        border.color: control.Material.secondaryTextColor
+        color: "transparent"
+        border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor
+        border.width: control.checked ? width / 2 : 2
         radius: 2
 
-        Component.onCompleted: {
-            color = control.checked || control.pressed ? control.Material.accentColor : "transparent";
-            border.width = control.checked || control.pressed ? 0 : 2;
+        Behavior on border.width {
+            NumberAnimation {
+                duration: 100
+                easing.type: Easing.OutCubic
+            }
+        }
+
+        Behavior on border.color {
+            ColorAnimation {
+                duration: 100
+                easing.type: Easing.OutCubic
+            }
         }
 
         Ripple {
@@ -81,96 +92,35 @@ T.CheckBox {
             id: checkImage
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
+            width: 16
+            height: 16
             source: "qrc:/qt-project.org/imports/Qt/labs/controls/material/images/check.png"
             fillMode: Image.PreserveAspectFit
 
-            Component.onCompleted: {
-                width = control.checked || control.pressed ? 16 : 0;
-                height = control.checked || control.pressed ? 16 : 0;
-            }
-        }
-
-        Connections {
-            target: control
-            onCheckedChanged: {
-                pressScaleAnimation.start();
-                if (control.checked)
-                    checkedAnimation.start();
-                else
-                    uncheckedAnimation.start();
-            }
-        }
-
-        SequentialAnimation {
-            id: pressScaleAnimation
-
-            NumberAnimation {
-                target: indicatorItem
-                property: "scale"
-                // Go down 2 pixels in size.
-                to: 1 - 2 / indicatorItem.width
-                duration: 120
-            }
-            NumberAnimation {
-                target: indicatorItem
-                property: "scale"
-                to: 1
-                duration: 120
-            }
+            scale: control.checked ? 1 : 0
+            Behavior on scale { NumberAnimation { duration: 100 } }
         }
 
-        SequentialAnimation {
-            id: checkedAnimation
-
-            PropertyAction {
-                target: indicatorItem.border
-                property: "color"
-                value: control.Material.accentColor
-            }
-            NumberAnimation {
-                target: indicatorItem.border
-                property: "width"
-                from: 2
-                to: indicatorItem.width / 2
-                easing.type: Easing.OutCubic
-                duration: 100
-            }
-            NumberAnimation {
-                target: checkImage
-                properties: "width, height"
-                from: 0
-                to: 16
-                duration: 100
-            }
+        states: State {
+            name: "checked"
+            when: control.checked
         }
 
-        SequentialAnimation {
-            id: uncheckedAnimation
-
-            PropertyAction {
-                target: indicatorItem.border
-                property: "color"
-                value: control.Material.secondaryTextColor
-            }
-            NumberAnimation {
-                target: checkImage
-                properties: "width, height"
-                from: 16
-                to: 0
-                duration: 100
-            }
-            NumberAnimation {
-                target: indicatorItem.border
-                property: "width"
-                from: indicatorItem.width / 2
-                to: 2
-                easing.type: Easing.OutCubic
-                duration: 100
-            }
-            PropertyAction {
-                target: indicatorItem
-                property: "color"
-                value: "transparent"
+        transitions: Transition {
+            SequentialAnimation {
+                NumberAnimation {
+                    target: indicatorItem
+                    property: "scale"
+                    // Go down 2 pixels in size.
+                    to: 1 - 2 / indicatorItem.width
+                    duration: 120
+                }
+                NumberAnimation {
+                    target: indicatorItem
+                    property: "scale"
+                    to: 1
+                    duration: 120
+                }
             }
         }
     }
-- 
cgit v1.2.3