[Slider] Update style

examples/touch/content/SliderPage.qml

@@ -54,14 +54,18 @@ Page {
 
         Slider {
             anchors.margins: 20
-            //style: touchStyle
             value: 0
         }
         Slider {
             anchors.margins: 20
-            //style: touchStyle
+            showValue: true
             value: 0.5
         }
+        Slider {
+            anchors.margins: 20
+            enabled: false
+            value: 0.75
+        }
         Slider {
             anchors.margins: 20
             style: touchStyle

src/controls/Slider.qml

+import QtQuick 2.1
+import QtQuick.Controls 1.0
+
+import QtQuick.Controls.Styles.Nemo 1.0
+
+
+Slider {
+    id: slider
+    property bool showValue: false
+
+    style: SliderStyle{}
+}

src/controls/controls.pro

@@ -16,7 +16,8 @@ QML_FILES += \
     ButtonRow.qml \
     QueryDialog.qml \
     Header.qml \
-    HeaderToolsLayout.qml
+    HeaderToolsLayout.qml \
+    Slider.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES
@@ -48,4 +49,5 @@ qmlfiles.files += $$_PRO_FILE_PWD_/qmldir
 qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 images.files = $$_PRO_FILE_PWD_/images
 images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
+
 INSTALLS += target qmlfiles images

src/controls/qmldir

@@ -18,6 +18,7 @@ ButtonRow 1.0 ButtonRow.qml
 QueryDialog 1.0 QueryDialog.qml
 Header 1.0 Header.qml
 HeaderToolsLayout 1.0 HeaderToolsLayout.qml
+Slider 1.0 Slider.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.
@@ -37,7 +38,6 @@ StackView 1.0 ../StackView.qml
 ProgressBar 1.0 ../ProgressBar.qml
 RadioButton 1.0 ../RadioButton.qml
 ScrollView 1.0 ../ScrollView.qml
-Slider 1.0 ../Slider.qml
 SpinBox 1.0 ../SpinBox.qml
 SplitView 1.0 ../SplitView.qml
 StackViewDelegate 1.0 ../StackViewDelegate.qml

src/styles/SliderStyle.qml

 /*
  * Copyright (C) 2013 Andrea Bernabei <and.bernabei@gmail.com>
+ * Copyright (C) 2017 Chupligin Sergey <mail@neochapay.ru>
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Library General Public
@@ -21,63 +22,61 @@ import QtQuick 2.1
 import QtQuick.Controls.Styles 1.0
 import QtQuick.Controls.Styles.Nemo 1.0
 
-SliderStyle {
-    GrooveStyle {
-        id: grooveStyle
-    }
-
-    Image {
-        id: ball
-        source: "images/slider-ball.png"
-        z: 1
+SliderStyle{
+    handle: Rectangle {
+        id: handle
+        anchors.centerIn: parent
+        color: "black"
+        border.color: "#0091e5"
+        border.width: 2
+        implicitWidth: 34
+        implicitHeight: 34
+        radius: 16
         visible: control.enabled
+
+        Text{
+            id: valueLabel
+            anchors.centerIn: parent
+            text: parseInt(control.value*100)
+            visible: control.showValue
+            color: "white"
+        }
     }
 
-    handle: Canvas {
-        Connections {
-            target: control
-            onValueChanged: {
-                if (Math.abs(((control.value*1000) - lastValue)) > 10) {
-                    requestPaint()
-                    lastValue = control.value*1000
-                }
-            }
+    groove: Rectangle{
+        id: grove
+
+        implicitHeight: 16
+        implicitWidth: 440
+        color: "#313131"
+        z: 1
+        Rectangle{
+            id: dataLine
+            height: parent.height
+            width: styleData.handlePosition
+            color: "#0091e5"
         }
-        id: canvas
-        width: 125
-        height: 50
-        property color strokeStyle: Theme.groove.foreground
-        property color fillStyle: Theme.groove.foreground
-        property bool fill: true
-        property bool stroke: true
-        property real alpha: 1.0
-        property real lastValue: 0
-        antialiasing: true
 
-        onPaint: {
-            canvas.loadImage("images/slider-ball.png");
+        Image {
+            id: disabledImg
+            anchors.fill: parent
+            visible: !control.enabled
+            source: "images/disabled-overlay.png"
+            fillMode: Image.Tile
+        }
 
-            var ctx = canvas.getContext('2d');
-            ctx.save();
-            ctx.translate(0,8);
-            ctx.fillStyle = canvas.fillStyle;
-            ctx.beginPath();
-            ctx.lineWidth = 1;
-            ctx.moveTo(0,38);
-            ctx.bezierCurveTo(0, 8, 0, 8, 0, 8);
-            ctx.bezierCurveTo(55, 8, 55, 8, 55, 8);
-            ctx.bezierCurveTo(85, 0, 85, 0, 85, 0);
-            ctx.bezierCurveTo(85, 32, 85, 32, 85, 32);
-            ctx.bezierCurveTo(55, 25, 55, 25, 55, 25);
-            ctx.bezierCurveTo(0, 24, 0, 24, 0, 24);
-            ctx.closePath();
-            ctx.fill();
-            ctx.drawImage("images/slider-ball.png", 75, -3, 45,45);
-            ctx.fillStyle="white";
-            ctx.font="Bold 24px";
-            ctx.fillText(parseInt(control.value*100), 84, 27);
-            ctx.restore();
+        Image{
+            id: left
+            anchors{
+                right: dataLine.right
+                verticalCenter: dataLine.verticalCenter
+            }
+            source: "images/slider-handle-left.svg"
+            height: 34
+            visible: control.enabled
+            width: (styleData.handlePosition > 80) ? 80 : styleData.handlePosition
+            sourceSize.width: width
+            sourceSize.height: height
         }
     }
-    groove: grooveStyle;
 }

src/styles/images/slider-handle-left.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg6201"
+   viewBox="0 0 80.000001 32.000001"
+   height="32"
+   width="80"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="slider-handle-left.svg">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1051"
+     id="namedview7"
+     showgrid="false"
+     inkscape:zoom="1.2685914"
+     inkscape:cx="-37.765717"
+     inkscape:cy="-210.20414"
+     inkscape:window-x="0"
+     inkscape:window-y="312"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6201"
+     units="px" />
+  <defs
+     id="defs6203" />
+  <metadata
+     id="metadata6206">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     style="fill:#0091e5;fill-opacity:1"
+     transform="translate(-948.66514,-193.50502)">
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#0091e5;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+       d="m 948.92042,201.50506 c 0,0 45.85971,1.70082 79.55728,-8 l 0,32 c -34.41912,-10.50044 -79.81256,-8 -79.81256,-8 z"
+       id="rect6032"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

src/styles/styles.pro

@@ -51,7 +51,8 @@ QML_FILES += \
     images/arrow-right@2x.png \
     images/disabled-overlay.png \
     images/switch-ball.png \
-    images/slider-ball.png
+    images/slider-ball.png \
+    images/slider-handle-left.svg
 
 OTHER_FILES += qmldir \
     themes/Theme1.js \
@@ -69,7 +70,9 @@ qmlfiles.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 themes.files = $$_PRO_FILE_PWD_/themes/*.json
 themes.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH/themes
 
-images.files = $$_PRO_FILE_PWD_/images
+images.files = $$_PRO_FILE_PWD_/images/*.svg\
+               $$_PRO_FILE_PWD_/images/*.png
+
 images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 
 HEADERS += \