2 * Copyright (C) 2014-2015 Canonical, Ltd.
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.
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.
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/>.
18 import Ubuntu.Components 1.3
23 height: clickToAct ? leftButton.height : childrenRect.height
25 signal leftTriggered()
26 signal rightTriggered()
28 property string leftIconName
29 property string rightIconName
31 property bool clickToAct
36 property double opacityDelta
37 readonly property double sliderHeight: units.gu(8)
38 readonly property double gap: units.gu(1)
39 readonly property color sliderMainColor: "#b2b2b2"
40 readonly property color sliderBGColor: "#f4f4f4"
41 readonly property double halfWay: mouseArea.drag.maximumX / 2
43 UbuntuNumberAnimation on opacityDelta {
46 loops: Animation.Infinite
47 duration: UbuntuAnimation.SleepyDuration
48 easing.type: Easing.Linear
51 // linearly interpolate between start- and end-color
52 // with a normalized weight-factor
53 // 0.0 meaning just the start-color being taken into
54 // account and 1.0 only taking the end-color into
56 function interpolate(start, end, factor) {
57 var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r
58 var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g
59 var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b
60 var adiff = start.a > end.a ? end.a - start.a : end.a - start.a
61 var r = start.r + factor * rdiff
62 var g = start.g + factor * gdiff
63 var b = start.b + factor * bdiff
64 var a = start.a + factor * adiff
65 return Qt.rgba(r,g,b,a)
71 objectName: "leftButton"
72 anchors.verticalCenter: parent.verticalCenter
73 anchors.left: parent.left
74 iconName: leftIconName
76 width: (parent.width / 2) - priv.gap
77 color: UbuntuColors.red
85 objectName: "rightButton"
86 anchors.verticalCenter: parent.verticalCenter
87 anchors.right: parent.right
88 iconName: rightIconName
90 width: (parent.width / 2) - priv.gap
91 color: UbuntuColors.green
100 height: priv.sliderHeight
101 backgroundColor: priv.sliderBGColor
102 aspect: UbuntuShape.Flat
107 objectName: "leftArea"
108 anchors.top: parent.top
109 anchors.left: parent.left
110 anchors.margins: priv.gap
111 backgroundColor: UbuntuColors.red
112 aspect: UbuntuShape.Flat
118 opacity: slider.x <= priv.halfWay ? 1.0 : 1.0 - ((slider.x - priv.halfWay) / priv.halfWay)
121 anchors.centerIn: parent
123 height: units.gu(3.5)
130 anchors.verticalCenter: parent.verticalCenter
131 anchors.right: slider.left
132 anchors.rightMargin: units.gu(1.5)
133 spacing: -units.gu(1)
134 visible: slider.x === priv.halfWay
137 height: units.gu(2.5)
138 color: priv.sliderMainColor
139 opacity: .5 + priv.opacityDelta
143 height: units.gu(2.5)
144 color: priv.sliderMainColor
145 opacity: 1 - priv.opacityDelta
152 anchors.top: parent.top
153 anchors.margins: priv.gap
156 Component.onCompleted: {
157 xBehavior.enabled = true
163 UbuntuNumberAnimation {
164 duration: UbuntuAnimation.FastDuration
165 easing.type: Easing.OutBounce
169 Behavior on opacity {
170 UbuntuNumberAnimation {
171 duration: UbuntuAnimation.FastDuration
177 if (slider.x <= priv.gap + leftShape.width)
179 factor = (slider.x - priv.gap) / leftShape.width
180 slider.color = priv.interpolate(leftShape.color, priv.sliderMainColor, factor)
181 } else if (slider.x >= rightShape.x - slider.width) {
182 factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width
183 slider.color = priv.interpolate(priv.sliderMainColor, rightShape.color, factor)
185 slider.color = priv.sliderMainColor
190 backgroundColor: priv.sliderMainColor
193 aspect: UbuntuShape.Flat
197 anchors.margins: units.gu(1.5)
198 source: "grip-large.svg"
204 anchors.verticalCenter: parent.verticalCenter
205 anchors.left: slider.right
206 anchors.leftMargin: units.gu(1.5)
207 spacing: -units.gu(1)
208 visible: slider.x === priv.halfWay
211 height: units.gu(2.5)
212 color: priv.sliderMainColor
213 opacity: 1 - priv.opacityDelta
217 height: units.gu(2.5)
218 color: priv.sliderMainColor
219 opacity: 0.5 + priv.opacityDelta
225 objectName: "rightArea"
226 anchors.top: parent.top
227 anchors.right: parent.right
228 anchors.margins: priv.gap
229 backgroundColor: UbuntuColors.green
230 aspect: UbuntuShape.Flat
236 opacity: slider.x >= priv.halfWay ? 1.0 : slider.x / priv.halfWay
239 anchors.centerIn: parent
241 height: units.gu(3.5)
250 objectName: "swipeMouseArea"
255 drag.axis: Drag.XAxis
256 drag.minimumX: priv.gap
257 drag.maximumX: row.width - slider.width - priv.gap
260 if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
261 slider.x = priv.halfWay
263 if (slider.x === drag.minimumX) {
264 slider.x = drag.minimumX
268 if (slider.x === drag.maximumX) {
269 slider.x = drag.maximumX