RangeSlider: add horizontal and vertical properties for convenience

[ChangeLog][Controls][RangeSlider] Added horizontal and vertical
properties to make it more convenient to create orientation-dependent
bindings in styles.

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

7 files changed, 94 insertions, 63 deletions

diff --git a/src/imports/controls/RangeSlider.qml b/src/imports/controls/RangeSlider.qml
index 7490b706..f71aa462 100644
--- a/src/imports/controls/RangeSlider.qml
+++ b/src/imports/controls/RangeSlider.qml
@@ -52,8 +52,8 @@ T.RangeSlider {
     padding: 6
 
     first.handle: Rectangle {
-        x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
         implicitWidth: 28
         implicitHeight: 28
         radius: width / 2
@@ -64,13 +64,11 @@ T.RangeSlider {
         color: control.enabled ? (first.pressed
             ? (activeFocus ? Default.focusPressedColor : Default.indicatorPressedColor)
             : (activeFocus ? Default.focusLightColor : Default.backgroundColor)) : Default.indicatorDisabledColor
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
 
     second.handle: Rectangle {
-        x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
         implicitWidth: 28
         implicitHeight: 28
         radius: width / 2
@@ -81,21 +79,17 @@ T.RangeSlider {
         color: control.enabled ? (second.pressed
             ? (activeFocus ? Default.focusPressedColor : Default.indicatorPressedColor)
             : (activeFocus ? Default.focusLightColor : Default.backgroundColor)) : Default.indicatorDisabledColor
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
     }
 
     background: Rectangle {
-        x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
-        implicitWidth: horizontal ? 200 : 6
-        implicitHeight: horizontal ? 6 : 200
-        width: horizontal ? control.availableWidth : implicitWidth
-        height: horizontal ? implicitHeight : control.availableHeight
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 6
+        implicitHeight: control.horizontal ? 6 : 200
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
         radius: 3
         color: Default.buttonColor
-        scale: horizontal && control.mirrored ? -1 : 1
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
+        scale: control.horizontal && control.mirrored ? -1 : 1
     }
 }
diff --git a/src/imports/controls/material/RangeSlider.qml b/src/imports/controls/material/RangeSlider.qml
index a9b04ef7..6e631843 100644
--- a/src/imports/controls/material/RangeSlider.qml
+++ b/src/imports/controls/material/RangeSlider.qml
@@ -52,8 +52,8 @@ T.RangeSlider {
     padding: 6
 
     first.handle: SliderHandle {
-        x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
         value: first.value
         handleHasFocus: activeFocus
         handlePressed: first.pressed
@@ -61,8 +61,8 @@ T.RangeSlider {
     }
 
     second.handle: SliderHandle {
-        x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
         value: second.value
         handleHasFocus: activeFocus
         handlePressed: second.pressed
@@ -70,22 +70,20 @@ T.RangeSlider {
     }
 
     background: Rectangle {
-        x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
-        implicitWidth: horizontal ? 200 : 48
-        implicitHeight: horizontal ? 48 : 200
-        width: horizontal ? control.availableWidth : 1
-        height: horizontal ? 1 : control.availableHeight
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        implicitWidth: control.horizontal ? 200 : 48
+        implicitHeight: control.horizontal ? 48 : 200
+        width: control.horizontal ? control.availableWidth : 1
+        height: control.horizontal ? 1 : control.availableHeight
         color: control.Material.foreground
-        scale: horizontal && control.mirrored ? -1 : 1
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
+        scale:control.horizontal && control.mirrored ? -1 : 1
 
         Rectangle {
-            x: parent.horizontal ? control.first.position * parent.width : -1
-            y: parent.horizontal ? -1 : control.second.visualPosition * parent.height + 3
-            width: parent.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 3 : 3
-            height: parent.horizontal ? 3 : control.second.position * parent.height - control.first.position * parent.height - 3
+            x: control.horizontal ? control.first.position * parent.width : -1
+            y: control.horizontal ? -1 : control.second.visualPosition * parent.height + 3
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 3 : 3
+            height: control.horizontal ? 3 : control.second.position * parent.height - control.first.position * parent.height - 3
 
             color: control.Material.accentColor
         }
diff --git a/src/imports/controls/universal/RangeSlider.qml b/src/imports/controls/universal/RangeSlider.qml
index 9ae77d54..6aab392f 100644
--- a/src/imports/controls/universal/RangeSlider.qml
+++ b/src/imports/controls/universal/RangeSlider.qml
@@ -51,13 +51,11 @@ T.RangeSlider {
     padding: 6
 
     first.handle: Rectangle {
-        implicitWidth: horizontal ? 8 : 24
-        implicitHeight: horizontal ? 24 : 8
+        implicitWidth: control.horizontal ? 8 : 24
+        implicitHeight: control.horizontal ? 24 : 8
 
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
-
-        x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
 
         radius: 4
         color: control.first.pressed ? control.Universal.chromeHighColor :
@@ -66,13 +64,11 @@ T.RangeSlider {
     }
 
     second.handle: Rectangle {
-        implicitWidth: horizontal ? 8 : 24
-        implicitHeight: horizontal ? 24 : 8
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
+        implicitWidth: control.horizontal ? 8 : 24
+        implicitHeight: control.horizontal ? 24 : 8
 
-        x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
 
         radius: 4
         color: control.second.pressed ? control.Universal.chromeHighColor :
@@ -81,33 +77,31 @@ T.RangeSlider {
     }
 
     background: Item {
-        implicitWidth: horizontal ? 200 : 18
-        implicitHeight: horizontal ? 18 : 200
-
-        readonly property bool horizontal: control.orientation === Qt.Horizontal
+        implicitWidth: control.horizontal ? 200 : 18
+        implicitHeight: control.horizontal ? 18 : 200
 
-        x: control.leftPadding + (horizontal ? 0 : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : 0)
-        width: horizontal ? control.availableWidth : implicitWidth
-        height: horizontal ? implicitHeight : control.availableHeight
+        x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
+        width: control.horizontal ? control.availableWidth : implicitWidth
+        height: control.horizontal ? implicitHeight : control.availableHeight
 
-        scale: horizontal && control.mirrored ? -1 : 1
+        scale: control.horizontal && control.mirrored ? -1 : 1
 
         Rectangle {
-            x: parent.horizontal ? 0 : (parent.width - width) / 2
-            y: parent.horizontal ? (parent.height - height) / 2 : 0
-            width: parent.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight
-            height: !parent.horizontal ? parent.height : 2 // SliderBackgroundThemeHeight
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : 0
+            width: control.horizontal ? parent.width : 2 // SliderBackgroundThemeHeight
+            height: control.vertical ? parent.height : 2 // SliderBackgroundThemeHeight
 
             color: control.hovered && !control.pressed ? control.Universal.baseMediumColor :
                    control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor
         }
 
         Rectangle {
-            x: parent.horizontal ? control.first.position * parent.width : (parent.width - width) / 2
-            y: parent.horizontal ? (parent.height - height) / 2 : control.second.visualPosition * parent.height
-            width: parent.horizontal ? control.second.position * parent.width - control.first.position * parent.width : 2 // SliderBackgroundThemeHeight
-            height: !parent.horizontal ? control.second.position * parent.height - control.first.position * parent.height : 2 // SliderBackgroundThemeHeight
+            x: control.horizontal ? control.first.position * parent.width : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.second.visualPosition * parent.height
+            width: control.horizontal ? control.second.position * parent.width - control.first.position * parent.width : 2 // SliderBackgroundThemeHeight
+            height: control.vertical ? control.second.position * parent.height - control.first.position * parent.height : 2 // SliderBackgroundThemeHeight
 
             color: control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
         }
diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp
index 36db0188..5a111298 100644
--- a/src/imports/templates/qtquicktemplates2plugin.cpp
+++ b/src/imports/templates/qtquicktemplates2plugin.cpp
@@ -256,6 +256,7 @@ void QtQuickTemplates2Plugin::registerTypes(const char *uri)
     // QtQuick.Templates 2.3 (new types and revisions in Qt 5.10)
     qmlRegisterType<QQuickIcon>();
     qmlRegisterType<QQuickAbstractButton, 3>(uri, 2, 3, "AbstractButton");
+    qmlRegisterType<QQuickRangeSlider, 3>(uri, 2, 3, "RangeSlider");
     qmlRegisterType<QQuickSlider, 3>(uri, 2, 3, "Slider");
 }
 
diff --git a/src/quicktemplates2/qquickrangeslider.cpp b/src/quicktemplates2/qquickrangeslider.cpp
index 1c74f9ee..175ca06e 100644
--- a/src/quicktemplates2/qquickrangeslider.cpp
+++ b/src/quicktemplates2/qquickrangeslider.cpp
@@ -757,6 +757,8 @@ void QQuickRangeSlider::setSnapMode(SnapMode mode)
     Possible values:
     \value Qt.Horizontal Horizontal (default)
     \value Qt.Vertical Vertical
+
+    \sa horizontal, vertical
 */
 Qt::Orientation QQuickRangeSlider::orientation() const
 {
@@ -775,6 +777,36 @@ void QQuickRangeSlider::setOrientation(Qt::Orientation orientation)
 }
 
 /*!
+    \since QtQuick.Controls 2.3
+    \qmlproperty bool QtQuick.Controls::RangeSlider::horizontal
+    \readonly
+
+    This property holds whether the slider is horizontal.
+
+    \sa orientation
+*/
+bool QQuickRangeSlider::isHorizontal() const
+{
+    Q_D(const QQuickRangeSlider);
+    return d->orientation == Qt::Horizontal;
+}
+
+/*!
+    \since QtQuick.Controls 2.3
+    \qmlproperty bool QtQuick.Controls::RangeSlider::vertical
+    \readonly
+
+    This property holds whether the slider is vertical.
+
+    \sa orientation
+*/
+bool QQuickRangeSlider::isVertical() const
+{
+    Q_D(const QQuickRangeSlider);
+    return d->orientation == Qt::Vertical;
+}
+
+/*!
     \since QtQuick.Controls 2.2
     \qmlproperty bool QtQuick.Controls::RangeSlider::live
 
diff --git a/src/quicktemplates2/qquickrangeslider_p.h b/src/quicktemplates2/qquickrangeslider_p.h
index d07cb6f0..affb734a 100644
--- a/src/quicktemplates2/qquickrangeslider_p.h
+++ b/src/quicktemplates2/qquickrangeslider_p.h
@@ -65,6 +65,8 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickRangeSlider : public QQuickControl
     Q_PROPERTY(qreal stepSize READ stepSize WRITE setStepSize NOTIFY stepSizeChanged FINAL)
     Q_PROPERTY(SnapMode snapMode READ snapMode WRITE setSnapMode NOTIFY snapModeChanged FINAL)
     Q_PROPERTY(Qt::Orientation orientation READ orientation WRITE setOrientation NOTIFY orientationChanged FINAL)
+    Q_PROPERTY(bool horizontal READ isHorizontal NOTIFY orientationChanged FINAL REVISION 3)
+    Q_PROPERTY(bool vertical READ isVertical NOTIFY orientationChanged FINAL REVISION 3)
     Q_PROPERTY(bool live READ live WRITE setLive NOTIFY liveChanged FINAL REVISION 2)
 
 public:
@@ -95,6 +97,9 @@ public:
     Qt::Orientation orientation() const;
     void setOrientation(Qt::Orientation orientation);
 
+    bool isHorizontal() const;
+    bool isVertical() const;
+
     bool live() const;
     void setLive(bool live);
 
diff --git a/tests/auto/controls/data/tst_rangeslider.qml b/tests/auto/controls/data/tst_rangeslider.qml
index cde81981..867bb70a 100644
--- a/tests/auto/controls/data/tst_rangeslider.qml
+++ b/tests/auto/controls/data/tst_rangeslider.qml
@@ -96,6 +96,8 @@ TestCase {
         compare(control.stepSize, 0)
         compare(control.snapMode, RangeSlider.NoSnap)
         compare(control.orientation, Qt.Horizontal)
+        compare(control.horizontal, true)
+        compare(control.vertical, false)
     }
 
     function test_values() {
@@ -262,9 +264,14 @@ TestCase {
         verify(control)
 
         compare(control.orientation, Qt.Horizontal)
+        compare(control.horizontal, true)
+        compare(control.vertical, false)
         verify(control.width > control.height)
+
         control.orientation = Qt.Vertical
         compare(control.orientation, Qt.Vertical)
+        compare(control.horizontal, false)
+        compare(control.vertical, true)
         verify(control.width < control.height)
     }