Slider: add horizontal and vertical properties for convenience

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

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

7 files changed, 79 insertions, 52 deletions

diff --git a/src/imports/controls/Slider.qml b/src/imports/controls/Slider.qml
index 948c2590..5ee85607 100644
--- a/src/imports/controls/Slider.qml
+++ b/src/imports/controls/Slider.qml
@@ -50,8 +50,8 @@ T.Slider {
     padding: 6
 
     handle: Rectangle {
-        x: control.leftPadding + (horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
         implicitWidth: 28
         implicitHeight: 28
         radius: width / 2
@@ -62,21 +62,17 @@ T.Slider {
         border.color: control.enabled ? (control.visualFocus
             ? Default.focusColor
             : (control.pressed ? Default.indicatorFramePressedColor : Default.indicatorFrameColor)) : Default.indicatorFrameDisabledColor
-
-        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/Slider.qml b/src/imports/controls/material/Slider.qml
index 47eeecba..f7bdfeb1 100644
--- a/src/imports/controls/material/Slider.qml
+++ b/src/imports/controls/material/Slider.qml
@@ -50,8 +50,8 @@ T.Slider {
     padding: 6
 
     handle: SliderHandle {
-        x: control.leftPadding + (horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
         value: control.value
         handleHasFocus: control.visualFocus
         handlePressed: control.pressed
@@ -59,22 +59,20 @@ T.Slider {
     }
 
     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 ? 0 : (parent.width - width) / 2
-            y: parent.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
-            width: parent.horizontal ? control.position * parent.width : 3
-            height: parent.horizontal ? 3 : control.position * parent.height
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 3
+            height: control.horizontal ? 3 : control.position * parent.height
 
             color: control.Material.accentColor
         }
diff --git a/src/imports/controls/material/SliderHandle.qml b/src/imports/controls/material/SliderHandle.qml
index d8e7c6fc..7ab4b1a2 100644
--- a/src/imports/controls/material/SliderHandle.qml
+++ b/src/imports/controls/material/SliderHandle.qml
@@ -48,7 +48,6 @@ Item {
     property bool handlePressed: false
     property bool handleHovered: false
     readonly property int initialSize: 13
-    readonly property bool horizontal: control.orientation === Qt.Horizontal
     readonly property var control: parent
 
     Rectangle {
diff --git a/src/imports/controls/universal/Slider.qml b/src/imports/controls/universal/Slider.qml
index 090f20d6..bc483c3a 100644
--- a/src/imports/controls/universal/Slider.qml
+++ b/src/imports/controls/universal/Slider.qml
@@ -51,13 +51,11 @@ T.Slider {
     property bool useSystemFocusVisuals: true
 
     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.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
-        y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
+        x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
 
         radius: 4
         color: control.pressed ? control.Universal.chromeHighColor :
@@ -66,33 +64,31 @@ T.Slider {
     }
 
     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 // SliderTrackThemeHeight
-            height: !parent.horizontal ? parent.height : 2 // SliderTrackThemeHeight
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : 0
+            width: control.horizontal ? parent.width : 2 // SliderTrackThemeHeight
+            height: !control.horizontal ? parent.height : 2 // SliderTrackThemeHeight
 
             color: control.hovered && !control.pressed ? control.Universal.baseMediumColor :
                    control.enabled ? control.Universal.baseMediumLowColor : control.Universal.chromeDisabledHighColor
         }
 
         Rectangle {
-            x: parent.horizontal ? 0 : (parent.width - width) / 2
-            y: parent.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
-            width: parent.horizontal ? control.position * parent.width : 2 // SliderTrackThemeHeight
-            height: !parent.horizontal ? control.position * parent.height : 2 // SliderTrackThemeHeight
+            x: control.horizontal ? 0 : (parent.width - width) / 2
+            y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
+            width: control.horizontal ? control.position * parent.width : 2 // SliderTrackThemeHeight
+            height: !control.horizontal ? control.position * parent.height : 2 // SliderTrackThemeHeight
 
             color: control.enabled ? control.Universal.accent : control.Universal.chromeDisabledHighColor
         }
diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp
index a37fa977..36db0188 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<QQuickSlider, 3>(uri, 2, 3, "Slider");
 }
 
 QT_END_NAMESPACE
diff --git a/src/quicktemplates2/qquickslider.cpp b/src/quicktemplates2/qquickslider.cpp
index 266f883f..47f51cf2 100644
--- a/src/quicktemplates2/qquickslider.cpp
+++ b/src/quicktemplates2/qquickslider.cpp
@@ -478,6 +478,36 @@ void QQuickSlider::setPressed(bool pressed)
 }
 
 /*!
+    \since QtQuick.Controls 2.3
+    \qmlproperty bool QtQuick.Controls::Slider::horizontal
+    \readonly
+
+    This property holds whether the slider is horizontal.
+
+    \sa orientation
+*/
+bool QQuickSlider::isHorizontal() const
+{
+    Q_D(const QQuickSlider);
+    return d->orientation == Qt::Horizontal;
+}
+
+/*!
+    \since QtQuick.Controls 2.3
+    \qmlproperty bool QtQuick.Controls::Slider::vertical
+    \readonly
+
+    This property holds whether the slider is vertical.
+
+    \sa orientation
+*/
+bool QQuickSlider::isVertical() const
+{
+    Q_D(const QQuickSlider);
+    return d->orientation == Qt::Vertical;
+}
+
+/*!
     \qmlproperty enumeration QtQuick.Controls::Slider::orientation
 
     This property holds the orientation.
@@ -485,6 +515,8 @@ void QQuickSlider::setPressed(bool pressed)
     Possible values:
     \value Qt.Horizontal Horizontal (default)
     \value Qt.Vertical Vertical
+
+    \sa horizontal, vertical
 */
 Qt::Orientation QQuickSlider::orientation() const
 {
diff --git a/src/quicktemplates2/qquickslider_p.h b/src/quicktemplates2/qquickslider_p.h
index a6cf02fb..f2a13217 100644
--- a/src/quicktemplates2/qquickslider_p.h
+++ b/src/quicktemplates2/qquickslider_p.h
@@ -66,6 +66,8 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickSlider : public QQuickControl
     Q_PROPERTY(SnapMode snapMode READ snapMode WRITE setSnapMode NOTIFY snapModeChanged FINAL)
     Q_PROPERTY(bool live READ live WRITE setLive NOTIFY liveChanged FINAL REVISION 2)
     Q_PROPERTY(bool pressed READ isPressed WRITE setPressed NOTIFY pressedChanged 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(Qt::Orientation orientation READ orientation WRITE setOrientation NOTIFY orientationChanged FINAL)
     Q_PROPERTY(QQuickItem *handle READ handle WRITE setHandle NOTIFY handleChanged FINAL)
 
@@ -103,6 +105,9 @@ public:
     bool isPressed() const;
     void setPressed(bool pressed);
 
+    bool isHorizontal() const;
+    bool isVertical() const;
+
     Qt::Orientation orientation() const;
     void setOrientation(Qt::Orientation orientation);