git.iko.soy/unity8
on daa5708 help sign in
unity8/qml/Tutorial/Slider.qml
123 lines 3.7 kB history raw
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 */
17import QtQuick 2.3
18import Ubuntu.Components 1.1
20Item {
21 id: root
23 // Whether this slider is short or long
24 property bool shortSwipe
26 // How far the user has slid
27 property real offset
29 // Set to true when slider is being used
30 property bool active
32 // How far in percentage terms
33 readonly property real percent: d.slideOffset / target.x
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 }
45 implicitWidth: shortSwipe ? units.gu(15) : units.gu(27.5)
46 implicitHeight: units.gu(6.5)
48 Rectangle {
49 color: d.trayColor
50 anchors.fill: parent
51 anchors.rightMargin: clipBox.width - 1
52 }
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
59 clip: true
60 anchors.top: parent.top
61 anchors.bottom: parent.bottom
62 anchors.right: parent.right
63 width: parent.height / 2
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 }
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 }
86 Row {
87 anchors.left: handle.horizontalCenter
88 anchors.right: target.horizontalCenter
89 anchors.verticalCenter: parent.verticalCenter
91 layoutDirection: Qt.RightToLeft
92 spacing: d.dotSize * 2
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 }
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 }