@@ -1,119 +1,284 @@
11import QtQuick 2.0
22import Ubuntu.Components 1.1
3+import QtGraphicalEffects 1.0
34
45Item {
56 id: swipeToAct
67
7− width: parent.width
8− height: childrenRect.height
9−
10− property alias leftText: leftLabel.text
11− property alias rightText: rightLabel.text
8+ width: parent.width
9+ height: childrenRect.height
1210
1311 signal leftTriggered()
1412 signal rightTriggered()
1513
16− readonly property double redH: 0.991
17− readonly property double redS: 0.892
18− readonly property double redL: 0.563
19− readonly property double greenH: 0.386
20− readonly property double greenS: 1.0
21− readonly property double greenL: 0.316
22− readonly property double sliderHeight: 4
23− readonly property color lightGrey: "#eaeaea"
24− readonly property color black: "#000000"
25− readonly property color textColor: "#ffffff"
14+ readonly property double sliderHeight: 6
15+ readonly property double gap: units.gu(1)
16+ readonly property double halfWay: mouseArea.drag.maximumX / 2
2617
27− Row {
28− id: row
18+ Rectangle {
19+ id: gradient
20+ width: parent.width * 5
21+ height: units.gu(sliderHeight)
22+ visible: false
23+ LinearGradient {
24+ anchors.fill: parent
25+ start: Qt.point(parent.x, parent.y)
26+ end: Qt.point(parent.width, parent.y)
27+ gradient: Gradient {
28+ GradientStop { position: 0.0; color: UbuntuColors.red }
29+ GradientStop { position: 0.2; color: UbuntuColors.red }
30+ GradientStop { position: 0.4; color: "#dddddd" }
31+ GradientStop { position: 0.6; color: "#dddddd" }
32+ GradientStop { position: 0.8; color: UbuntuColors.green }
33+ GradientStop { position: 1.0; color: UbuntuColors.green }
34+ }
35+ }
36+ }
2937
38+ ShaderEffectSource {
39+ id: effectSourceGradient
40+ sourceItem: gradient
41+ width: gradient.width
42+ height: gradient.height
43+ sourceRect: Qt.rect(0.4 * gradient.width * (slider.x / halfWay), 0, mask.width, mask.height)
44+ visible: false
45+ hideSource: true
46+ }
47+
48+ UbuntuShape {
49+ id: mask
50+ color: "black"
3051 width: parent.width
31− clip: true
32−
33− UbuntuShape {
34− id: leftShape
35−
36− property double scale: width / ((row.width - slider.width) / 2)
37− color: Qt.hsla(redH, redS * (scale < 1.0 ? scale : 1.0), redL, 1.0)
38− opacity: scale < 1.0 ? scale : 1.0
39− width: slider.x
40− height: units.gu(sliderHeight)
41− Label {
42− id: leftLabel
43−
44− anchors.centerIn: parent
45− color: textColor
46− fontSize: "medium"
47− }
48− }
52+ height: units.gu(sliderHeight)
53+ borderSource: "none"
54+ visible: false
55+ }
4956
50− UbuntuShape {
51− id: slider
57+ ShaderEffectSource {
58+ id: effectSourceMask
59+ sourceItem: mask
60+ width: mask.width
61+ height: mask.height
62+ visible: false
63+ hideSource: true
64+ }
5265
53− Behavior on x {
54− id: xBehavior
66+ ShaderEffect {
67+ width: parent.width
68+ height: units.gu(sliderHeight)
69+ property variant mask: effectSourceMask
70+ property variant gradient: effectSourceGradient
71+ vertexShader: "
72+ uniform highp mat4 qt_Matrix;
73+ attribute highp vec4 qt_Vertex;
74+ attribute highp vec2 qt_MultiTexCoord0;
75+ varying highp vec2 coord;
76+ void main() {
77+ coord = qt_MultiTexCoord0;
78+ gl_Position = qt_Matrix * qt_Vertex;
79+ }"
80+ fragmentShader: "
81+ varying highp vec2 coord;
82+ uniform sampler2D mask;
83+ uniform sampler2D gradient;
84+ void main() {
85+ lowp vec4 texMask = texture2D(mask, coord);
86+ lowp vec4 texGradient = texture2D(gradient, coord);
87+ gl_FragColor = texGradient.rgba * texMask.a ;
88+ }"
5589
56− UbuntuNumberAnimation {
57− duration: UbuntuAnimation.FastDuration
58− easing.type: Easing.OutBounce
59− }
60− }
90+ Row {
91+ id: row
92+ anchors.fill: parent
93+ spacing: gap
94+ anchors.margins: gap
95+
96+ UbuntuShape {
97+ id: leftShape
98+ states: [
99+ State {
100+ name: "normal"
101+ PropertyChanges {
102+ target: leftShape
103+ color: UbuntuColors.red
104+ }
105+ PropertyChanges {
106+ target: innerLeftShape
107+ color: UbuntuColors.red
108+ visible: false
109+ }
110+ },
111+ State {
112+ name: "selected"
113+ PropertyChanges {
114+ target: leftShape
115+ color: "white"
116+ }
117+ PropertyChanges {
118+ target: innerLeftShape
119+ color: UbuntuColors.red
120+ visible: true
121+ }
122+ }
123+ ]
124+ state: "normal"
125+ height: units.gu(4)
126+ width: units.gu(7)
127+ borderSource: "none"
128+ opacity: slider.x <= halfWay ? 1.0 : 1.0 - ((slider.x - halfWay) / halfWay)
129+ UbuntuShape {
130+ id: innerLeftShape
131+ anchors.centerIn: parent
132+ borderSource: "none"
133+ width: parent.width - units.gu(.5)
134+ height: parent.height - units.gu(.5)
135+ }
136+ Icon {
137+ anchors.centerIn: parent
138+ width: units.gu(2)
139+ height: units.gu(2)
140+ name: "call-end"
141+ color: "white"
142+ }
143+ }
144+
145+ Rectangle {
146+ id: leftSpacer
147+ width: (row.width - (leftShape.width + slider.width + rightShape.width + 4 * row.spacing)) / 2
148+ height: units.gu(4)
149+ opacity: 0
150+ }
61151
62− onXChanged: {
63− if (x === 0.0) {
64− rightTriggered()
152+ UbuntuShape {
153+ id: slider
154+
155+ Behavior on x {
156+ id: xBehavior
157+
158+ UbuntuNumberAnimation {
159+ duration: UbuntuAnimation.FastDuration
160+ easing.type: Easing.OutBounce
161+ }
65162 }
66− if (x === row.width - slider.width) {
67− leftTriggered()
163+
164+ onXChanged: {
165+ if (x === 0.0) {
166+ leftTriggered()
167+ }
168+ if (x === row.width - slider.width) {
169+ rightTriggered()
170+ }
68171 }
69− }
70172
71− color: lightGrey
72− x: (row.width - slider.width) / 2
73− width: units.gu(7)
74− height: units.gu(sliderHeight)
75− z: 1
76− }
173+ z: 1
174+ color: "white"
175+ height: units.gu(4)
176+ width: units.gu(7)
177+ borderSource: "none"
178+ Row {
179+ anchors.fill: parent
180+ spacing: 2 * gap
181+ anchors.leftMargin: units.gu(.5)
182+ anchors.rightMargin: units.gu(.5)
183+ Icon {
184+ anchors.verticalCenter: parent.verticalCenter
185+ name: "back"
186+ width: units.gu(2)
187+ height: units.gu(2)
188+ }
189+ Icon {
190+ anchors.verticalCenter: parent.verticalCenter
191+ name: "next"
192+ width: units.gu(2)
193+ height: units.gu(2)
194+ }
195+ }
196+ }
197+
198+ Rectangle {
199+ id: rightSpacer
200+ width: leftSpacer.width
201+ height: units.gu(4)
202+ opacity: 0
203+ }
77204
78− UbuntuShape {
79− id: rightShape
80−
81− property double scale: width / ((row.width - slider.width) / 2)
82− color: Qt.hsla(greenH, greenS * (scale < 1.0 ? scale : 1.0), greenL, 1.0)
83− opacity: scale < 1.0 ? scale : 1.0
84− x: slider.x + slider.width
85− width: row.width - (leftShape.width + slider.width)
86− height: units.gu(sliderHeight)
87− Label {
88− id: rightLabel
89−
90− anchors.centerIn: parent
91− color: textColor
92− fontSize: "medium"
93− }
205+ UbuntuShape {
206+ id: rightShape
207+ states: [
208+ State {
209+ name: "normal"
210+ PropertyChanges {
211+ target: rightShape
212+ color: UbuntuColors.green
213+ }
214+ PropertyChanges {
215+ target: innerRightShape
216+ color: UbuntuColors.green
217+ visible: false
218+ }
219+ },
220+ State {
221+ name: "selected"
222+ PropertyChanges {
223+ target: rightShape
224+ color: "white"
225+ }
226+ PropertyChanges {
227+ target: innerRightShape
228+ color: UbuntuColors.green
229+ visible: true
230+ }
231+ }
232+ ]
233+ state: "normal"
234+ height: units.gu(4)
235+ width: units.gu(7)
236+ borderSource: "none"
237+ opacity: slider.x >= halfWay ? 1.0 : slider.x / halfWay
238+ UbuntuShape {
239+ id: innerRightShape
240+ anchors.centerIn: parent
241+ borderSource: "none"
242+ width: parent.width - units.gu(.5)
243+ height: parent.height - units.gu(.5)
244+ }
245+ Icon {
246+ anchors.centerIn: parent
247+ width: units.gu(2)
248+ height: units.gu(2)
249+ name: "call-start"
250+ color: "white"
251+ }
252+ }
94253 }
95− }
96254
97− MouseArea {
98− id: mouseArea
255+ MouseArea {
256+ id: mouseArea
99257
100− anchors.fill: row
101− drag.target: slider
102− drag.axis: Drag.XAxis
103− drag.minimumX: 0
104− drag.maximumX: row.width - slider.width
258+ anchors.fill: row
259+ drag.target: slider
260+ drag.axis: Drag.XAxis
261+ drag.minimumX: 0
262+ drag.maximumX: row.width - slider.width
105263
106− onReleased: {
107− if (slider.x !== 0 || slider.x !== row.width - slider.width) {
108− slider.x = (row.width - slider.width) / 2
109− }
110− if (slider.x < units.gu(.5)) {
111− slider.x = 0
112− }
113− if (slider.x > row.width - slider.width - units.gu(.5)) {
114− slider.x = row.width - slider.width
264+ onReleased: {
265+ if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
266+ slider.x = halfWay
267+ }
268+ if (slider.x === drag.minimumX) {
269+ slider.x = drag.minimumX
270+ slider.opacity = 0
271+ visible = false
272+ leftShape.state = "selected"
273+ }
274+ if (slider.x === drag.maximumX) {
275+ slider.x = drag.maximumX
276+ slider.opacity = 0
277+ visible = false
278+ rightShape.state = "selected"
279+ }
115280 }
116− }
281+ }
117282 }
118283}
119284