From e3bf4f771458590dd003fc710803c1c1babea68e Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Sat, 10 Oct 2015 16:07:28 +0200 Subject: Re-introduce SpinBox It came up in discussions at the QtWS that even if we have Tumbler, people still want and expect to have the good old SpinBox control. SpinBox has it pros, such as that it might work better inside a vertical Flickable, and that in multi-field forms it might visually align better with other controls like TextFields. An early mockup of SpinBox was removed in 1c0edf0. A quote from the commit message: SpinBox is a desktop centric control. It won't be provided in Qt Quick Controls 2.0, but maybe later when desktop support is re-considered. Qt Quick Controls 2.0 will focus on embedded and mobile. SpinBox is still available in 1.x. While it is true that SpinBox might not be optimal for touch or mobile, the real reason for the removal was that validating decimal number input is very complicated. Even though locales have well- defined thousand separators and decimal points, users have very different expectations on how strict or relaxed the input validation should be. This change re-introduces a touch-optimized integer-based SpinBox. What makes it more touch friendly than the earlier version is that it has now auto-repeating buttons. Limiting it to integers avoids the decimal number input validation problem. We can introduce a separate DoubleSpinBox later if necessary - just like in QtWidgets. Change-Id: I2819060eb5d1ae6a8c00b0f12be703456085079d Reviewed-by: Mitch Curtis --- src/imports/controls/SpinBox.qml | 142 +++++++++++++++++++++ src/imports/controls/controls.pri | 1 + .../images/qtlabscontrols-spinbox-background.png | Bin 0 -> 1053 bytes .../images/qtlabscontrols-spinbox-contentItem.png | Bin 0 -> 1144 bytes .../doc/images/qtlabscontrols-spinbox-down.png | Bin 0 -> 1078 bytes .../doc/images/qtlabscontrols-spinbox-up.png | Bin 0 -> 1130 bytes .../controls/doc/images/qtlabscontrols-spinbox.png | Bin 0 -> 1146 bytes .../controls/doc/src/qtlabscontrols-customize.qdoc | 31 +++++ .../controls/doc/src/qtlabscontrols-index.qdoc | 2 +- src/imports/controls/qtlabscontrolsplugin.cpp | 1 + 10 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 src/imports/controls/SpinBox.qml create mode 100644 src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png create mode 100644 src/imports/controls/doc/images/qtlabscontrols-spinbox.png (limited to 'src/imports/controls') diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml new file mode 100644 index 00000000..3607a701 --- /dev/null +++ b/src/imports/controls/SpinBox.qml @@ -0,0 +1,142 @@ +/**************************************************************************** +** +** 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.controls 1.0 +import Qt.labs.templates 1.0 as T + +T.SpinBox { + id: control + + implicitWidth: Math.max(background ? background.implicitWidth : 0, + contentItem.implicitWidth + 2 * padding + + (up.indicator ? up.indicator.implicitWidth : 0) + + (down.indicator ? down.indicator.implicitWidth : 0)) + implicitHeight: Math.max(contentItem.implicitHeight + topPadding + bottomPadding, + background ? background.implicitHeight : 0, + up.indicator ? up.indicator.implicitHeight : 0, + down.indicator ? down.indicator.implicitHeight : 0) + + padding: 6 + leftPadding: 6 + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)) + rightPadding: 6 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)) + + //! [contentItem] + contentItem: TextInput { + text: Number(control.value).toLocaleString(control.locale, 'f', 0) + + font: control.font + color: control.Theme.textColor + selectionColor: control.Theme.selectionColor + selectedTextColor: control.Theme.selectedTextColor + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + + validator: IntValidator { + bottom: Math.min(control.from, control.to) + top: Math.max(control.from, control.to) + } + inputMethodHints: Qt.ImhFormattedNumbersOnly + } + //! [contentItem] + + //! [up.indicator] + up.indicator: Item { + implicitWidth: 26 + height: parent.height + x: control.mirrored ? 0 : parent.width - width + + clip: true + Rectangle { + x: -radius + width: parent.width + radius + height: parent.height + radius: 3 + color: Qt.tint(Qt.tint(control.Theme.accentColor, + control.activeFocus ? control.Theme.focusColor : "transparent"), + control.up.pressed ? control.Theme.pressColor : "transparent") + } + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.width / 3 + height: 2 + color: control.Theme.selectedTextColor + } + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: 2 + height: parent.height / 3 + color: control.Theme.selectedTextColor + } + } + //! [up.indicator] + + //! [down.indicator] + down.indicator: Item { + implicitWidth: 26 + height: parent.height + x: control.mirrored ? parent.width - width : 0 + + clip: true + Rectangle { + width: parent.width + radius + height: parent.height + radius: 3 + color: Qt.tint(Qt.tint(control.Theme.accentColor, + control.activeFocus ? control.Theme.focusColor : "transparent"), + control.down.pressed ? control.Theme.pressColor : "transparent") + } + Rectangle { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + width: parent.width / 3 + height: 2 + color: control.Theme.selectedTextColor + } + } + //! [down.indicator] + + //! [background] + background: Rectangle { + implicitWidth: 80 + radius: 3 + border.width: control.activeFocus ? 2 : 1 + border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor + } + //! [background] +} diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 41651a24..53615c08 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -15,6 +15,7 @@ QML_FILES = \ ScrollBar.qml \ ScrollIndicator.qml \ Slider.qml \ + SpinBox.qml \ StackView.qml \ Switch.qml \ SwipeView.qml \ diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png new file mode 100644 index 00000000..0224e6f1 Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png new file mode 100644 index 00000000..0e39d92f Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png new file mode 100644 index 00000000..a6bbecdf Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png new file mode 100644 index 00000000..3c6c870b Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png differ diff --git a/src/imports/controls/doc/images/qtlabscontrols-spinbox.png b/src/imports/controls/doc/images/qtlabscontrols-spinbox.png new file mode 100644 index 00000000..39fa813a Binary files /dev/null and b/src/imports/controls/doc/images/qtlabscontrols-spinbox.png differ diff --git a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc index 474caba9..c4124191 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-customize.qdoc @@ -305,6 +305,37 @@ \snippet Slider.qml handle + \section1 Customizing SpinBox + + SpinBox consists of four visual items: \l {Control::background}{background}, + \l {Control::contentItem}{contentItem}, \l {SpinBox::up.indicator}{up indicator}, + and \l {SpinBox::down.indicator}{down indicator}. + + \section3 Background + + \image qtlabscontrols-spinbox-background.png + + \snippet SpinBox.qml background + + \section3 Content item + + \image qtlabscontrols-spinbox-contentItem.png + + \snippet SpinBox.qml contentItem + + \section3 Down indicator + + \image qtlabscontrols-spinbox-down.png + + \snippet Spinbox.qml down.indicator + + \section3 Up indicator + + \image qtlabscontrols-spinbox-up.png + + \snippet Spinbox.qml up.indicator + + \section1 Customizing StackView StackView can have a visual \l {Control::background}{background} diff --git a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc index 557bc73a..c105ede9 100644 --- a/src/imports/controls/doc/src/qtlabscontrols-index.qdoc +++ b/src/imports/controls/doc/src/qtlabscontrols-index.qdoc @@ -250,7 +250,7 @@ \li \l [QtLabsControls] {Slider} \row \li \l [QtQuickControls] {SpinBox} - \li No equivalent; see \l [QtLabsControls] {Tumbler} instead. + \li \l [QtLabsControls] {SpinBox} \row \li \l [QtQuickControls] {Stack}, \l [QtQuickControls] {StackView}, diff --git a/src/imports/controls/qtlabscontrolsplugin.cpp b/src/imports/controls/qtlabscontrolsplugin.cpp index 8d042381..249375d2 100644 --- a/src/imports/controls/qtlabscontrolsplugin.cpp +++ b/src/imports/controls/qtlabscontrolsplugin.cpp @@ -85,6 +85,7 @@ void QtLabsControlsPlugin::registerTypes(const char *uri) qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/ScrollBar.qml"))), uri, 1, 0, "ScrollBar"); qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/ScrollIndicator.qml"))), uri, 1, 0, "ScrollIndicator"); qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/Slider.qml"))), uri, 1, 0, "Slider"); + qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/SpinBox.qml"))), uri, 1, 0, "SpinBox"); qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/StackView.qml"))), uri, 1, 0, "StackView"); qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/SwipeView.qml"))), uri, 1, 0, "SwipeView"); qmlRegisterType(selector.select(QUrl(base + QStringLiteral("/Switch.qml"))), uri, 1, 0, "Switch"); -- cgit v1.2.3