Unity 8
Slider.qml
1 /*
2  * Copyright (C) 2014 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.4
18 import Ubuntu.Components 1.3
19 
20 Item {
21  id: root
22 
23  // Whether this slider is short or long
24  property bool shortSwipe
25 
26  // How far the user has slid
27  property real offset
28 
29  // Set to true when slider is being used
30  property bool active
31 
32  // How far in percentage terms
33  readonly property real percent: d.slideOffset / target.x
34 
35  QtObject {
36  id: d
37  readonly property color trayColor: "#424141"
38  readonly property real margin: units.gu(0.5)
39  readonly property real arrowSize: root.height - margin * 2
40  readonly property real dotSize: units.dp(1)
41  readonly property real slideOffset: MathUtils.clamp(root.offset - offscreenOffset, -offscreenOffset, target.x)
42  readonly property real offscreenOffset: units.gu(2)
43  }
44 
45  implicitWidth: shortSwipe ? units.gu(15) : units.gu(27.5)
46  implicitHeight: units.gu(6.5)
47 
48  Rectangle {
49  color: d.trayColor
50  anchors.fill: parent
51  anchors.rightMargin: clipBox.width - 1
52  }
53 
54  // We want to have a circular border around the target. But we can't just
55  // do a radius on two of a rectangle's corners. So we clip a full circle.
56  Item {
57  id: clipBox
58 
59  clip: true
60  anchors.top: parent.top
61  anchors.bottom: parent.bottom
62  anchors.right: parent.right
63  width: parent.height / 2
64 
65  Rectangle {
66  color: d.trayColor
67  anchors.top: parent.top
68  anchors.bottom: parent.bottom
69  anchors.right: parent.right
70  width: parent.width * 2
71  radius: parent.width
72  }
73  }
74 
75  Arrow {
76  id: target
77  width: d.arrowSize
78  height: d.arrowSize
79  color: "#73000000"
80  chevronOpacity: 0.52
81  anchors.right: parent.right
82  anchors.rightMargin: d.margin
83  anchors.verticalCenter: parent.verticalCenter
84  }
85 
86  Row {
87  anchors.left: handle.horizontalCenter
88  anchors.right: target.horizontalCenter
89  anchors.verticalCenter: parent.verticalCenter
90 
91  layoutDirection: Qt.RightToLeft
92  spacing: d.dotSize * 2
93 
94  Repeater {
95  model: parent.width / (parent.spacing + d.dotSize)
96  Rectangle {
97  anchors.verticalCenter: parent ? parent.verticalCenter : undefined
98  height: d.dotSize
99  width: height
100  radius: width
101  color: "white"
102  opacity: 0.2
103  }
104  }
105  }
106 
107  Arrow {
108  id: handle
109  width: d.arrowSize
110  height: d.arrowSize
111  color: UbuntuColors.orange
112  darkenBy: root.active ? 0.5 : 0
113  anchors.left: parent.left
114  // We use a Translate transform rather than anchors.leftMargin because
115  // the latter has weird performance problems on the TutorialRight page.
116  transform: [
117  Translate {
118  x: d.slideOffset
119  }
120  ]
121  anchors.verticalCenter: parent.verticalCenter
122  }
123 }