SpinBox: disable up and down indicators when appropriate

Change-Id: I6fbfde582723632c9b955a6e7ee380179b7b6a32
Task-number: QTBUG-53519
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

9 files changed, 184 insertions, 29 deletions

diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml
index 93db1c8e..89853116 100644
--- a/src/imports/controls/SpinBox.qml
+++ b/src/imports/controls/SpinBox.qml
@@ -53,7 +53,6 @@ T.SpinBox {
     padding: 6
     leftPadding: padding + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0))
     rightPadding: padding + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0))
-    opacity: control.enabled ? 1 : 0.3
 
     //! [validator]
     validator: IntValidator {
@@ -67,6 +66,7 @@ T.SpinBox {
     contentItem: TextInput {
         z: 2
         text: control.textFromValue(control.value, control.locale)
+        opacity: control.enabled ? 1 : 0.3
 
         font: control.font
         color: "#353637"
@@ -105,14 +105,14 @@ T.SpinBox {
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: 2
             height: parent.width / 3
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
     }
     //! [up.indicator]
@@ -130,13 +130,14 @@ T.SpinBox {
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.enabled ? "#353637" : "#bdbebf"
+            color: enabled ? "#353637" : "#bdbebf"
         }
     }
     //! [down.indicator]
 
     //! [background]
     background: Rectangle {
+        opacity: control.enabled ? 1 : 0.3
         implicitWidth: 140
         border.color: "#e0e0e0"
     }
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml
index 99549b8c..6433fd80 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-spinbox-custom.qml
@@ -56,7 +56,7 @@ SpinBox {
         implicitWidth: 40
         implicitHeight: 40
         color: up.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#21be2b" : "#bdbebf"
+        border.color: enabled ? "#21be2b" : "#bdbebf"
 
         Text {
             text: "+"
@@ -75,7 +75,7 @@ SpinBox {
         implicitWidth: 40
         implicitHeight: 40
         color: down.pressed ? "#e4e4e4" : "#f6f6f6"
-        border.color: control.enabled ? "#21be2b" : "#bdbebf"
+        border.color: enabled ? "#21be2b" : "#bdbebf"
 
         Text {
             text: "-"
diff --git a/src/imports/controls/material/SpinBox.qml b/src/imports/controls/material/SpinBox.qml
index e007013b..567fbfe5 100644
--- a/src/imports/controls/material/SpinBox.qml
+++ b/src/imports/controls/material/SpinBox.qml
@@ -126,14 +126,14 @@ T.SpinBox {
             y: (parent.height - height) / 2
             width: Math.min(parent.width / 3, parent.width / 3)
             height: 2
-            color: control.Material.primaryTextColor
+            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
         }
         Rectangle {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             width: 2
             height: Math.min(parent.width / 3, parent.width / 3)
-            color: control.Material.primaryTextColor
+            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
         }
     }
     //! [up.indicator]
@@ -156,7 +156,7 @@ T.SpinBox {
             y: (parent.height - height) / 2
             width: parent.width / 3
             height: 2
-            color: control.Material.primaryTextColor
+            color: enabled ? control.Material.primaryTextColor : control.Material.spinBoxDisabledIconColor
         }
     }
     //! [down.indicator]
diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp
index ce72e04b..f8e282e2 100644
--- a/src/imports/controls/material/qquickmaterialstyle.cpp
+++ b/src/imports/controls/material/qquickmaterialstyle.cpp
@@ -415,6 +415,8 @@ static const QRgb switchDisabledTrackColorLight = 0x1E000000;
 static const QRgb switchDisabledTrackColorDark = 0x19FFFFFF;
 static const QRgb checkBoxUncheckedRippleColorLight = 0x10000000;
 static const QRgb checkBoxUncheckedRippleColorDark = 0x20FFFFFF;
+static const QRgb spinBoxDisabledIconColorLight = 0xFFCCCCCC;
+static const QRgb spinBoxDisabledIconColorDark = 0xFF666666;
 
 static QColor alphaBlend(const QColor &bg, const QColor &fg)
 {
@@ -1061,6 +1063,11 @@ QColor QQuickMaterialStyle::toolTextColor() const
     return primaryTextColor();
 }
 
+QColor QQuickMaterialStyle::spinBoxDisabledIconColor() const
+{
+    return QColor::fromRgba(m_theme == Light ? spinBoxDisabledIconColorLight : spinBoxDisabledIconColorDark);
+}
+
 QColor QQuickMaterialStyle::color(QQuickMaterialStyle::Color color, QQuickMaterialStyle::Shade shade) const
 {
     int count = sizeof(colors) / sizeof(colors[0]);
diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h
index e7434d83..7572d38c 100644
--- a/src/imports/controls/material/qquickmaterialstyle_p.h
+++ b/src/imports/controls/material/qquickmaterialstyle_p.h
@@ -104,6 +104,7 @@ class QQuickMaterialStyle : public QQuickStyleAttached
     Q_PROPERTY(QColor listHighlightColor READ listHighlightColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor tooltipColor READ tooltipColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor toolTextColor READ toolTextColor NOTIFY paletteChanged FINAL)
+    Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY paletteChanged FINAL)
 
 public:
     enum Theme {
@@ -231,6 +232,7 @@ public:
     QColor listHighlightColor() const;
     QColor tooltipColor() const;
     QColor toolTextColor() const;
+    QColor spinBoxDisabledIconColor() const;
 
     Q_INVOKABLE QColor color(Color color, Shade shade = Shade500) const;
     Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const;
diff --git a/src/imports/controls/universal/SpinBox.qml b/src/imports/controls/universal/SpinBox.qml
index 49fa6954..4654aa01 100644
--- a/src/imports/controls/universal/SpinBox.qml
+++ b/src/imports/controls/universal/SpinBox.qml
@@ -106,8 +106,8 @@ T.SpinBox {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             source: "image://universal/" + (control.mirrored ? "left" : "right") + "arrow/"
-                    + (!control.enabled ? control.Universal.chromeDisabledLowColor :
-                                          control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor)
+                    + (!enabled ? control.Universal.chromeDisabledLowColor :
+                                  control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor)
             sourceSize.width: width
             sourceSize.height: height
         }
@@ -134,8 +134,8 @@ T.SpinBox {
             x: (parent.width - width) / 2
             y: (parent.height - height) / 2
             source: "image://universal/" + (control.mirrored ? "right" : "left") + "arrow/"
-                    + (!control.enabled ? control.Universal.chromeDisabledLowColor :
-                                          control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor)
+                    + (!enabled ? control.Universal.chromeDisabledLowColor :
+                                  control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor)
             sourceSize.width: width
             sourceSize.height: height
         }
diff --git a/src/quicktemplates2/qquickspinbox.cpp b/src/quicktemplates2/qquickspinbox.cpp
index 2b58acf2..59f82c22 100644
--- a/src/quicktemplates2/qquickspinbox.cpp
+++ b/src/quicktemplates2/qquickspinbox.cpp
@@ -104,6 +104,11 @@ public:
 
     int effectiveStepSize() const;
 
+    bool upEnabled() const;
+    void updateUpEnabled();
+    bool downEnabled() const;
+    void updateDownEnabled();
+
     void startRepeatDelay();
     void startPressRepeat();
     void stopPressRepeat();
@@ -154,6 +159,36 @@ int QQuickSpinBoxPrivate::effectiveStepSize() const
     return from > to ? -1 * stepSize : stepSize;
 }
 
+bool QQuickSpinBoxPrivate::upEnabled() const
+{
+    const QQuickItem *upIndicator = up->indicator();
+    return upIndicator && upIndicator->isEnabled();
+}
+
+void QQuickSpinBoxPrivate::updateUpEnabled()
+{
+    QQuickItem *upIndicator = up->indicator();
+    if (!upIndicator)
+        return;
+
+    upIndicator->setEnabled(from < to ? value < to : value > to);
+}
+
+bool QQuickSpinBoxPrivate::downEnabled() const
+{
+    const QQuickItem *downIndicator = down->indicator();
+    return downIndicator && downIndicator->isEnabled();
+}
+
+void QQuickSpinBoxPrivate::updateDownEnabled()
+{
+    QQuickItem *downIndicator = down->indicator();
+    if (!downIndicator)
+        return;
+
+    downIndicator->setEnabled(from < to ? value > from : value < from);
+}
+
 void QQuickSpinBoxPrivate::startRepeatDelay()
 {
     Q_Q(QQuickSpinBox);
@@ -186,8 +221,8 @@ bool QQuickSpinBoxPrivate::handleMousePressEvent(QQuickItem *child, QMouseEvent
     Q_Q(QQuickSpinBox);
     QQuickItem *ui = up->indicator();
     QQuickItem *di = down->indicator();
-    up->setPressed(ui && ui->contains(ui->mapFromItem(child, event->pos())));
-    down->setPressed(di && di->contains(di->mapFromItem(child, event->pos())));
+    up->setPressed(ui && ui->isEnabled() && ui->contains(ui->mapFromItem(child, event->pos())));
+    down->setPressed(di && di->isEnabled() && di->contains(di->mapFromItem(child, event->pos())));
 
     bool pressed = up->isPressed() || down->isPressed();
     q->setAccessibleProperty("pressed", pressed);
@@ -201,8 +236,8 @@ bool QQuickSpinBoxPrivate::handleMouseMoveEvent(QQuickItem *child, QMouseEvent *
     Q_Q(QQuickSpinBox);
     QQuickItem *ui = up->indicator();
     QQuickItem *di = down->indicator();
-    up->setPressed(ui && ui->contains(ui->mapFromItem(child, event->pos())));
-    down->setPressed(di && di->contains(di->mapFromItem(child, event->pos())));
+    up->setPressed(ui && ui->isEnabled() && ui->contains(ui->mapFromItem(child, event->pos())));
+    down->setPressed(di && di->isEnabled() && di->contains(di->mapFromItem(child, event->pos())));
 
     bool pressed = up->isPressed() || down->isPressed();
     q->setAccessibleProperty("pressed", pressed);
@@ -325,6 +360,10 @@ void QQuickSpinBox::setValue(int value)
         return;
 
     d->value = value;
+
+    d->updateUpEnabled();
+    d->updateDownEnabled();
+
     emit valueChanged();
 }
 
@@ -545,15 +584,19 @@ void QQuickSpinBox::keyPressEvent(QKeyEvent *event)
 
     switch (event->key()) {
     case Qt::Key_Up:
-        increase();
-        d->up->setPressed(true);
-        event->accept();
+        if (d->upEnabled()) {
+            increase();
+            d->up->setPressed(true);
+            event->accept();
+        }
         break;
 
     case Qt::Key_Down:
-        decrease();
-        d->down->setPressed(true);
-        event->accept();
+        if (d->downEnabled()) {
+            decrease();
+            d->down->setPressed(true);
+            event->accept();
+        }
         break;
 
     default:
@@ -648,6 +691,14 @@ void QQuickSpinBox::wheelEvent(QWheelEvent *event)
     }
 }
 
+void QQuickSpinBox::componentComplete()
+{
+    Q_D(QQuickSpinBox);
+    QQuickControl::componentComplete();
+    d->updateUpEnabled();
+    d->updateDownEnabled();
+}
+
 void QQuickSpinBox::itemChange(ItemChange change, const ItemChangeData &value)
 {
     Q_D(QQuickSpinBox);
diff --git a/src/quicktemplates2/qquickspinbox_p.h b/src/quicktemplates2/qquickspinbox_p.h
index 5dd7b57d..3898a28b 100644
--- a/src/quicktemplates2/qquickspinbox_p.h
+++ b/src/quicktemplates2/qquickspinbox_p.h
@@ -127,6 +127,7 @@ protected:
     void timerEvent(QTimerEvent *event) override;
     void wheelEvent(QWheelEvent *event) override;
 
+    void componentComplete() override;
     void itemChange(ItemChange change, const ItemChangeData &value) override;
     void contentItemChange(QQuickItem *newItem, QQuickItem *oldItem) override;
 
diff --git a/tests/auto/controls/data/tst_spinbox.qml b/tests/auto/controls/data/tst_spinbox.qml
index ea775b5b..d8422706 100644
--- a/tests/auto/controls/data/tst_spinbox.qml
+++ b/tests/auto/controls/data/tst_spinbox.qml
@@ -89,7 +89,9 @@ TestCase {
         compare(control.stepSize, 1)
         compare(control.editable, false)
         compare(control.up.pressed, false)
+        compare(control.up.indicator.enabled, true)
         compare(control.down.pressed, false)
+        compare(control.down.indicator.enabled, false)
 
         control.destroy()
     }
@@ -118,23 +120,40 @@ TestCase {
         compare(control.from, 0)
         compare(control.to, 100)
         compare(control.value, 50)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, true)
 
         control.value = 1000
         compare(control.value, 100)
+        compare(control.up.indicator.enabled, false)
+        compare(control.down.indicator.enabled, true)
 
         control.value = -1
         compare(control.value, 0)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, false)
 
         control.from = 25
         compare(control.from, 25)
         compare(control.value, 25)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, false)
 
         control.to = 75
         compare(control.to, 75)
         compare(control.value, 25)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, false)
 
         control.value = 50
         compare(control.value, 50)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, true)
+
+        control.to = 40;
+        compare(control.value, 40)
+        compare(control.up.indicator.enabled, false)
+        compare(control.down.indicator.enabled, true)
 
         control.destroy()
     }
@@ -146,15 +165,23 @@ TestCase {
         compare(control.from, 100)
         compare(control.to, -100)
         compare(control.value, 0)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, true)
 
         control.value = 200
         compare(control.value, 100)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, false)
 
         control.value = -200
         compare(control.value, -100)
