• Skip to content
  • Skip to link menu
KDE API Reference
  • KDE API Reference
  • kde-runtime API Reference
  • KDE Home
  • Contact Us
 

PlasmaComponents

  • sources
  • kde-4.14
  • kde-runtime
  • plasma
  • declarativeimports
  • plasmacomponents
  • qml
Slider.qml
Go to the documentation of this file.
1 /*
2 * Copyright (C) 2011 by Daker Fernandes Pinheiro <dakerfp@gmail.com>
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU Library General Public License as
6 * published by the Free Software Foundation; either version 2, or
7 * (at your option) any later version.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details
13 *
14 * You should have received a copy of the GNU Library General Public
15 * License along with this program; if not, write to the
16 * Free Software Foundation, Inc.,
17 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
18 */
19 
20 import QtQuick 1.0
21 import org.kde.plasma.core 0.1 as PlasmaCore
22 import "private" as Private
23 
24 // TODO: create a value indicator for plasma?
28 Item {
29  id: slider
30 
31  // Common API
36  property alias stepSize: range.stepSize
37 
44  property alias minimumValue: range.minimumValue
45 
52  property alias maximumValue: range.maximumValue
53 
61  property alias value: range.value
62 
70  property int orientation: Qt.Horizontal
71 
77  property alias pressed: mouseArea.pressed
78 
87  property bool valueIndicatorVisible: false
88 
94  property string valueIndicatorText: value
95 
96  // Plasma API
104  property alias inverted: range.inverted
105 
106  width: contents.isVertical ? theme.defaultFont.mSize.height*1.6 : 200
107  height: contents.isVertical ? 200 : theme.defaultFont.mSize.height*1.6
108  // TODO: needs to define if there will be specific graphics for
109  // disabled sliders
110  opacity: enabled ? 1.0 : 0.5
111 
112  Keys.onUpPressed: {
113  if (!enabled || !contents.isVertical)
114  return;
115 
116  if (inverted)
117  value -= stepSize;
118  else
119  value += stepSize;
120  }
121 
122  Keys.onDownPressed: {
123  if (!enabled || !enabled)
124  return;
125 
126  if (!contents.isVertical)
127  return;
128 
129  if (inverted)
130  value += stepSize;
131  else
132  value -= stepSize;
133  }
134 
135  Keys.onLeftPressed: {
136  if (!enabled || contents.isVertical)
137  return;
138 
139  if (inverted)
140  value += stepSize;
141  else
142  value -= stepSize;
143  }
144 
145  Keys.onRightPressed: {
146  if (!enabled || contents.isVertical)
147  return;
148 
149  if (inverted)
150  value -= stepSize;
151  else
152  value += stepSize;
153  }
154 
155  Item {
156  id: contents
157 
158  // Plasma API
159  property bool animated: true
160  property real handleWidth: contents.isVertical ? grooveSvg.elementSize("vertical-slider-handle").width : grooveSvg.elementSize("horizontal-slider-handle").width
161  property real handleHeight: contents.isVertical ? grooveSvg.elementSize("vertical-slider-handle").height : grooveSvg.elementSize("horizontal-slider-handle").height
162 
163  // Convenience API
164  property bool isVertical: orientation == Qt.Vertical
165 
166  width: contents.isVertical ? slider.height : slider.width
167  height: contents.isVertical ? slider.width : slider.height
168  rotation: contents.isVertical ? -90 : 0
169 
170  anchors.centerIn: parent
171 
172  RangeModel {
173  id: range
174 
175  minimumValue: 0.0
176  maximumValue: 1.0
177  value: 0
178  stepSize: 0.0
179  inverted: false
180  positionAtMinimum: 0
181  positionAtMaximum: contents.width - handle.width
182  }
183 
184  PlasmaCore.Svg {
185  id: grooveSvg
186  imagePath: "widgets/slider"
187  }
188  PlasmaCore.FrameSvgItem {
189  id: groove
190  imagePath: "widgets/slider"
191  prefix: "groove"
192  //FIXME: frameSvg should have a minimumSize attribute, could be added to kdelibs 4.7(maybe just the qml binding is enough)?
193  height: grooveSvg.elementSize("groove-topleft").height + grooveSvg.elementSize("groove-bottomleft").height
194  anchors {
195  left: parent.left
196  right: parent.right
197  verticalCenter: parent.verticalCenter
198  }
199  }
200  PlasmaCore.FrameSvgItem {
201  id: highlight
202  imagePath: "widgets/slider"
203  prefix: "groove-highlight"
204  height: groove.height
205  width: inverted ? groove.width - handle.x : fakeHandle.x + handle.width/2
206  x: inverted ? handle.x : 0
207  anchors.verticalCenter: parent.verticalCenter
208 
209  //use the same animation when resizing a slider as moving the slider this keeps it in line when using key shortcuts
210  Behavior on width {
211  enabled: !mouseArea.drag.active && contents.animated
212  PropertyAnimation {
213  duration: behavior.enabled ? 150 : 0
214  easing.type: Easing.OutSine
215  }
216  }
217 
218  visible: range.position > 0 && slider.enabled
219  }
220 
221  Private.RoundShadow {
222  id: shadow
223  imagePath: "widgets/slider"
224  focusElement: contents.isVertical ? "vertical-slider-focus" : "horizontal-slider-focus"
225  hoverElement: contents.isVertical ? "vertical-slider-hover" : "horizontal-slider-hover"
226  shadowElement: contents.isVertical ? "vertical-slider-shadow" : "horizontal-slider-shadow"
227  state: slider.activeFocus ? "focus" : (mouseArea.containsMouse ? "hover" : "shadow")
228  anchors.fill: handle
229  //We rotate the handle below, we need to rotate the shadow back as well
230  rotation: contents.isVertical ? 90 : 0
231  }
232 
233  PlasmaCore.SvgItem {
234  id: handle
235 
236  x: fakeHandle.x
237  anchors {
238  verticalCenter: groove.verticalCenter
239  }
240  width: contents.handleWidth
241  height: contents.handleHeight
242  //Rotate the handle back for vertical slider so all the handles have the same shadow effect
243  rotation: contents.isVertical ? 90 : 0
244  svg: PlasmaCore.Svg { imagePath: "widgets/slider" }
245  elementId: contents.isVertical ? "vertical-slider-handle" : "horizontal-slider-handle"
246 
247  Behavior on x {
248  id: behavior
249  enabled: !mouseArea.drag.active && contents.animated
250 
251  PropertyAnimation {
252  duration: behavior.enabled ? 150 : 0
253  easing.type: Easing.OutSine
254  }
255  }
256  }
257 
258  Item {
259  id: fakeHandle
260  width: handle.width
261  height: handle.height
262  }
263 
264  MouseArea {
265  id: mouseArea
266 
267  anchors.fill: parent
268  enabled: slider.enabled
269  drag {
270  target: fakeHandle
271  axis: Drag.XAxis
272  minimumX: range.positionAtMinimum
273  maximumX: range.positionAtMaximum
274  }
275  hoverEnabled: true
276 
277  onPressed: {
278  // Clamp the value
279  var newX = Math.max(mouse.x, drag.minimumX)
280  newX = Math.min(newX, drag.maximumX)
281 
282  // Debounce the press: a press event inside the handler will not
283  // change its position, the user needs to drag it.
284  if (Math.abs(newX - fakeHandle.x) > handle.width / 2) {
285  range.position = newX - handle.width / 2
286  }
287 
288  slider.forceActiveFocus()
289  }
290  }
291  }
292 
293  Binding {
294  target: range
295  property: "position"
296  value: fakeHandle.x
297  }
298 
299  // During the drag, we simply ignore position set from the range, this
300  // means that setting a value while dragging will not "interrupt" the
301  // dragging activity.
302  Binding {
303  when: !mouseArea.drag.active
304  target: fakeHandle
305  property: "x"
306  value: range.position
307  }
308 }
Item
This file is part of the KDE documentation.
Documentation copyright © 1996-2020 The KDE developers.
Generated on Mon Jun 22 2020 13:08:40 by doxygen 1.8.7 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.

PlasmaComponents

Skip menu "PlasmaComponents"
  • Main Page
  • Namespace List
  • Alphabetical List
  • Class List
  • Class Hierarchy
  • Class Members
  • File List

kde-runtime API Reference

Skip menu "kde-runtime API Reference"
  • KCMShell
  • KNotify
  • Plasma Runtime
  •     PlasmaCore
  •     DragAndDrop
  •     PlasmaComponents
  •     PlasmaExtraComponents
  •     QtExtraComponents

Search



Report problems with this website to our bug tracking system.
Contact the specific authors with questions and comments about the page contents.

KDE® and the K Desktop Environment® logo are registered trademarks of KDE e.V. | Legal