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 --- .../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 +- 6 files changed, 108 insertions(+), 1 deletion(-) 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 (limited to 'src/imports/controls/doc') 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 -- cgit v1.2.3