Add ScrollBar::interactive

[ChangeLog][Controls][ScrollBar] Added an interactive-property.
A non-interactive ScrollBar is visually and behaviorally similar
to ScrollIndicator. This property is useful for switching between
typical mouse- and touch-orientated UIs with interactive and non-
interactive scroll bars, respectively.

Change-Id: Ie98bfa0b5bba94a9751baf3c65f17b850b58fd1f
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

6 files changed, 108 insertions, 18 deletions

diff --git a/src/imports/controls/ScrollBar.qml b/src/imports/controls/ScrollBar.qml
index 07ded9b5..366be48e 100644
--- a/src/imports/controls/ScrollBar.qml
+++ b/src/imports/controls/ScrollBar.qml
@@ -52,8 +52,8 @@ T.ScrollBar {
     contentItem: Rectangle {
         id: handle
 
-        implicitWidth: 6
-        implicitHeight: 6
+        implicitWidth: control.interactive ? 6 : 2
+        implicitHeight: control.interactive ? 6 : 2
 
         radius: width / 2
         color: control.pressed ? Default.scrollBarPressedColor : Default.scrollBarColor
diff --git a/src/imports/controls/material/ScrollBar.qml b/src/imports/controls/material/ScrollBar.qml
index 140cb94d..5993ab58 100644
--- a/src/imports/controls/material/ScrollBar.qml
+++ b/src/imports/controls/material/ScrollBar.qml
@@ -46,25 +46,26 @@ T.ScrollBar {
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
                              contentItem.implicitHeight + topPadding + bottomPadding)
 
-    padding: 1
+    padding: control.interactive ? 1 : 2
 
     contentItem: Rectangle {
         id: handle
 
-        implicitWidth: 13
-        implicitHeight: 13
+        implicitWidth: control.interactive ? 13 : 4
+        implicitHeight: control.interactive ? 13 : 4
 
         color: control.pressed ? control.Material.scrollBarPressedColor :
-               control.hovered ? control.Material.scrollBarHoveredColor : control.Material.scrollBarColor
+               control.interactive && control.hovered ? control.Material.scrollBarHoveredColor : control.Material.scrollBarColor
         visible: control.size < 1.0
         opacity: 0.0
     }
 
     background: Rectangle {
-        implicitWidth: 16
-        implicitHeight: 16
+        implicitWidth: control.interactive ? 16 : 4
+        implicitHeight: control.interactive ? 16 : 4
         color: "#0e000000"
         opacity: 0.0
+        visible: control.interactive
     }
 
     states: State {
diff --git a/src/imports/controls/universal/ScrollBar.qml b/src/imports/controls/universal/ScrollBar.qml
index 434d8fb2..d627eab6 100644
--- a/src/imports/controls/universal/ScrollBar.qml
+++ b/src/imports/controls/universal/ScrollBar.qml
@@ -49,18 +49,18 @@ T.ScrollBar {
     // TODO: arrows
 
     contentItem: Rectangle {
-        implicitWidth: 12
-        implicitHeight: 12
+        implicitWidth: control.interactive ? 12 : 6
+        implicitHeight: control.interactive ? 12: 6
 
         color: control.pressed ? control.Universal.baseMediumColor :
-               control.hovered ? control.Universal.baseMediumLowColor : control.Universal.chromeHighColor
+               control.interactive && control.hovered ? control.Universal.baseMediumLowColor : control.Universal.chromeHighColor
         visible: control.size < 1.0
         opacity: 0.0
     }
 
     background: Rectangle {
-        implicitWidth: 12
-        implicitHeight: 12
+        implicitWidth: control.interactive ? 12 : 6
+        implicitHeight: control.interactive ? 12: 6
 
         color: control.Universal.chromeLowColor
         visible: control.size < 1.0
diff --git a/src/quicktemplates2/qquickscrollbar.cpp b/src/quicktemplates2/qquickscrollbar.cpp
index 66df3dc9..f7a5c246 100644
--- a/src/quicktemplates2/qquickscrollbar.cpp
+++ b/src/quicktemplates2/qquickscrollbar.cpp
@@ -164,6 +164,7 @@ public:
           active(false),
           pressed(false),
           moving(false),
+          interactive(true),
           orientation(Qt::Vertical),
           snapMode(QQuickScrollBar::NoSnap)
     {
@@ -191,6 +192,7 @@ public:
     bool active;
     bool pressed;
     bool moving;
+    bool interactive;
     Qt::Orientation orientation;
     QQuickScrollBar::SnapMode snapMode;
 };
@@ -216,7 +218,7 @@ qreal QQuickScrollBarPrivate::positionAt(const QPointF &point) const
 void QQuickScrollBarPrivate::updateActive()
 {
     Q_Q(QQuickScrollBar);
-    q->setActive(moving || pressed || hovered);
+    q->setActive(moving || (interactive && (pressed || hovered)));
 }
 
 void QQuickScrollBarPrivate::resizeContent()
@@ -489,6 +491,35 @@ void QQuickScrollBar::setSnapMode(SnapMode mode)
 }
 
 /*!
+    \since QtQuick.Controls 2.2
+    \qmlproperty bool QtQuick.Controls::ScrollBar::interactive
+
+    This property holds whether the scroll bar is interactive. The default value is \c true.
+
+    A non-interactive scroll bar is visually and behaviorally similar to \l ScrollIndicator.
+    This property is useful for switching between typical mouse- and touch-orientated UIs
+    with interactive and non-interactive scroll bars, respectively.
+*/
+bool QQuickScrollBar::isInteractive() const
+{
+    Q_D(const QQuickScrollBar);
+    return d->interactive;
+}
+
+void QQuickScrollBar::setInteractive(bool interactive)
+{
+    Q_D(QQuickScrollBar);
+    if (d->interactive == interactive)
+        return;
+
+    d->interactive = interactive;
+    setAcceptedMouseButtons(interactive ? Qt::LeftButton : Qt::NoButton);
+    if (!interactive)
+        ungrabMouse();
+    emit interactiveChanged();
+}
+
+/*!
     \qmlmethod void QtQuick.Controls::ScrollBar::increase()
 
     Increases the position by \l stepSize or \c 0.1 if stepSize is \c 0.0.
diff --git a/src/quicktemplates2/qquickscrollbar_p.h b/src/quicktemplates2/qquickscrollbar_p.h
index a34c337c..9709f183 100644
--- a/src/quicktemplates2/qquickscrollbar_p.h
+++ b/src/quicktemplates2/qquickscrollbar_p.h
@@ -66,6 +66,7 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickScrollBar : public QQuickControl
     Q_PROPERTY(bool pressed READ isPressed WRITE setPressed NOTIFY pressedChanged FINAL)
     Q_PROPERTY(Qt::Orientation orientation READ orientation WRITE setOrientation NOTIFY orientationChanged FINAL)
     Q_PROPERTY(SnapMode snapMode READ snapMode WRITE setSnapMode NOTIFY snapModeChanged FINAL REVISION 2)
+    Q_PROPERTY(bool interactive READ isInteractive WRITE setInteractive NOTIFY interactiveChanged FINAL REVISION 2)
 
 public:
     explicit QQuickScrollBar(QQuickItem *parent = nullptr);
@@ -97,6 +98,9 @@ public:
     SnapMode snapMode() const;
     void setSnapMode(SnapMode mode);
 
+    bool isInteractive() const;
+    void setInteractive(bool interactive);
+
 public Q_SLOTS:
     void increase();
     void decrease();
@@ -111,6 +115,7 @@ Q_SIGNALS:
     void pressedChanged();
     void orientationChanged();
     Q_REVISION(2) void snapModeChanged();
+    Q_REVISION(2) void interactiveChanged();
 
 protected:
     void mousePressEvent(QMouseEvent *event) override;
diff --git a/tests/auto/controls/data/tst_scrollbar.qml b/tests/auto/controls/data/tst_scrollbar.qml
index 840f187f..11d84114 100644
--- a/tests/auto/controls/data/tst_scrollbar.qml
+++ b/tests/auto/controls/data/tst_scrollbar.qml
@@ -320,20 +320,21 @@ TestCase {
 
     function test_hover_data() {
         return [
-            { tag: "enabled", hoverEnabled: true },
-            { tag: "disabled", hoverEnabled: false },
+            { tag: "enabled", hoverEnabled: true, interactive: true },
+            { tag: "disabled", hoverEnabled: false, interactive: true },
+            { tag: "non-interactive", hoverEnabled: true, interactive: false }
         ]
     }
 
     function test_hover(data) {
-        var control = createTemporaryObject(scrollBar, testCase, {hoverEnabled: data.hoverEnabled})
+        var control = createTemporaryObject(scrollBar, testCase, {hoverEnabled: data.hoverEnabled, interactive: data.interactive})
         verify(control)
 
         compare(control.hovered, false)
 
         mouseMove(control)
         compare(control.hovered, data.hoverEnabled)
-        compare(control.active, data.hoverEnabled)
+        compare(control.active, data.hoverEnabled && data.interactive)
 
         mouseMove(control, -1, -1)
         compare(control.hovered, false)
@@ -410,4 +411,56 @@ TestCase {
 
         mouseRelease(control, control.width - 1, 0)
     }
+
+    function test_interactive_data() {
+        return [
+            { tag: "true", interactive: true },
+            { tag: "false", interactive: false }
+        ]
+    }
+
+    function test_interactive(data) {
+        var control = createTemporaryObject(scrollBar, testCase, {interactive: data.interactive})
+        verify(control)
+
+        compare(control.interactive, data.interactive)
+
+        // press-move-release
+        mousePress(control, 0, 0, Qt.LeftButton)
+        compare(control.pressed, data.interactive)
+
+        mouseMove(control, control.width / 2, control.height / 2)
+        compare(control.position, data.interactive ? 0.5 : 0.0)
+
+        mouseRelease(control, control.width / 2, control.height / 2, Qt.LeftButton)
+        compare(control.pressed, false)
+
+        // change to non-interactive while pressed
+        mousePress(control, control.width / 2, control.height / 2, Qt.LeftButton)
+        compare(control.pressed, data.interactive)
+
+        mouseMove(control, control.width, control.height)
+        compare(control.position, data.interactive ? 1.0 : 0.0)
+
+        control.interactive = false
+        compare(control.interactive, false)
+        compare(control.pressed, false)
+
+        mouseMove(control, control.width / 2, control.height / 2)
+        compare(control.position, data.interactive ? 1.0 : 0.0)
+
+        mouseRelease(control, control.width / 2, control.height / 2, Qt.LeftButton)
+        compare(control.pressed, false)
+
+        // change back to interactive & try press-move-release again
+        control.interactive = true
+        mousePress(control, control.width / 2, control.height / 2, Qt.LeftButton)
+        compare(control.pressed, true)
+
+        mouseMove(control, 0, 0)
+        compare(control.position, 0.0)
+
+        mouseRelease(control, 0, 0, Qt.LeftButton)
+        compare(control.pressed, false)
+    }
 }