From 1acb34a40ea0fbc0c0730cdc81dcfd46bdeb4ef7 Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Tue, 29 Mar 2016 18:26:16 +0200 Subject: 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 --- src/imports/controls/CheckBox.qml | 26 +---- src/imports/controls/CheckDelegate.qml | 86 ++++++++++++++++ src/imports/controls/CheckIndicator.qml | 66 ++++++++++++ src/imports/controls/controls.pri | 2 + .../controls/designer/CheckDelegateSpecifics.qml | 56 +++++++++++ src/imports/controls/designer/designer.pri | 1 + .../controls/designer/qtlabscontrols.metainfo | 15 +++ .../qtquickcontrols-checkdelegate-background.png | Bin 0 -> 3203 bytes .../qtquickcontrols-checkdelegate-contentItem.png | Bin 0 -> 3091 bytes .../qtquickcontrols-checkdelegate-indicator.png | Bin 0 -> 3104 bytes .../doc/images/qtquickcontrols-checkdelegate.gif | Bin 0 -> 14330 bytes .../qtquickcontrols-checkdelegate-background.qml | 38 +++++++ .../qtquickcontrols-checkdelegate-contentItem.qml | 39 +++++++ .../qtquickcontrols-checkdelegate-indicator.qml | 39 +++++++ .../doc/src/qtquickcontrols2-customize.qdoc | 24 +++++ src/imports/controls/material/CheckBox.qml | 83 +-------------- src/imports/controls/material/CheckDelegate.qml | 84 ++++++++++++++++ src/imports/controls/material/CheckIndicator.qml | 112 +++++++++++++++++++++ src/imports/controls/material/material.pri | 2 + .../material/qtquickmaterialstyleplugin.cpp | 1 + src/imports/controls/qtquickcontrolsplugin.cpp | 4 + src/imports/controls/universal/CheckBox.qml | 34 +------ src/imports/controls/universal/CheckDelegate.qml | 96 ++++++++++++++++++ src/imports/controls/universal/CheckIndicator.qml | 73 ++++++++++++++ src/imports/controls/universal/universal.pri | 2 + 25 files changed, 748 insertions(+), 135 deletions(-) create mode 100644 src/imports/controls/CheckDelegate.qml create mode 100644 src/imports/controls/CheckIndicator.qml create mode 100644 src/imports/controls/designer/CheckDelegateSpecifics.qml create mode 100644 src/imports/controls/doc/images/qtquickcontrols-checkdelegate-background.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols-checkdelegate-contentItem.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols-checkdelegate-indicator.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols-checkdelegate.gif create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-background.qml create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-contentItem.qml create mode 100644 src/imports/controls/doc/snippets/qtquickcontrols-checkdelegate-indicator.qml create mode 100644 src/imports/controls/material/CheckDelegate.qml create mode 100644 src/imports/controls/material/CheckIndicator.qml create mode 100644 src/imports/controls/universal/CheckDelegate.qml create mode 100644 src/imports/controls/universal/CheckIndicator.qml (limited to 'src/imports/controls') 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 @@ -42,6 +42,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 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-background.png differ 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 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-contentItem.png differ 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 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate-indicator.png differ 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 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols-checkdelegate.gif differ 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(import, 1, 0, "ProgressStrip"); qmlRegisterType(import, 1, 0, "RingAnimator"); qmlRegisterType(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(import, 1, 0, "BusyRingAnimator"); qmlRegisterType(import, 1, 0, "ProgressStrip"); qmlRegisterType(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 \ -- cgit v1.2.3