Merge pull request #67 from neochapay/checkobx_up

[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,6 +30,7 @@
 ****************************************************************************************/
 
 import QtQuick 2.6
+import QtGraphicalEffects 1.0
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Nemo 1.0
 
@@ -41,83 +42,122 @@ CheckBoxStyle {
         implicitHeight: Theme.itemHeightExtraSmall
 
         Rectangle {
-                id: back2
+            id: bgArea
             implicitWidth: Theme.itemWidthExtraSmall
             implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
-                color: Theme.fillDarkColor
+            color: control.checked ? Theme.accentColor : Theme.fillDarkColor
             anchors.centerIn: parent
-
-                Rectangle {
-                    id: back1
-                    implicitWidth: Theme.itemWidthExtraSmall
-                    implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
-                    color: Theme.accentColor
-                    anchors.centerIn: parent
-                }
         }
 
 
-            Image {
+        Rectangle {
             id: ball
-                width: Theme.itemHeightSmall
+            width: Theme.itemHeightExtraSmall
             height: Theme.itemHeightExtraSmall
-                fillMode: Image.PreserveAspectFit
-                sourceSize.width: width
-                sourceSize.height: height
-                source: "images/switch-ball.png"
+            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" }
+                }
+            }
+
+            x: control.checked ? background.width - ball.width : 0
         }
 
         Connections {
             target: control
             onCheckedChanged: {
+                if(!indeterminate) {
                     if (control.checked) {
-                        anim1.restart()
+                        checkAnimation.restart()
+                    } else {
+                        unCheckAnimation.restart()
+                    }
+                }
+            }
+
+            onIndeterminateChanged: {
+                indeterminateAnimation.stop()
+                if(indeterminate) {
+                    indeterminateAnimation.start()
                 } else {
-                        anim2.restart()
+                    indeterminateAnimation.stop()
+                    bgArea.color = control.checked ? Theme.accentColor : Theme.fillDarkColor
                 }
             }
         }
 
         Component.onCompleted: {
-                back1.opacity = control.checked ? 1 : 0
-                ball.x = control.checked ? background.width - ball.width : 0
+            if(control.indeterminate){
+                indeterminateAnimation.start()
+            }
         }
 
-            SequentialAnimation {
-                id: anim1
+        ParallelAnimation {
+            id: checkAnimation
             running: false
             NumberAnimation {
                 target: ball
                 property: "x"
                 to: background.width - ball.width
-                    duration: 120
+                duration: 400
             }
-                NumberAnimation {
-                    target: back1
-                    property: "opacity"
-                    to: 1
-                    duration: 120
+            PropertyAnimation {
+                target: bgArea
+                property: "color"
+                to: Theme.accentColor
+                duration: 400
             }
         }
 
-            SequentialAnimation {
-                id: anim2
+        ParallelAnimation {
+            id: unCheckAnimation
             running: false
             NumberAnimation {
                 target: ball
                 property: "x"
                 to: 0
-                    duration: 120
+                duration: 400
             }
-                NumberAnimation {
-                    target: back1
-                    property: "opacity"
-                    to: 0
-                    duration: 120
+            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