src/core/GCSlider.qml

0001 /* GCompris - GCSlider.qml
0002  *
0003  * SPDX-FileCopyrightText: 2018 Alexis Breton <alexis95150@gmail.com>
0004  *
0005  * Authors:
0006  *   Alexis Breton <alexis95150@gmail.com>
0007  *
0008  *   SPDX-License-Identifier: GPL-3.0-or-later
0009  */
0010 import QtQuick 2.12
0011 import QtQuick.Controls 2.12
0012 import GCompris 1.0
0013
0014 /**
0015   * A Slider component with GCompris' style.
0016   * @ingroup components
0017   *
0018   * @inherit QtQuick.Controls.Slider
0019   */
0020 Slider {
0021     id: control
0022
0023     focusPolicy: Qt.NoFocus
0024     snapMode: Slider.SnapAlways
0025     stepSize: 1
0026
0027     handle: Rectangle {
0028         x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
0029         y: control.topPadding + control.availableHeight / 2 - height / 2
0030         implicitWidth: 2 * radius
0031         implicitHeight: 2 * radius
0032         radius: 13
0033         color: control.pressed ? "#f0f0f0" : "#f6f6f6"
0034         border.color: "#bdbebf"
0035     }
0036
0037         background: Rectangle {
0038         x: control.leftPadding
0039         y: control.topPadding + control.availableHeight / 2 - height / 2
0040                 radius: height / 2
0041         width: control.availableWidth
0042         height: implicitHeight
0043         implicitWidth: 250 * ApplicationInfo.ratio
0044         implicitHeight: 8 * ApplicationInfo.ratio
0045         anchors.verticalCenter: parent.verticalCenter
0046         border.width: 1
0047         border.color: "#888"
0048         gradient: Gradient {
0049             GradientStop { color: "#bbb" ; position: 0 }
0050             GradientStop { color: "#ccc" ; position: 0.6 }
0051             GradientStop { color: "#ccc" ; position: 1 }
0052         }
0053
0054         Rectangle {
0055             width: control.visualPosition * parent.width
0056             height: parent.height
0057             border.color: Qt.darker("#f8d600", 1.2)
0058             radius: height/2
0059             gradient: Gradient {
0060                 GradientStop { color: "#ffe85c"; position: 0 }
0061                 GradientStop { color: "#f8d600"; position: 1.4 }
0062             }
0063         }
0064     }
0065 }