[CheckBox] Add checkBox indeterminate property and clean code

examples/touch/content/CheckboxPage.qml

@@ -37,13 +37,32 @@ import QtQuick.Controls.Styles.Nemo 1.0
 Page {
     id: root
 
-    headerTools: HeaderToolsLayout { showBackButton: true; title: "Switch" }
+    headerTools: HeaderToolsLayout { showBackButton: true; title:  qsTr("Switch") }
 
     Column {
         spacing: 40
         anchors.centerIn: parent
         CheckBox {
-            text: "Test 1: "
+            id: defaultCheckbox
+            text: qsTr("Default checkbox")
+        }
+
+
+        CheckBox {
+            id: indeterminateCheckbox
+            text: qsTr("Indeterminate checkbox")
+            onCheckedChanged: {
+                indeterminateCheckbox.indeterminate = true
+                indeterminateTimer.start()
+            }
+        }
+    }
+
+    Timer{
+        id: indeterminateTimer
+        interval: 4000
+        onTriggered: {
+            indeterminateCheckbox.indeterminate = false
         }
     }
 }

src/controls/qml/Checkbox.qml

@@ -4,5 +4,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
 
 CheckBox {
     property int fontSize: Theme.fontSizeSmall
+
+    property bool indeterminate: false
+
     style: CheckBoxStyle{}
 }

src/styles/qml/CheckBoxStyle.qml

@@ -30,94 +30,134 @@
 ****************************************************************************************/
 
 import QtQuick 2.6
+import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Nemo 1.0
 
-CheckBoxStyle {
+CheckBoxStyle {   
     indicator: Rectangle {
-            id: background
-            color: "transparent"
+        id: background
+        color: "transparent"
+        implicitWidth: Theme.itemWidthExtraSmall
+        implicitHeight: Theme.itemHeightExtraSmall
+
+        Rectangle {
+            id: bgArea
             implicitWidth: Theme.itemWidthExtraSmall
-            implicitHeight: Theme.itemHeightExtraSmall
-
-            Rectangle {
-                id: back2
-                implicitWidth: Theme.itemWidthExtraSmall
-                implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
-                color: Theme.fillDarkColor
-                anchors.centerIn: parent
-
-                Rectangle {
-                    id: back1
-                    implicitWidth: Theme.itemWidthExtraSmall
-                    implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
-                    color: Theme.accentColor
-                    anchors.centerIn: parent
-                }
-            }
+            implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
+            color: control.checked ? Theme.accentColor : Theme.fillDarkColor
+            anchors.centerIn: parent
+        }
 
 
-            Image {
-                id: ball
-                width: Theme.itemHeightSmall
-                height: Theme.itemHeightExtraSmall
-                fillMode: Image.PreserveAspectFit
-                sourceSize.width: width
-                sourceSize.height: height
-                source: "images/switch-ball.png"
-                anchors.verticalCenter: parent.verticalCenter
+        Rectangle {
+            id: ball
+            width: Theme.itemHeightExtraSmall
+            height: Theme.itemHeightExtraSmall
+            radius: width/2
+            anchors.verticalCenter: parent.verticalCenter
+
+            clip: true
+
+            LinearGradient {
+                anchors.fill: parent
+                start: Qt.point(0, 0)
+                end: Qt.point(0, Theme.itemHeightExtraSmall)
+                source: ball
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "#ffffff" }
+                    GradientStop { position: 1.0; color: "#dcdcdc" }
+                }
             }
 
-            Connections {
-                target: control
-                onCheckedChanged: {
+            x: control.checked ? background.width - ball.width : 0
+        }
+
+        Connections {
+            target: control
+            onCheckedChanged: {
+                if(!indeterminate) {
                     if (control.checked) {
-                        anim1.restart()
+                        checkAnimation.restart()
                     } else {
-                        anim2.restart()
+                        unCheckAnimation.restart()
                     }
                 }
             }
 
-            Component.onCompleted: {
-                back1.opacity = control.checked ? 1 : 0
-                ball.x = control.checked ? background.width - ball.width : 0
+            onIndeterminateChanged: {
+                indeterminateAnimation.stop()
+                if(indeterminate) {
+                    indeterminateAnimation.start()
+                } else {
+                    indeterminateAnimation.stop()
+                    bgArea.color = control.checked ? Theme.accentColor : Theme.fillDarkColor
+                }
             }
+        }
 
-            SequentialAnimation {
-                id: anim1
-                running: false
-                NumberAnimation {
-                    target: ball
-                    property: "x"
-                    to: background.width - ball.width
-                    duration: 120
-                }
-                NumberAnimation {
-                    target: back1
-                    property: "opacity"
-                    to: 1
-                    duration: 120
-                }
+        Component.onCompleted: {
+            if(control.indeterminate){
+                indeterminateAnimation.start()
             }
+        }
 
-            SequentialAnimation {
-                id: anim2
-                running: false
-                NumberAnimation {
-                    target: ball
-                    property: "x"
-                    to: 0
-                    duration: 120
-                }
-                NumberAnimation {
-                    target: back1
-                    property: "opacity"
-                    to: 0
-                    duration: 120
-                }
+        ParallelAnimation {
+            id: checkAnimation
+            running: false
+            NumberAnimation {
+                target: ball
+                property: "x"
+                to: background.width - ball.width
+                duration: 400
             }
+            PropertyAnimation {
+                target: bgArea
+                property: "color"
+                to: Theme.accentColor
+                duration: 400
+            }
+        }
+
+        ParallelAnimation {
+            id: unCheckAnimation
+            running: false
+            NumberAnimation {
+                target: ball
+                property: "x"
+                to: 0
+                duration: 400
+            }
+            PropertyAnimation {
+                target: bgArea
+                property: "color"
+                to: Theme.fillDarkColor
+                duration: 400
+            }
+        }
+
+        SequentialAnimation{
+            id: indeterminateAnimation
+            running: false
+
+            loops: Animation.Infinite
+
+            PropertyAnimation {
+                target: bgArea
+                property: "color"
+                to: control.checked ? Theme.fillDarkColor : Theme.accentColor
+                duration: 500
+            }
+
+            PropertyAnimation {
+                target: bgArea
+                property: "color"
+                to: control.checked ? Theme.accentColor : Theme.fillDarkColor
+                duration: 500
+            }
+        }
     }
+
     label: Label {
         text: control.text
         font.pixelSize:control.fontSize