[sysui] Add a new Slider style

 - Add a new slider style
 - Add examples in The Sheet app

Task-number: QTAUTO-926
Change-Id: I544cb8ce8068ee83823dcfb64814a767ba70852f
Reviewed-by: Daniel d'Andrada <daniel.dandrada@luxoft.com>

6 files changed, 166 insertions, 23 deletions

diff --git a/dev/apps/com.pelagicore.sheets/components/SliderPanel.qml b/dev/apps/com.pelagicore.sheets/components/SliderPanel.qml
new file mode 100644
index 00000000..669dafbe
--- /dev/null
+++ b/dev/apps/com.pelagicore.sheets/components/SliderPanel.qml
@@ -0,0 +1,94 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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 https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.8
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import utils 1.0
+
+import com.pelagicore.styles.neptune 3.0
+
+Item {
+    Column {
+        id: columnContent
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 10 * NeptuneStyle.scale
+        Label {
+            text: "Vertical / Horizontal sliders"
+        }
+        Row {
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 50 * NeptuneStyle.scale
+            Slider {
+                anchors.verticalCenter: parent.verticalCenter
+                height: 500 * NeptuneStyle.scale
+                from: 0
+                to: 100
+                value: 35
+                orientation: Qt.Vertical
+            }
+            Slider {
+                anchors.verticalCenter: parent.verticalCenter
+                width: 700 * NeptuneStyle.scale
+                from: 0
+                to: 100
+                value: 35
+                orientation: Qt.Horizontal
+            }
+        }
+        Label {
+            text: "Vertical / Horizontal stepper sliders"
+        }
+        Row {
+            anchors.horizontalCenter: parent.horizontalCenter
+            spacing: 50 * NeptuneStyle.scale
+            Slider {
+                anchors.verticalCenter: parent.verticalCenter
+                height: 500 * NeptuneStyle.scale
+                from: 0
+                to: 100
+                value: 40
+                stepSize: 20
+                orientation: Qt.Vertical
+            }
+            Slider {
+                anchors.verticalCenter: parent.verticalCenter
+                width: 700 * NeptuneStyle.scale
+                from: 0
+                to: 100
+                value: 30
+                stepSize: 10
+                orientation: Qt.Horizontal
+            }
+        }
+    }
+}
diff --git a/imports/assets/gfx/slider-handle-horizontal-dark.png b/imports/assets/gfx/slider-handle-horizontal-dark.png
new file mode 100644
index 00000000..07215da8
--- /dev/null
+++ b/imports/assets/gfx/slider-handle-horizontal-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b0e8b5d2cf597b67879f59ab9708af6b0f47bee44e4f9a9ebd60a252dab8fc87
+size 3185
diff --git a/imports/assets/gfx/slider-handle-horizontal.png b/imports/assets/gfx/slider-handle-horizontal.png
new file mode 100644
index 00000000..b11c62a8
--- /dev/null
+++ b/imports/assets/gfx/slider-handle-horizontal.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2e6ce59d68caeda8fe803c680398aad47a20a7dff0c4bb46016e127bf76c46d4
+size 4538
diff --git a/imports/assets/gfx/slider-handle-vertical-dark.png b/imports/assets/gfx/slider-handle-vertical-dark.png
new file mode 100644
index 00000000..7bc964cd
--- /dev/null
+++ b/imports/assets/gfx/slider-handle-vertical-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:609b26eca5c3a44f74d5a4e63ca3883fd9194674c52cfc784953265d0102fdbc
+size 3099
diff --git a/imports/assets/gfx/slider-handle-vertical.png b/imports/assets/gfx/slider-handle-vertical.png
new file mode 100644
index 00000000..2974afba
--- /dev/null
+++ b/imports/assets/gfx/slider-handle-vertical.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a768c9a6c1898c8390a4209a43ead25b369c38d737aa152492ee9620219100a
+size 4455
diff --git a/styles/neptune/Slider.qml b/styles/neptune/Slider.qml
index fc644431..aaddeb25 100644
--- a/styles/neptune/Slider.qml
+++ b/styles/neptune/Slider.qml
@@ -49,40 +49,77 @@ T.Slider {
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
                             (handle ? handle.implicitHeight : 0) + topPadding + bottomPadding)
 
