1/****************************************************************************
2**
3** Copyright (C) 2016 The Qt Company Ltd.
4** Contact: https://www.qt.io/licensing/
5**
6** This file is part of the Qt Quick Controls module of the Qt Toolkit.
7**
8** $QT_BEGIN_LICENSE:LGPL$
9** Commercial License Usage
10** Licensees holding valid commercial Qt licenses may use this file in
11** accordance with the commercial license agreement provided with the
12** Software or, alternatively, in accordance with the terms contained in
13** a written agreement between you and The Qt Company. For licensing terms
14** and conditions see https://www.qt.io/terms-conditions. For further
15** information use the contact form at https://www.qt.io/contact-us.
16**
17** GNU Lesser General Public License Usage
18** Alternatively, this file may be used under the terms of the GNU Lesser
19** General Public License version 3 as published by the Free Software
20** Foundation and appearing in the file LICENSE.LGPL3 included in the
21** packaging of this file. Please review the following information to
22** ensure the GNU Lesser General Public License version 3 requirements
23** will be met: https://www.gnu.org/licenses/lgpl-3.0.html.
24**
25** GNU General Public License Usage
26** Alternatively, this file may be used under the terms of the GNU
27** General Public License version 2.0 or (at your option) the GNU General
28** Public license version 3 or any later version approved by the KDE Free
29** Qt Foundation. The licenses are as published by the Free Software
30** Foundation and appearing in the file LICENSE.GPL2 and LICENSE.GPL3
31** included in the packaging of this file. Please review the following
32** information to ensure the GNU General Public License requirements will
33** be met: https://www.gnu.org/licenses/gpl-2.0.html and
34** https://www.gnu.org/licenses/gpl-3.0.html.
35**
36** $QT_END_LICENSE$
37**
38****************************************************************************/
39
40import QtQuick 2.2
41import QtQuick.Controls 1.2
42import QtQuick.Controls.Private 1.0
43
44/*!
45    \qmltype SliderStyle
46    \inqmlmodule QtQuick.Controls.Styles
47    \since 5.1
48    \ingroup controlsstyling
49    \brief Provides custom styling for Slider.
50
51    The slider style allows you to create a custom appearance for
52    a \l Slider control.
53
54    The implicit size of the slider is calculated based on the
55    maximum implicit size of the \c background and \c handle
56    delegates combined.
57
58    Example:
59    \qml
60    Slider {
61        anchors.centerIn: parent
62        style: SliderStyle {
63            groove: Rectangle {
64                implicitWidth: 200
65                implicitHeight: 8
66                color: "gray"
67                radius: 8
68            }
69            handle: Rectangle {
70                anchors.centerIn: parent
71                color: control.pressed ? "white" : "lightgray"
72                border.color: "gray"
73                border.width: 2
74                implicitWidth: 34
75                implicitHeight: 34
76                radius: 12
77            }
78        }
79    }
80    \endqml
81*/
82Style {
83    id: styleitem
84
85    /*! The \l Slider this style is attached to. */
86    readonly property Slider control: __control
87
88    padding { top: 0 ; left: 0 ; right: 0 ; bottom: 0 }
89
90    /*! This property holds the item for the slider handle.
91        You can access the slider through the \c control property
92    */
93    property Component handle: Item{
94            implicitWidth:  implicitHeight
95            implicitHeight: TextSingleton.implicitHeight * 1.2
96
97            FastGlow {
98                source: handle
99                anchors.fill: parent
100                anchors.bottomMargin: -1
101                anchors.topMargin: 1
102                smooth: true
103                color: "#11000000"
104                spread: 0.8
105                transparentBorder: true
106                blur: 0.1
107
108            }
109            Rectangle {
110                id: handle
111                anchors.fill: parent
112
113                radius: width/2
114                gradient: Gradient {
115                    GradientStop { color: control.pressed ? "#e0e0e0" : "#fff" ; position: 1 }
116                    GradientStop { color: "#eee" ; position: 0 }
117                }
118                Rectangle {
119                    anchors.fill: parent
120                    anchors.margins: 1
121                    radius: width/2
122                    border.color: "#99ffffff"
123                    color: control.activeFocus ? "#224f7fbf" : "transparent"
124                }
125                border.color: control.activeFocus ? "#47b" : "#777"
126            }
127
128    }
129    /*! This property holds the background groove of the slider.
130
131        You can access the handle position through the \c styleData.handlePosition property.
132    */
133    property Component groove: Item {
134        property color fillColor: "#49d"
135        anchors.verticalCenter: parent.verticalCenter
136        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
137        implicitHeight: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.3))
138        Rectangle {
139            radius: height/2
140            anchors.fill: parent
141            border.width: 1
142            border.color: "#888"
143            gradient: Gradient {
144                GradientStop { color: "#bbb" ; position: 0 }
145                GradientStop { color: "#ccc" ; position: 0.6 }
146                GradientStop { color: "#ccc" ; position: 1 }
147            }
148        }
149        Item {
150            clip: true
151            width: styleData.handlePosition
152            height: parent.height
153            Rectangle {
154                anchors.fill: parent
155                border.color: Qt.darker(fillColor, 1.2)
156                radius: height/2
157                gradient: Gradient {
158                    GradientStop {color: Qt.lighter(fillColor, 1.3)  ; position: 0}
159                    GradientStop {color: fillColor ; position: 1.4}
160                }
161            }
162        }
163    }
164
165    /*! This property holds the tick mark labels.
166        \since QtQuick.Controls.Styles 1.1
167
168        Every tickmark that should be drawn must be defined within this
169        component, so it is common to use a \l Repeater, for example.
170
171        You can access the handle width through the \c styleData.handleWidth property.
172    */
173    property Component tickmarks: Repeater {
174        id: repeater
175        model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
176        Rectangle {
177            color: "#777"
178            width: 1 ; height: 3
179            y: repeater.height
180            x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
181        }
182    }
183
184    /*! This property holds the slider style panel.
185
186        Note that it is generally not recommended to override this.
187    */
188    property Component panel: Item {
189        id: root
190        property int handleWidth: handleLoader.width
191        property int handleHeight: handleLoader.height
192
193        property bool horizontal : control.orientation === Qt.Horizontal
194        property int horizontalSize: grooveLoader.implicitWidth + padding.left + padding.right
195        property int verticalSize: Math.max(handleLoader.implicitHeight, grooveLoader.implicitHeight) + padding.top + padding.bottom
196
197        implicitWidth: horizontal ? horizontalSize : verticalSize
198        implicitHeight: horizontal ? verticalSize : horizontalSize
199
200        y: horizontal ? 0 : height
201        rotation: horizontal ? 0 : -90
202        transformOrigin: Item.TopLeft
203
204        Item {
205
206            anchors.fill: parent
207
208            Loader {
209                id: grooveLoader
210                property QtObject styleData: QtObject {
211                    readonly property int handlePosition: handleLoader.x + handleLoader.width/2
212                }
213                x: padding.left
214                sourceComponent: groove
215                width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
216                y:  Math.round(padding.top + (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2)
217            }
218            Loader {
219                id: tickMarkLoader
220                anchors.fill: parent
221                sourceComponent: control.tickmarksEnabled ? tickmarks : null
222                property QtObject styleData: QtObject { readonly property int handleWidth: control.__panel.handleWidth }
223            }
224            Loader {
225                id: handleLoader
226                sourceComponent: handle
227                anchors.verticalCenter: grooveLoader.verticalCenter
228                x: Math.round((control.__handlePos - control.minimumValue) / (control.maximumValue - control.minimumValue) * ((horizontal ? root.width : root.height) - item.width))
229            }
230        }
231    }
232}
233