From f15468cf9e5c440518a7af9a265234bff8e6c627 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Tue, 20 Dec 2016 21:52:25 +0100 Subject: Add DelayButton [ChangeLog][Controls][DelayButton] Added DelayButton. Change-Id: I94820dfb41ba9b90f0a29cda01ac476b54cf3de8 Reviewed-by: Mitch Curtis --- src/imports/controls/DelayButton.qml | 126 +++++++++++++++++++++ src/imports/controls/controls.pri | 1 + .../images/qtquickcontrols2-delaybutton-custom.png | Bin 0 -> 7340 bytes .../doc/images/qtquickcontrols2-delaybutton.gif | Bin 0 -> 12595 bytes .../qtquickcontrols2-delaybutton-custom.qml | 82 ++++++++++++++ .../controls/doc/src/qtquickcontrols2-buttons.qdoc | 15 +++ .../doc/src/qtquickcontrols2-customize.qdoc | 10 ++ .../doc/src/qtquickcontrols2-differences.qdoc | 2 +- src/imports/controls/material/DelayButton.qml | 126 +++++++++++++++++++++ src/imports/controls/material/material.pri | 1 + src/imports/controls/qtquickcontrols2plugin.cpp | 1 + src/imports/controls/universal/DelayButton.qml | 96 ++++++++++++++++ src/imports/controls/universal/universal.pri | 1 + 13 files changed, 460 insertions(+), 1 deletion(-) create mode 100644 src/imports/controls/DelayButton.qml create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-delaybutton-custom.png create mode 100644 src/imports/controls/doc/images/qtquickcontrols2-delaybutton.gif create mode 100644 src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-delaybutton-custom.qml create mode 100644 src/imports/controls/material/DelayButton.qml create mode 100644 src/imports/controls/universal/DelayButton.qml (limited to 'src/imports/controls') diff --git a/src/imports/controls/DelayButton.qml b/src/imports/controls/DelayButton.qml new file mode 100644 index 00000000..4a569fcf --- /dev/null +++ b/src/imports/controls/DelayButton.qml @@ -0,0 +1,126 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.9 +import QtQuick.Controls 2.2 +import QtQuick.Controls.impl 2.2 +import QtQuick.Templates 2.2 as T + +T.DelayButton { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + padding: 6 + leftPadding: padding + 2 + rightPadding: padding + 2 + + transition: Transition { + NumberAnimation { + duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress) + } + } + + contentItem: Item { + implicitWidth: label.implicitWidth + implicitHeight: label.implicitHeight + + Item { + x: -control.leftPadding + (control.progress * control.width) + width: (1.0 - control.progress) * control.width + height: parent.height + + clip: control.progress > 0 + visible: control.progress < 1 + + Text { + id: label + x: -parent.x + width: control.availableWidth + height: parent.height + + text: control.text + font: control.font + opacity: enabled ? 1 : 0.3 + color: control.visualFocus ? Default.focusColor : (control.down ? Default.textDarkColor : Default.textColor) + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + } + + Item { + x: -control.leftPadding + width: control.progress * control.width + height: parent.height + + clip: control.progress > 0 + visible: control.progress > 0 + + Text { + x: control.leftPadding + width: control.availableWidth + height: parent.height + + text: control.text + font: control.font + opacity: enabled ? 1 : 0.3 + color: Default.textLightColor + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + } + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 40 + color: control.visualFocus ? (control.down ? Default.focusPressedColor : Default.focusLightColor) : (control.down ? Default.buttonPressedColor : Default.buttonColor) + border.color: Default.focusColor + border.width: control.visualFocus ? 2 : 0 + + Rectangle { + width: control.progress * parent.width + height: parent.height + color: control.visualFocus ? (control.down ? Default.buttonCheckedFocusColor : Default.focusColor) : (control.down ? Default.buttonCheckedPressedColor : Default.textColor) + } + } +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 8a262694..04e31103 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -21,6 +21,7 @@ QML_CONTROLS = \ ComboBox.qml \ Container.qml \ Control.qml \ + DelayButton.qml \ Dial.qml \ Dialog.qml \ DialogButtonBox.qml \ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-delaybutton-custom.png b/src/imports/controls/doc/images/qtquickcontrols2-delaybutton-custom.png new file mode 100644 index 00000000..be7f2586 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-delaybutton-custom.png differ diff --git a/src/imports/controls/doc/images/qtquickcontrols2-delaybutton.gif b/src/imports/controls/doc/images/qtquickcontrols2-delaybutton.gif new file mode 100644 index 00000000..16a198f9 Binary files /dev/null and b/src/imports/controls/doc/images/qtquickcontrols2-delaybutton.gif differ diff --git a/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-delaybutton-custom.qml b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-delaybutton-custom.qml new file mode 100644 index 00000000..2453e2d6 --- /dev/null +++ b/src/imports/controls/doc/snippets/screenshots/qtquickcontrols2-delaybutton-custom.qml @@ -0,0 +1,82 @@ +/**************************************************************************** +** +** Copyright (C) 2017 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$ +** +****************************************************************************/ + +//! [file] +import QtQuick 2.6 +import QtQuick.Controls 2.2 + +DelayButton { + id: control + checked: true + text: qsTr("Delay\nButton") + + contentItem: Text { + text: control.text + font: control.font + opacity: enabled ? 1.0 : 0.3 + color: "white" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + implicitWidth: 100 + implicitHeight: 100 + opacity: enabled ? 1 : 0.3 + color: control.down ? "#17a81a" : "#21be2b" + radius: size / 2 + + readonly property real size: Math.min(control.width, control.height) + width: size + height: size + anchors.centerIn: parent + + Canvas { + id: canvas + anchors.fill: parent + + Connections { + target: control + onProgressChanged: canvas.requestPaint() + } + + onPaint: { + var ctx = getContext("2d") + ctx.clearRect(0, 0, width, height) + ctx.strokeStyle = "white" + ctx.lineWidth = parent.size / 20 + ctx.beginPath() + var startAngle = Math.PI / 5 * 3 + var endAngle = startAngle + control.progress * Math.PI / 5 * 9 + ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle) + ctx.stroke() + } + } + } +} +//! [file] diff --git a/src/imports/controls/doc/src/qtquickcontrols2-buttons.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-buttons.qdoc index 434cf839..6080d7b1 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-buttons.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-buttons.qdoc @@ -99,6 +99,21 @@ \b {See also} \l CheckBox + \section1 DelayButton Control + + \l DelayButton is a button that incorporates a delay before triggering an action. + This delay prevents accidental presses. + + \image qtquickcontrols2-delaybutton.gif + + Recommendations: + \list + \li Use in touch user interfaces. + \li Use for actions that must be triggered with care. + \endlist + + \b {See also} \l Button and \l AbstractButton + \section1 RadioButton Control \image qtquickcontrols2-radiobutton.gif diff --git a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc index 06201404..82914610 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-customize.qdoc @@ -419,6 +419,16 @@ \snippet qtquickcontrols2-combobox-custom.qml file + \section2 Customizing DelayButton + + DelayButton consists of two visual items: \l {Control::background}{background} + and \l {Control::contentItem}{content item}. + + \image qtquickcontrols2-delaybutton-custom.png + + \snippet qtquickcontrols2-delaybutton-custom.qml file + + \section2 Customizing Dial Dial consists of two visual items: \l {Control::background}{background} diff --git a/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc b/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc index 01429b94..4ea5e4e6 100644 --- a/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc +++ b/src/imports/controls/doc/src/qtquickcontrols2-differences.qdoc @@ -471,7 +471,7 @@ \li \row \li \l [QML QtQuickExtras] {DelayButton} - \li \mdash + \li \l [QML QtQuickControls2] {DelayButton} \li \li \row diff --git a/src/imports/controls/material/DelayButton.qml b/src/imports/controls/material/DelayButton.qml new file mode 100644 index 00000000..8bc48784 --- /dev/null +++ b/src/imports/controls/material/DelayButton.qml @@ -0,0 +1,126 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.9 +import QtQuick.Templates 2.2 as T +import QtQuick.Controls.Material 2.2 +import QtQuick.Controls.Material.impl 2.2 + +T.DelayButton { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + // external vertical padding is 6 (to increase touch area) + padding: 12 + leftPadding: padding - 4 + rightPadding: padding - 4 + + Material.elevation: control.down ? 8 : 2 + + transition: Transition { + NumberAnimation { + duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress) + } + } + + contentItem: Text { + text: control.text + font: control.font + color: !control.enabled ? control.Material.hintTextColor : control.Material.foreground + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state + background: Rectangle { + implicitWidth: 64 + implicitHeight: 48 + + // external vertical padding is 6 (to increase touch area) + y: 6 + width: parent.width + height: parent.height - 12 + radius: 2 + color: !control.enabled ? control.Material.buttonDisabledColor : control.Material.buttonColor + + PaddedRectangle { + y: parent.height - 4 + width: parent.width + height: 4 + radius: 2 + topPadding: -2 + clip: true + color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor + + PaddedRectangle { + width: parent.width * control.progress + height: 4 + radius: 2 + topPadding: -2 + rightPadding: Math.max(-2, width - parent.width) + clip: true + color: control.Material.accentColor + } + } + + Behavior on color { + ColorAnimation { + duration: 400 + } + } + + layer.enabled: control.enabled && control.Material.buttonColor.a > 0 + layer.effect: ElevationEffect { + elevation: control.Material.elevation + } + + Ripple { + clipRadius: 2 + width: parent.width + height: parent.height + pressed: control.pressed + anchor: control + active: control.down || control.visualFocus || control.hovered + color: control.Material.rippleColor + } + } +} diff --git a/src/imports/controls/material/material.pri b/src/imports/controls/material/material.pri index 5f70ca32..64d91442 100644 --- a/src/imports/controls/material/material.pri +++ b/src/imports/controls/material/material.pri @@ -22,6 +22,7 @@ QML_FILES += \ $$PWD/CheckIndicator.qml \ $$PWD/ComboBox.qml \ $$PWD/CursorDelegate.qml \ + $$PWD/DelayButton.qml \ $$PWD/Dial.qml \ $$PWD/Dialog.qml \ $$PWD/DialogButtonBox.qml \ diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp index 5af9b910..70f6879b 100644 --- a/src/imports/controls/qtquickcontrols2plugin.cpp +++ b/src/imports/controls/qtquickcontrols2plugin.cpp @@ -141,6 +141,7 @@ void QtQuickControls2Plugin::registerTypes(const char *uri) qmlRegisterType(selector.select(QStringLiteral("ToolSeparator.qml")), uri, 2, 1, "ToolSeparator"); // QtQuick.Controls 2.2 (new types in Qt 5.9) + qmlRegisterType(selector.select(QStringLiteral("DelayButton.qml")), uri, 2, 2, "DelayButton"); } static QObject *styleSingleton(QQmlEngine *engine, QJSEngine *scriptEngine) diff --git a/src/imports/controls/universal/DelayButton.qml b/src/imports/controls/universal/DelayButton.qml new file mode 100644 index 00000000..9d43be44 --- /dev/null +++ b/src/imports/controls/universal/DelayButton.qml @@ -0,0 +1,96 @@ +/**************************************************************************** +** +** Copyright (C) 2017 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Quick Controls 2 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.9 +import QtQuick.Templates 2.2 as T +import QtQuick.Controls.Universal 2.2 + +T.DelayButton { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + leftPadding + rightPadding) + implicitHeight: Math.max(background ? background.implicitHeight : 0, + contentItem.implicitHeight + topPadding + bottomPadding) + baselineOffset: contentItem.y + contentItem.baselineOffset + + padding: 8 + topPadding: padding - 4 + bottomPadding: padding - 4 + + property bool useSystemFocusVisuals: true + + transition: Transition { + NumberAnimation { + duration: control.delay * (control.pressed ? 1.0 - control.progress : 0.3 * control.progress) + } + } + + contentItem: Text { + text: control.text + font: control.font + elide: Text.ElideRight + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + opacity: enabled ? 1.0 : 0.2 + color: control.Universal.foreground + } + + background: Rectangle { + implicitWidth: 32 + implicitHeight: 32 + + color: control.down ? control.Universal.baseMediumLowColor : + control.enabled && control.checked ? control.Universal.accent : control.Universal.baseLowColor + + Rectangle { + visible: !control.checked + width: parent.width * control.progress + height: parent.height + color: control.Universal.accent + } + + Rectangle { + width: parent.width + height: parent.height + color: "transparent" + visible: control.hovered + border.width: 2 // ButtonBorderThemeThickness + border.color: control.Universal.baseMediumLowColor + } + } +} diff --git a/src/imports/controls/universal/universal.pri b/src/imports/controls/universal/universal.pri index 833bf2b6..c80a2dfc 100644 --- a/src/imports/controls/universal/universal.pri +++ b/src/imports/controls/universal/universal.pri @@ -6,6 +6,7 @@ QML_FILES += \ $$PWD/CheckDelegate.qml \ $$PWD/CheckIndicator.qml \ $$PWD/ComboBox.qml \ + $$PWD/DelayButton.qml \ $$PWD/Dial.qml \ $$PWD/Dialog.qml \ $$PWD/DialogButtonBox.qml \ -- cgit v1.2.3