-    padding: NeptuneStyle.dp(6)
+    live: false
+    snapMode: Slider.SnapOnRelease
 
-    readonly property int count: stepSize != 0 ? (to-from)/stepSize : 0.5
+    opacity: enabled ? 1.0 : 0.3
+
+    QtObject {
+        id: d
+        readonly property int numberSteps: control.stepSize !== 0 ?
+                                               (control.to - control.from) / control.stepSize : 0
+        readonly property int railSize: numberSteps > 0 ?
+                                   30 * NeptuneStyle.scale : 10 * NeptuneStyle.scale
+        readonly property real railLength: control.horizontal ?
+                                      control.availableWidth - handle.width : control.availableHeight - handle.height
+        readonly property real stepLength: numberSteps ?
+                                               (railLength - gap * (numberSteps - 1)) / numberSteps : 0.0
+        readonly property int gap: 3 * NeptuneStyle.scale
+    }
 
     handle: Image {
-        id: handleItem
-        x: control.leftPadding + (control.availableWidth - width) / 2
-        y: control.topPadding + (control.visualPosition * (control.availableHeight - height))
-        width: NeptuneStyle.dp(139)
-        height: NeptuneStyle.dp(85)
-        source: Style.gfx2("vertical-slider-handle", NeptuneStyle.theme)
-        fillMode: Image.PreserveAspectFit
+        id: handle
+        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))
+        source: control.horizontal ?
+                    Style.gfx2("slider-handle-horizontal", NeptuneStyle.theme) :
+                    Style.gfx2("slider-handle-vertical", NeptuneStyle.theme)
     }
 
-    background: Column {
-        id: rulerNumbers
-        anchors.top: parent.top
-        anchors.topMargin: handleItem.height/2
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: handleItem.height/2
-        anchors.horizontalCenter: parent.horizontalCenter
+    background: Item {
+        id: railContainer
+        x: control.leftPadding + (control.horizontal ? handle.width / 2 : (control.availableWidth - width) / 2)
+        y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : handle.height / 2)
 
-        width: Style.hspan(30/45)
-        spacing: Style.vspan(3/80)
+        width: control.horizontal ? d.railLength : d.railSize
+        height: control.horizontal ? d.railSize : d.railLength
 
         Repeater {
-            model: control.count
+            enabled: d.numberSteps
+            model: d.numberSteps
             delegate: Rectangle {
-                id: rect
-                width: parent.width
-                height: rulerNumbers.height/control.count - rulerNumbers.spacing
+                id: rectStep
+                x: control.horizontal ? index * (d.stepLength + d.gap) : 0
+                y: control.horizontal ? 0 : index * (d.stepLength + d.gap)
+                width: control.horizontal ? d.stepLength : railContainer.width
+                height: control.horizontal ? railContainer.height : d.stepLength
                 color: NeptuneStyle.contrastColor
-                opacity: (handleItem.y-handleItem.height/2) > rect.y ? 0.1 : 0.6
+                opacity: control.horizontal ?
+                             (handle.x > (rectStep.x+d.stepLength/2) ? 0.6 : 0.1) :
+                             (handle.y > rectStep.y+d.stepLength/2 ? 0.1 : 0.6)
             }
         }
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: NeptuneStyle.contrastColor
+            visible: d.numberSteps === 0
+            opacity: 0.1
+        }
+
+        Rectangle {
+            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 : parent.width
+            height: control.horizontal ? parent.height : control.position * parent.height
+            visible: d.numberSteps === 0
+            color: NeptuneStyle.contrastColor
+            opacity: 0.5
+        }
     }
 }