+        compare(control.up.indicator.enabled, false)
+        compare(control.down.indicator.enabled, true)
 
         control.value = 0
         compare(control.value, 0)
+        compare(control.up.indicator.enabled, true)
+        compare(control.down.indicator.enabled, true)
 
         control.destroy()
     }
@@ -180,9 +207,28 @@ TestCase {
         compare(control.down.pressed, false)
         compare(control.value, 50)
 
+        // Disable the up button and try again.
+        control.value = control.to
+        compare(control.up.indicator.enabled, false)
+
+        mousePress(control.up.indicator)
+        compare(upPressedSpy.count, 2)
+        compare(control.up.pressed, false)
+        compare(downPressedSpy.count, 0)
+        compare(control.down.pressed, false)
+        compare(control.value, control.to)
+
+        mouseRelease(control.up.indicator)
+        compare(upPressedSpy.count, 2)
+        compare(control.up.pressed, false)
+        compare(downPressedSpy.count, 0)
+        compare(control.down.pressed, false)
+        compare(control.value, control.to)
+
         downPressedSpy.target = control.down
         verify(downPressedSpy.valid)
 
+        control.value = 50;
         mousePress(control.down.indicator)
         compare(downPressedSpy.count, 1)
         compare(control.down.pressed, true)
@@ -197,6 +243,24 @@ TestCase {
         compare(control.up.pressed, false)
         compare(control.value, 0)
 
+        // Disable the down button and try again.
+        control.value = control.from
+        compare(control.down.indicator.enabled, false)
+
+        mousePress(control.down.indicator)
+        compare(downPressedSpy.count, 2)
+        compare(control.down.pressed, false)
+        compare(upPressedSpy.count, 2)
+        compare(control.up.pressed, false)
+        compare(control.value, control.from)
+
+        mouseRelease(control.down.indicator)
+        compare(downPressedSpy.count, 2)
+        compare(control.down.pressed, false)
+        compare(upPressedSpy.count, 2)
+        compare(control.up.pressed, false)
+        compare(control.value, control.from)
+
         control.destroy()
     }
 
@@ -253,32 +317,42 @@ TestCase {
         compare(control.stepSize, 25)
 
         for (var d2 = 1; d2 <= 10; ++d2) {
+            var wasDownEnabled = control.value > control.from
             keyPress(Qt.Key_Down)
-            compare(control.down.pressed, true)
+            compare(control.down.pressed, wasDownEnabled)
             compare(control.up.pressed, false)
-            compare(downPressedSpy.count, ++downPressedCount)
+            if (wasDownEnabled)
+                ++downPressedCount
+            compare(downPressedSpy.count, downPressedCount)
 
             compare(control.value, Math.max(0, 50 - d2 * 25))
 
             keyRelease(Qt.Key_Down)
             compare(control.down.pressed, false)
             compare(control.up.pressed, false)
-            compare(downPressedSpy.count, ++downPressedCount)
+            if (wasDownEnabled)
+                ++downPressedCount
+            compare(downPressedSpy.count, downPressedCount)
         }
         compare(control.value, 0)
 
         for (var i2 = 1; i2 <= 10; ++i2) {
+            var wasUpEnabled = control.value < control.to
             keyPress(Qt.Key_Up)
-            compare(control.up.pressed, true)
+            compare(control.up.pressed, wasUpEnabled)
             compare(control.down.pressed, false)
-            compare(upPressedSpy.count, ++upPressedCount)
+            if (wasUpEnabled)
+                ++upPressedCount
+            compare(upPressedSpy.count, upPressedCount)
 
             compare(control.value, Math.min(99, i2 * 25))
 
             keyRelease(Qt.Key_Up)
             compare(control.down.pressed, false)
             compare(control.up.pressed, false)
-            compare(upPressedSpy.count, ++upPressedCount)
+            if (wasUpEnabled)
+                ++upPressedCount
+            compare(upPressedSpy.count, upPressedCount)
         }
         compare(control.value, 99)
 
@@ -385,4 +459,23 @@ TestCase {
 
         control.destroy()
     }
+
+    function test_initiallyDisabledIndicators_data() {
+        return [
+            { tag: "down disabled", from: 0, value: 0, to: 99, upEnabled: true, downEnabled: false },
+            { tag: "up disabled", from: 0, value: 99, to: 99, upEnabled: false, downEnabled: true },
+            { tag: "inverted, down disabled", from: 99, value: 99, to: 0, upEnabled: true, downEnabled: false },
+            { tag: "inverted, up disabled", from: 99, value: 0, to: 0, upEnabled: false, downEnabled: true }
+        ]
+    }
+
+    function test_initiallyDisabledIndicators(data) {
+        var control = spinBox.createObject(testCase, { from: data.from, value: data.value, to: data.to })
+        verify(control)
+
+        compare(control.up.indicator.enabled, data.upEnabled)
+        compare(control.down.indicator.enabled, data.downEnabled)
+
+        control.destroy()
+    }
 }