Add CheckDelegate

CheckDelegate is an item delegate that is used in lists, and can be
checked and unchecked. It derives from QQuickItemDelegate and hence has
background press effects. The order of the indicator and text is
reversed (compared to CheckBox) to reflect what is most commonly seen
on mobile.

Change-Id: I6fdac226fe87247052389b2e49f6cf20d7be44fb
Task-number: QTBUG-52208
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>

26 files changed, 750 insertions, 135 deletions

diff --git a/src/imports/controls/CheckBox.qml b/src/imports/controls/CheckBox.qml
index f6f62ed3..fd0b5f8b 100644
--- a/src/imports/controls/CheckBox.qml
+++ b/src/imports/controls/CheckBox.qml
@@ -36,6 +36,7 @@
 
 import QtQuick 2.6
 import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.impl 1.0
 
 T.CheckBox {
     id: control
@@ -52,31 +53,10 @@ T.CheckBox {
     opacity: enabled ? 1 : 0.2
 
     //! [indicator]
-    indicator: Rectangle {
-        implicitWidth: 28
-        implicitHeight: 28
+    indicator: CheckIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-
-        color: control.enabled ? (control.pressed ? (control.activeKeyFocus ? "#cce0ff" : "#e4e4e4") : "#f6f6f6") : "#353637"
-        border.width: control.activeKeyFocus ? 2 : 1
-        border.color: control.enabled ? (control.activeKeyFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "transparent"
-
-        Image {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/check" + (control.activeKeyFocus ? "-focus.png" : ".png")
-            visible: control.checkState === Qt.Checked
-        }
-
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 16
-            height: 3
-            color: control.activeKeyFocus ? "#0066ff" : "#353637"
-            visible: control.checkState === Qt.PartiallyChecked
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/CheckDelegate.qml b/src/imports/controls/CheckDelegate.qml
new file mode 100644
index 00000000..4c5f0644
--- /dev/null
+++ b/src/imports/controls/CheckDelegate.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.impl 1.0
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 12
+    spacing: 12
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: control.checkable && control.mirrored ? control.indicator.width + control.spacing : 0
+        rightPadding: control.checkable && !control.mirrored ? control.indicator.width + control.spacing : 0
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? "#26282a" : "#bdbebf"
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+    }
+    //! [contentItem]
+
+    //! [indicator]
+    indicator: CheckIndicator {
+        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        y: control.topPadding + (control.availableHeight - height) / 2
+
+        control: control
+    }
+    //! [indicator]
+
+    //! [background]
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: 40
+        visible: control.pressed || control.highlighted
+        color: control.pressed ? "#bdbebf" : "#eeeeee"
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/CheckIndicator.qml b/src/imports/controls/CheckIndicator.qml
new file mode 100644
index 00000000..e6670a5e
--- /dev/null
+++ b/src/imports/controls/CheckIndicator.qml
@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+
+Rectangle {
+    id: indicator
+
+    property Item control
+
+    implicitWidth: 28
+    implicitHeight: 28
+
+    color: control.enabled ? (control.pressed ? (control.activeFocus ? "#cce0ff" : "#e4e4e4") : "#f6f6f6") : "#353637"
+    border.width: control.activeFocus ? 2 : 1
+    border.color: control.enabled ? (control.activeFocus ? "#0066ff" : (control.pressed ? "#26282a" : "#353637")) : "transparent"
+
+    Image {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/check" + (control.activeFocus ? "-focus.png" : ".png")
+        visible: control.checkState === Qt.Checked
+    }
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: 16
+        height: 3
+        color: control.activeFocus ? "#0066ff" : "#353637"
+        visible: control.checkState === Qt.PartiallyChecked
+    }
+}
diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri
index 0b0881b9..43a09f19 100644
--- a/src/imports/controls/controls.pri
+++ b/src/imports/controls/controls.pri
@@ -11,6 +11,8 @@ QML_CONTROLS = \
     BusyIndicator.qml \
     Button.qml \
     CheckBox.qml \
+    CheckDelegate.qml \
+    CheckIndicator.qml \
     ComboBox.qml \
     Dial.qml \
     Drawer.qml \
diff --git a/src/imports/controls/designer/CheckDelegateSpecifics.qml b/src/imports/controls/designer/CheckDelegateSpecifics.qml
new file mode 100644
index 00000000..fbc31858
--- /dev/null
+++ b/src/imports/controls/designer/CheckDelegateSpecifics.qml
@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.0
+
+Column {
+    width: parent.width
+
+    ButtonSection {
+        caption: qsTr("Check Delegate")
+        width: parent.width
+    }
+
+    ControlSection {
+        width: parent.width
+    }
+
+    PaddingSection {
+        width: parent.width
+    }
+}
diff --git a/src/imports/controls/designer/designer.pri b/src/imports/controls/designer/designer.pri
index 412f6ad6..6636e160 100644
--- a/src/imports/controls/designer/designer.pri
+++ b/src/imports/controls/designer/designer.pri
@@ -6,6 +6,7 @@ QML_FILES += \
     $$PWD/ButtonSection.qml \
     $$PWD/ButtonSpecifics.qml \
     $$PWD/CheckBoxSpecifics.qml \
+    $$PWD/CheckDelegateSpecifics.qml \
     $$PWD/ComboBoxSpecifics.qml \
     $$PWD/ControlSection.qml \
     $$PWD/ControlSpecifics.qml \
diff --git a/src/imports/controls/designer/qtlabscontrols.metainfo b/src/imports/controls/designer/qtlabscontrols.metainfo
index 0564077a..0006880a 100644
--- a/src/imports/controls/designer/qtlabscontrols.metainfo
+++ b/src/imports/controls/designer/qtlabscontrols.metainfo
@@ -43,6 +43,21 @@ MetaInfo {
     }
 
     Type {
+        name: "Qt.labs.controls.CheckDelegate"
+        icon: "images/checkbox-icon16.png"
+
+        ItemLibraryEntry {
+            name: "Check Delegate"
+            category: "Qt Labs - Controls"
+            libraryIcon: "images/checkbox-icon.png"
+            version: "1.0"
+            requiredImport: "Qt.labs.controls"
+
+            Property { name: "text"; type: "binding"; value: "qsTr('Check Delegate')" }
+        }
+    }
+
+    Type {
         name: "Qt.labs.controls.ComboBox"
         icon: "images/combobox-icon16.png"
 
diff --git a/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-background.png b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-background.png
new file mode 100644
index 00000000..79023922
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-background.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-contentItem.png b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-contentItem.png
new file mode 100644
index 00000000..29d900a8
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-contentItem.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-indicator.png b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-indicator.png
new file mode 100644
index 00000000..e1708413
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-indicator.png
diff --git a/src/imports/controls/doc/images/qtquickcontrols-checkdelegate.gif b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate.gif
new file mode 100644
index 00000000..d379f63c
--- /dev/null
+++ b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate.gif
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-background.qml b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-background.qml
new file mode 100644
index 00000000..fe60d47c
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-background.qml
@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+CheckDelegate {
+    text: "CheckDelegate"
+    checked: true
+    background: Rectangle {
+        color: 'transparent'
+        border.color: 'red'
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-contentItem.qml b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-contentItem.qml
new file mode 100644
index 00000000..d1c83028
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-contentItem.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+CheckDelegate {
+    text: "CheckDelegate"
+    checked: true
+    Rectangle {
+        anchors.fill: contentItem
+        color: "transparent"
+        border.color: "red"
+    }
+}
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-indicator.qml b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-indicator.qml
new file mode 100644
index 00000000..e3ba48b8
--- /dev/null
+++ b/src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-indicator.qml
@@ -0,0 +1,39 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt.labs.controls 1.0
+
+CheckDelegate {
+    text: "CheckDelegate"
+    checked: true
+    Rectangle {
+        anchors.fill: indicator
+        color: "transparent"
+        border.color: "red"
+    }
+}
diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
index 855c3c6d..197e2529 100644
--- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
+++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc
@@ -96,6 +96,30 @@
             \snippet CheckBox.qml indicator
 
 
+    \section1 Customizing CheckDelegate
+
+        CheckDelegate consists of three visual items: \l {Control::background}{background},
+        \l {Control::contentItem}{contentItem} and \l {AbstractButton::indicator}{indicator}.
+
+        \section3 Background
+
+            \image qtquickcontrols-checkdelegate-background.png
+
+            \snippet CheckDelegate.qml background
+
+        \section3 Content item
+
+            \image qtquickcontrols-checkdelegate-contentItem.png
+
+            \snippet CheckDelegate.qml contentItem
+
+        \section3 Indicator
+
+            \image qtquickcontrols-checkdelegate-indicator.png
+
+            \snippet CheckDelegate.qml indicator
+
+
     \section1 Customizing ComboBox
 
         ComboBox consists of \l {Control::background}{background},
diff --git a/src/imports/controls/material/CheckBox.qml b/src/imports/controls/material/CheckBox.qml
index 37a06200..310d6b28 100644
--- a/src/imports/controls/material/CheckBox.qml
+++ b/src/imports/controls/material/CheckBox.qml
@@ -56,89 +56,10 @@ T.CheckBox {
     bottomPadding: 14
 
     //! [indicator]
-    indicator: Rectangle {
-        id: indicatorItem
+    indicator: CheckIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-        implicitWidth: 20
-        implicitHeight: 20
-        color: "transparent"
-        border.color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
-        border.width: control.checked ? width / 2 : 2
-        radius: 2
-
-        Behavior on border.width {
-            NumberAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Behavior on border.color {
-            ColorAnimation {
-                duration: 100
-                easing.type: Easing.OutCubic
-            }
-        }
-
-        Ripple {
-            width: parent.width
-            height: width
-            control: control
-            colored: control.checked
-            opacity: control.pressed || control.activeKeyFocus ? 1 : 0
-        }
-
-        // TODO: This needs to be transparent
-        Image {
-            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
-
-            scale: control.checkState === Qt.Checked ? 1 : 0
-            Behavior on scale { NumberAnimation { duration: 100 } }
-        }
-
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: 12
-            height: 3
-            visible: control.checkState === Qt.PartiallyChecked
-        }
-
-        states: [
-            State {
-                name: "checked"
-                when: control.checkState === Qt.Checked
-            },
-            State {
-                name: "partiallychecked"
-                when: control.checkState === Qt.PartiallyChecked
-            }
-        ]
-
-        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
-                }
-            }
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/material/CheckDelegate.qml b/src/imports/controls/material/CheckDelegate.qml
new file mode 100644
index 00000000..2af147b0
--- /dev/null
+++ b/src/imports/controls/material/CheckDelegate.qml
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.material 1.0
+import Qt.labs.controls.material.impl 1.0
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    padding: 16
+    spacing: 16
+
+    //! [indicator]
+    indicator: CheckIndicator {
+        x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+    //! [indicator]
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        text: control.text
+        font: control.font
+        color: control.enabled ? control.Material.primaryTextColor : control.Material.hintTextColor
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        visible: control.pressed || control.highlighted
+        color: control.pressed ? control.Material.flatButtonPressColor : control.Material.listHighlightColor
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/material/CheckIndicator.qml b/src/imports/controls/material/CheckIndicator.qml
new file mode 100644
index 00000000..5c26e26f
--- /dev/null
+++ b/src/imports/controls/material/CheckIndicator.qml
@@ -0,0 +1,112 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.controls.material 1.0
+
+Rectangle {
+    id: indicatorItem
+    implicitWidth: 20
+    implicitHeight: 20
+    color: "transparent"
+    border.color: control.checked ? control.Material.accentColor : control.Material.secondaryTextColor
+    border.width: control.checked ? width / 2 : 2
+    radius: 2
+
+    visible: control.checkable
+
+    property alias control: ripple.control
+
+    Behavior on border.width {
+        NumberAnimation {
+            duration: 100
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Behavior on border.color {
+        ColorAnimation {
+            duration: 100
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Ripple {
+        id: ripple
+        width: parent.width
+        height: width
+        control: control
+        colored: control.checked
+        opacity: control.pressed ? 1 : 0
+    }
+
+    // TODO: This needs to be transparent
+    Image {
+        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
+
+        scale: control.checked ? 1 : 0
+        Behavior on scale { NumberAnimation { duration: 100 } }
+    }
+
+    states: State {
+        name: "checked"
+        when: control.checked
+    }
+
+    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
+            }
+        }
+    }
+}
diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri
index 02e6d683..6b2c3d6c 100644
--- a/src/imports/controls/material/material.pri
+++ b/src/imports/controls/material/material.pri
@@ -15,6 +15,8 @@ QML_FILES += \
     $$PWD/BusyIndicator.qml \
     $$PWD/Button.qml \
     $$PWD/CheckBox.qml \
+    $$PWD/CheckDelegate.qml \
+    $$PWD/CheckIndicator.qml \
     $$PWD/ComboBox.qml \
     $$PWD/Dial.qml \
     $$PWD/Drawer.qml \
diff --git a/src/imports/controls/material/qtquickmaterialstyleplugin.cpp b/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
index 821a9a65..f56b6885 100644
--- a/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
+++ b/src/imports/controls/material/qtquickmaterialstyleplugin.cpp
@@ -90,6 +90,7 @@ void QtQuickMaterialStylePlugin::initializeEngine(QQmlEngine *engine, const char
     qmlRegisterType<QQuickMaterialProgressStrip>(import, 1, 0, "ProgressStrip");
     qmlRegisterType<QQuickMaterialRingAnimator>(import, 1, 0, "RingAnimator");
     qmlRegisterType<QQuickMaterialStripAnimator>(import, 1, 0, "StripAnimator");
+    qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/CheckIndicator.qml")), import, 1, 0, "CheckIndicator");
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/Ripple.qml")), import, 1, 0, "Ripple");
     qmlRegisterType(QUrl(pluginBasePath + QStringLiteral("/SliderHandle.qml")), import, 1, 0, "SliderHandle");
 }
diff --git a/src/imports/controls/qtquickcontrolsplugin.cpp b/src/imports/controls/qtquickcontrolsplugin.cpp
index 076ba57b..7f0e20e0 100644
--- a/src/imports/controls/qtquickcontrolsplugin.cpp
+++ b/src/imports/controls/qtquickcontrolsplugin.cpp
@@ -97,6 +97,7 @@ void QtQuickControlsPlugin::registerTypes(const char *uri)
     qmlRegisterType(selector.select(QStringLiteral("BusyIndicator.qml")), uri, 1, 0, "BusyIndicator");
     qmlRegisterType(selector.select(QStringLiteral("Button.qml")), uri, 1, 0, "Button");
     qmlRegisterType(selector.select(QStringLiteral("CheckBox.qml")), uri, 1, 0, "CheckBox");
+    qmlRegisterType(selector.select(QStringLiteral("CheckDelegate.qml")), uri, 1, 0, "CheckDelegate");
     qmlRegisterType(selector.select(QStringLiteral("ComboBox.qml")), uri, 1, 0, "ComboBox");
     qmlRegisterType(selector.select(QStringLiteral("Dial.qml")), uri, 1, 0, "Dial");
     qmlRegisterType(selector.select(QStringLiteral("Drawer.qml")), uri, 1, 0, "Drawer");
@@ -141,6 +142,9 @@ void QtQuickControlsPlugin::initializeEngine(QQmlEngine *engine, const char *uri
     qmlRegisterType<QQuickBusyIndicatorAnimator>(import, 1, 0, "BusyRingAnimator");
     qmlRegisterType<QQuickProgressStrip>(import, 1, 0, "ProgressStrip");
     qmlRegisterType<QQuickProgressAnimator>(import, 1, 0, "ProgressStripAnimator");
+
+    const QString pluginBasePath = QQuickPluginUtils::pluginBasePath(*this);
+    qmlRegisterType(pluginBasePath + QStringLiteral("/CheckIndicator.qml"), import, 1, 0, "CheckIndicator");
 }
 
 QT_END_NAMESPACE
diff --git a/src/imports/controls/universal/CheckBox.qml b/src/imports/controls/universal/CheckBox.qml
index 2dff0488..651f0838 100644
--- a/src/imports/controls/universal/CheckBox.qml
+++ b/src/imports/controls/universal/CheckBox.qml
@@ -37,6 +37,7 @@
 import QtQuick 2.6
 import Qt.labs.templates 1.0 as T
 import Qt.labs.controls.universal 1.0
+import Qt.labs.controls.universal.impl 1.0
 
 T.CheckBox {
     id: control
@@ -54,39 +55,10 @@ T.CheckBox {
     property bool useSystemFocusVisuals: true
 
     //! [indicator]
-    indicator: Rectangle {
-        id: normalRectangle
-        implicitWidth: 20
-        implicitHeight: 20
+    indicator: CheckIndicator {
         x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
         y: control.topPadding + (control.availableHeight - height) / 2
-
-        color: !control.enabled ? "transparent" :
-                control.pressed && control.checkState !== Qt.PartiallyChecked ? control.Universal.baseMediumColor :
-                control.checkState === Qt.Checked ? control.Universal.accent : "transparent"
-        border.color: !control.enabled ? control.Universal.baseLowColor :
-                       control.pressed ? control.Universal.baseMediumColor :
-                       control.checked ? control.Universal.accent : control.Universal.baseMediumHighColor
-        border.width: 2 // CheckBoxBorderThemeThickness
-
-        Image {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-
-            visible: control.checkState === Qt.Checked
-            source: "image://universal/checkmark/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.chromeWhiteColor)
-        }
-
-        Rectangle {
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            width: parent.width / 2
-            height: parent.height / 2
-
-            visible: control.checkState === Qt.PartiallyChecked
-            color: !control.enabled ? control.Universal.baseLowColor :
-                    control.pressed ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor
-        }
+        control: control
     }
     //! [indicator]
 
diff --git a/src/imports/controls/universal/CheckDelegate.qml b/src/imports/controls/universal/CheckDelegate.qml
new file mode 100644
index 00000000..173f54eb
--- /dev/null
+++ b/src/imports/controls/universal/CheckDelegate.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+T.CheckDelegate {
+    id: control
+
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             Math.max(contentItem.implicitHeight,
+                                      indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
+    baselineOffset: contentItem.y + contentItem.baselineOffset
+
+    spacing: 12
+
+    topPadding: 11
+    leftPadding: 12
+    rightPadding: 12
+    bottomPadding: 13
+
+    //! [indicator]
+    indicator: CheckIndicator {
+        x: text ? (control.mirrored ? control.leftPadding : control.width - width - control.rightPadding) : control.leftPadding + (control.availableWidth - width) / 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        control: control
+    }
+    //! [indicator]
+
+    //! [contentItem]
+    contentItem: Text {
+        leftPadding: !control.mirrored ? 0 : control.indicator.width + control.spacing
+        rightPadding: control.mirrored ? 0 : control.indicator.width + control.spacing
+
+        text: control.text
+        font: control.font
+        elide: Text.ElideRight
+        visible: control.text
+        horizontalAlignment: Text.AlignLeft
+        verticalAlignment: Text.AlignVCenter
+
+        color: !control.enabled ? control.Universal.baseLowColor : control.Universal.baseHighColor
+    }
+    //! [contentItem]
+
+    //! [background]
+    background: Rectangle {
+        visible: control.pressed || control.highlighted || control.activeFocus
+        color: control.pressed ? control.Universal.listMediumColor : control.Universal.altMediumLowColor
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            visible: control.activeFocus || control.highlighted
+            color: control.Universal.accent
+            opacity: control.Universal.theme === Universal.Light ? 0.4 : 0.6
+        }
+
+    }
+    //! [background]
+}
diff --git a/src/imports/controls/universal/CheckIndicator.qml b/src/imports/controls/universal/CheckIndicator.qml
new file mode 100644
index 00000000..a9a22cb5
--- /dev/null
+++ b/src/imports/controls/universal/CheckIndicator.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2015 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Labs Controls module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.6
+import Qt.labs.templates 1.0 as T
+import Qt.labs.controls.universal 1.0
+
+Rectangle {
+    implicitWidth: 20
+    implicitHeight: 20
+
+    color: !control.enabled ? "transparent" :
+            control.pressed && control.checkState !== Qt.PartiallyChecked ? control.Universal.baseMediumColor :
+            control.checkState === Qt.Checked ? control.Universal.accent : "transparent"
+    border.color: !control.enabled ? control.Universal.baseLowColor :
+                   control.pressed ? control.Universal.baseMediumColor :
+                   control.checked ? control.Universal.accent : control.Universal.baseMediumHighColor
+    border.width: 2 // CheckBoxBorderThemeThickness
+
+    property Item control
+
+    Image {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+
+        visible: control.checkState === Qt.Checked
+        source: "image://universal/checkmark/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.chromeWhiteColor)
+    }
+
+    Rectangle {
+        x: (parent.width - width) / 2
+        y: (parent.height - height) / 2
+        width: parent.width / 2
+        height: parent.height / 2
+
+        visible: control.checkState === Qt.PartiallyChecked
+        color: !control.enabled ? control.Universal.baseLowColor :
+                control.pressed ? control.Universal.baseMediumColor : control.Universal.baseMediumHighColor
+    }
+}
diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri
index 6aa1baaa..ba07f994 100644
--- a/src/imports/controls/universal/universal.pri
+++ b/src/imports/controls/universal/universal.pri
@@ -3,6 +3,8 @@ QML_FILES += \
     $$PWD/BusyIndicator.qml \
     $$PWD/Button.qml \
     $$PWD/CheckBox.qml \
+    $$PWD/CheckDelegate.qml \
+    $$PWD/CheckIndicator.qml \
     $$PWD/ComboBox.qml \
     $$PWD/Dial.qml \
     $$PWD/Drawer.qml \
diff --git a/src/imports/templates/qtquicktemplatesplugin.cpp b/src/imports/templates/qtquicktemplatesplugin.cpp
index 28e77482..26d71f0e 100644
--- a/src/imports/templates/qtquicktemplatesplugin.cpp
+++ b/src/imports/templates/qtquicktemplatesplugin.cpp
@@ -41,6 +41,7 @@
 #include <QtQuickTemplates/private/qquickbusyindicator_p.h>
 #include <QtQuickTemplates/private/qquickbutton_p.h>
 #include <QtQuickTemplates/private/qquickcheckbox_p.h>
+#include <QtQuickTemplates/private/qquickcheckdelegate_p.h>
 #include <QtQuickTemplates/private/qquickcombobox_p.h>
 #include <QtQuickTemplates/private/qquickcontrol_p.h>
 #include <QtQuickTemplates/private/qquickcontainer_p.h>
@@ -109,6 +110,7 @@ void QtQuickTemplatesPlugin::registerTypes(const char *uri)
     qmlRegisterType<QQuickBusyIndicator>(uri, 1, 0, "BusyIndicator");
     qmlRegisterType<QQuickButton>(uri, 1, 0, "Button");
     qmlRegisterType<QQuickCheckBox>(uri, 1, 0, "CheckBox");
+    qmlRegisterType<QQuickCheckDelegate>(uri, 1, 0, "CheckDelegate");
     qmlRegisterType<QQuickComboBox>(uri, 1, 0, "ComboBox");
     qmlRegisterType<QQuickContainer>(uri, 1, 0, "Container");
     qmlRegisterType<QQuickControl>(uri, 1, 0, "Control");