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 <mitch.curtis@theqtcompany.com>

10 files changed, 176 insertions, 1 deletions

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
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-background.png
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
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-contentItem.png
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
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-down.png
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
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox-up.png
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
--- /dev/null
+++ b/src/imports/controls/doc/images/qtlabscontrols-spinbox.png
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");