Finished initial draft of CheckBox - unfortunately it is not

cross platform.

Soon It will be splitted into some cross platform
components. Updated touch example with CheckBox Page

diff --git a/examples/touch/content/CheckBoxPage.qml b/examples/touch/content/CheckBoxPage.qml
new file mode 100644 (file)
index 0000000..2fe466e
--- /dev/null
+++ b/examples/touch/content/CheckBoxPage.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the Qt Quick Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+
+
+
+
+import QtQuick 2.1
+import QtQuick.Controls 1.0
+//import QtQuick.Controls.Styles 1.0
+import QtQuick.Controls.Styles.Tizen 1.0
+
+Item {
+    width: parent.width
+    height: parent.height
+
+    Column {
+        spacing: 40
+        anchors.centerIn: parent
+
+        CheckBox {
+            text:"Check box"
+        }
+        CheckBox {
+            text:"Details"
+            style: CheckBoxStyle {
+                showDetails: true
+            }
+        }
+        CheckBox {
+            text:"onOff"
+            style: CheckBoxStyle {
+                onOff:true
+            }
+        }
+    }    
+}

diff --git a/examples/touch/content/TextInputPage.qml b/examples/touch/content/TextInputPage.qml
index da63da5..605afef 100644 (file)
--- a/examples/touch/content/TextInputPage.qml
+++ b/examples/touch/content/TextInputPage.qml
@@ -44,8 +44,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.0
-//import QtQuick.Controls.Styles 1.0
-import QtQuick.Controls.Styles.Tizen 1.0
+import QtQuick.Controls.Styles 1.0
 
 Item {
     width: parent.width
@@ -71,21 +70,37 @@ Item {
         spacing: 40
         anchors.centerIn: parent
 
-        CheckBox {
-            text:"Check box"
+        TextField {
+            anchors.margins: 20
+            text: "Text input"
+            style: touchStyle
         }
-        CheckBox {
-            text:"Details"
-            style: CheckBoxStyle {
-                showDetails: true
-                onOff:true
-            }
+
+        TextField {
+            anchors.margins: 20
+            text: "Readonly Text input"
+            style: touchStyle
+            readOnly: true
         }
-        CheckBox {
-            text:"onOff"
-            style: CheckBoxStyle {
-                onOff:true
+    }
+    Component {
+        id: touchStyle
+
+        TextFieldStyle {
+            textColor: "white"
+            font.pixelSize: 28
+            background: Item {
+                implicitHeight: 50
+                implicitWidth: 320
+                BorderImage {
+                    source: "../images/textinput.png"
+                    border.left: 8
+                    border.right: 8
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                }
             }
         }
-    }    
+    }
 }

diff --git a/examples/touch/main.qml b/examples/touch/main.qml
index 337fce8..36e7dc9 100644 (file)
--- a/examples/touch/main.qml
+++ b/examples/touch/main.qml
@@ -120,6 +120,10 @@ ApplicationWindow {
             page: "content/TabBarPage.qml"
         }
         ListElement {
+            title: "CheckBoxes"
+            page: "content/CheckBoxPage.qml"
+        }
+        ListElement {
             title: "TextInput"
             page: "content/TextInputPage.qml"
         }

diff --git a/examples/touch/touch.pro b/examples/touch/touch.pro
index 3e25b49..3cec48a 100644 (file)
--- a/examples/touch/touch.pro
+++ b/examples/touch/touch.pro
@@ -7,6 +7,7 @@ OTHER_FILES += \
     content/ProgressBarPage.qml \
     content/SliderPage.qml \
     content/TabBarPage.qml \
+    content/CheckBoxPage.qml \
     content/TextInputPage.qml
 
 

diff --git a/src/styles/CheckBoxStyle.qml b/src/styles/CheckBoxStyle.qml
index 2baca26..91099b0 100644 (file)
--- a/src/styles/CheckBoxStyle.qml
+++ b/src/styles/CheckBoxStyle.qml
@@ -45,6 +45,7 @@ import "DefaultSettings.js" as Default
 CheckBoxStyle {
     id: checkboxStyle
 
+
     label: Text {
         text: control.text
         font.pointSize: Default.checkBox.font.pixelSize
@@ -60,20 +61,17 @@ CheckBoxStyle {
         verticalAlignment: Text.AlignVCenter
     }
 
-    /*
-      0 - default CheckBox - with check indicator on the left
-      1 - check box with onoff indicator on the right
-      */
     property bool onOff: false
 
     property bool showDetails: false
 
     indicator: Item {
-        implicitWidth: indicatorLoader.implicitWidth
-        implicitHeight: indicatorLoader.implicitHeight
+        implicitWidth: bg.implicitWidth
+        implicitHeight: bg.implicitHeight
         Image {
             id:bg
             source: control.enabled ? (control.pressed? Default.checkBox.indicator.source.pressed: Default.checkBox.indicator.source.normal):Default.checkBox.indicator.source.disabled
+            anchors.centerIn:parent
             Image {
                 visible: control.checked
                 source: control.enabled ? (control.pressed || !control.checked ? Default.checkBox.indicator.markSource.pressed: Default.checkBox.indicator.markSource.normal):Default.checkBox.indicator.markSource.disabled
@@ -81,13 +79,70 @@ CheckBoxStyle {
         }        
     }
     property Component onOffIndicator: Item {
+        id:onOffind
         implicitWidth: onOffBackground.implicitWidth
         implicitHeight: onOffBackground.implicitHeight
-        TizenBorderImage {
+        state:"normal"
+        Image {
             id:onOffBackground
             anchors.centerIn: parent
-            source: Default.checkBox.onOff.icon.source.normal
+            source: if (control.checked) {
+                        control.enabled ? Default.checkBox.onOff.backgroundSource.on.normal :  Default.checkBox.onOff.backgroundSource.on.disabled
+                    } else {
+                        control.enabled ? Default.checkBox.onOff.backgroundSource.off.normal :  Default.checkBox.onOff.backgroundSource.off.disabled
+                    }            
+            Image {
+                id:icon
+                source: control.enabled ? ( control.pressed ? Default.checkBox.onOff.icon.source.pressed : Default.checkBox.onOff.icon.source.normal) :  Default.checkBox.onOff.icon.source.disabled
+                Image {
+                    source: control.enabled ? ( control.pressed ? Default.checkBox.onOff.handlerSource.pressed : Default.checkBox.onOff.handlerSource.normal) :  Default.checkBox.onOff.handlerSource.disabled
+                }
+            }
         }
+        MouseArea {
+            anchors.fill: parent
+            focus:true
+
+            onMouseXChanged: {
+                if (pressed) {
+                    if (mouse.x >= 0) {
+                        if (mouse.x <= onOffBackground.width - icon.width) {
+                            icon.x = mouse.x
+                        } else {
+                            icon.x = onOffBackground.width - icon.width
+                        }
+                    } else {
+                        icon.x = 0
+                    }
+                }
+            }
+
+            onReleased: control.checked = (icon.x > onOffBackground.width/2)
+        }
+        states: [
+            State {
+                name:"normal"
+                when:!control.checked
+                PropertyChanges {
+                    target: icon
+                    x: 0
+                }
+            },
+            State {
+                name:"checked"
+                when: control.checked
+                PropertyChanges {
+                    target: icon
+                    x: onOffBackground.width - icon.width
+                }
+            }
+
+        ]
+        transitions: [
+            Transition {
+                NumberAnimation {target:icon; property: "x";easing.type: Easing.InCubic; duration:200}
+            }
+        ]
     }
 
     property Component background: Panel {
@@ -102,6 +157,7 @@ CheckBoxStyle {
         implicitHeight: detailsBg.height
         TizenBorderImage {
             id:detailsBg
+            anchors.centerIn: parent
             source: Default.checkBox.details.source.normal
             backgroundColor: control.enabled ? (control.pressed ? Default.checkBox.details.color.pressed : Default.checkBox.details.color.normal) : Default.checkBox.details.color.disabled
             effectSource: control.enabled ? (control.pressed ? Default.checkBox.details.effectSource.pressed : Default.checkBox.details.effectSource.normal) : Default.checkBox.details.effectSource.disabled
@@ -116,6 +172,8 @@ CheckBoxStyle {
 
     /*! \internal */
     property Component panel: Item {
+        id:panelComponent
+
         implicitWidth: backgroundLoader.implicitWidth + padding.left + padding.right
         implicitHeight: backgroundLoader.implicitHeight + padding.top + padding.bottom
         Loader {
@@ -139,14 +197,24 @@ CheckBoxStyle {
             anchors.leftMargin:  checkboxStyle.spacing
             anchors.top: backgroundLoader.top
             anchors.bottom: backgroundLoader.bottom
-            anchors.right: detailsLoader.right
+            anchors.right: onOffLoader.left
             anchors.topMargin: Default.checkBox.margins.top
             anchors.bottomMargin: Default.checkBox.margins.bottom
-            anchors.rightMargin: Default.checkBox.margins.right
             sourceComponent: label
         }
         Loader {
+            id: onOffLoader
+            anchors.top: backgroundLoader.top
+            anchors.bottom: backgroundLoader.bottom
+            anchors.right: detailsLoader.right
+            anchors.topMargin: Default.checkBox.margins.top
+            anchors.bottomMargin: Default.checkBox.margins.bottom
+            sourceComponent: onOff ? onOffIndicator : null
+        }
+
+        Loader {
             id:detailsLoader
+
             anchors.top: backgroundLoader.top
             anchors.bottom: backgroundLoader.bottom
             anchors.right: backgroundLoader.right

diff --git a/src/styles/DefaultSettings.js b/src/styles/DefaultSettings.js
index 5ea2e98..9a2d61d 100644 (file)
--- a/src/styles/DefaultSettings.js
+++ b/src/styles/DefaultSettings.js
@@ -810,6 +810,22 @@ var checkBox = {
             pressed: images.img_00_button_on_off_handler,
             highlighted: images.img_00_button_on_off_handler,
             selected: images.img_00_button_on_off_handler
+        },
+        backgroundSource: {
+            on: {
+                normal:images.img_00_button_on,
+                disabled: images.img_00_button_on_dim,
+                pressed: images.img_00_button_on,
+                highlighted: images.img_00_button_on,
+                selected: images.img_00_button_on
+            },
+            off: {
+                normal:images.img_00_button_off,
+                disabled: images.img_00_button_off_dim,
+                pressed: images.img_00_button_off,
+                highlighted: images.img_00_button_off,
+                selected: images.img_00_button_off
+            }
         }
 
     },