@@ -20,7 +20,6 @@ import Ubuntu.Components 1.1
2020Item {
2121 id: swipeToAct
2222
23− width: parent.width
2423 height: childrenRect.height
2524
2625 signal leftTriggered()
@@ -28,221 +27,214 @@ Item {
2827
2928 property string leftIconName
3029 property string rightIconName
31− property double opacityDelta
32− readonly property double sliderHeight: units.gu(8)
33− readonly property double gap: units.gu(1)
34− readonly property color sliderMainColor: "#b2b2b2"
35− readonly property color sliderBGColor: "#f4f4f4"
36− readonly property double halfWay: mouseArea.drag.maximumX / 2
37−
38− // linearly interpolate between start- and end-color
39− // with a normalized weight-factor
40− // 0.0 meaning just the start-color being taken into
41− // account and 1.0 only taking the end-color into
42− // account
43− function interpolate(start, end, factor) {
44− var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r
45− var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g
46− var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b
47− var adiff = start.a > end.a ? end.a - start.a : end.a - start.a
48− var r = start.r + factor * rdiff
49− var g = start.g + factor * gdiff
50− var b = start.b + factor * bdiff
51− var a = start.a + factor * adiff
52− return Qt.rgba(r,g,b,a)
53− }
5430
55− UbuntuNumberAnimation on opacityDelta {
56− from: 0
57− to: .5
58− loops: Animation.Infinite
59− duration: UbuntuAnimation.SleepyDuration
60− easing.type: Easing.Linear
31+ QtObject {
32+ id: priv
33+
34+ property double opacityDelta
35+ readonly property double sliderHeight: units.gu(8)
36+ readonly property double gap: units.gu(1)
37+ readonly property color sliderMainColor: "#b2b2b2"
38+ readonly property color sliderBGColor: "#f4f4f4"
39+ readonly property double halfWay: mouseArea.drag.maximumX / 2
40+
41+ UbuntuNumberAnimation on opacityDelta {
42+ from: 0
43+ to: .5
44+ loops: Animation.Infinite
45+ duration: UbuntuAnimation.SleepyDuration
46+ easing.type: Easing.Linear
47+ }
48+
49+ // linearly interpolate between start- and end-color
50+ // with a normalized weight-factor
51+ // 0.0 meaning just the start-color being taken into
52+ // account and 1.0 only taking the end-color into
53+ // account
54+ function interpolate(start, end, factor) {
55+ var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r
56+ var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g
57+ var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b
58+ var adiff = start.a > end.a ? end.a - start.a : end.a - start.a
59+ var r = start.r + factor * rdiff
60+ var g = start.g + factor * gdiff
61+ var b = start.b + factor * bdiff
62+ var a = start.a + factor * adiff
63+ return Qt.rgba(r,g,b,a)
64+ }
6165 }
6266
6367 UbuntuShape {
6468 id: row
6569 width: parent.width
66− height: sliderHeight
67− color: sliderBGColor
70+ height: priv.sliderHeight
71+ color: priv.sliderBGColor
6872 borderSource: "none"
6973
70− UbuntuShape {
71− id: leftShape
72− anchors.top: parent.top
73− anchors.left: parent.left
74− anchors.margins: gap
75− color: UbuntuColors.red
76− borderSource: "none"
77−
78− state: "normal"
79− height: units.gu(6)
80− width: units.gu(6)
81− radius: "medium"
82− opacity: slider.x <= halfWay ? 1.0 : 1.0 - ((slider.x - halfWay) / halfWay)
83− UbuntuShape {
84− id: innerLeftShape
85− anchors.centerIn: parent
86− borderSource: "none"
87− width: parent.width - units.gu(.5)
88− height: parent.height - units.gu(.5)
89− }
90− Icon {
91− anchors.centerIn: parent
92− width: units.gu(3.5)
93− height: units.gu(3.5)
94− name: leftIconName
95− color: "white"
96− }
74+ UbuntuShape {
75+ id: leftShape
76+ anchors.top: parent.top
77+ anchors.left: parent.left
78+ anchors.margins: priv.gap
79+ color: UbuntuColors.red
80+ borderSource: "none"
81+
82+ state: "normal"
83+ height: units.gu(6)
84+ width: units.gu(6)
85+ radius: "medium"
86+ opacity: slider.x <= priv.halfWay ? 1.0 : 1.0 - ((slider.x - priv.halfWay) / priv.halfWay)
87+
88+ Icon {
89+ anchors.centerIn: parent
90+ width: units.gu(3.5)
91+ height: units.gu(3.5)
92+ name: leftIconName
93+ color: "white"
9794 }
95+ }
9896
99− Row {
100− anchors.verticalCenter: parent.verticalCenter
101− anchors.right: slider.left
102− anchors.rightMargin: units.gu(1.5)
103− spacing: -units.gu(1)
104− visible: slider.x === halfWay
105− Icon {
106− name: "back"
107− height: units.gu(2.5)
108− color: sliderMainColor
109− opacity: .5 + opacityDelta
110− }
111− Icon {
112− name: "back"
113− height: units.gu(2.5)
114− color: sliderMainColor
115− opacity: 1 - opacityDelta
116− }
97+ Row {
98+ anchors.verticalCenter: parent.verticalCenter
99+ anchors.right: slider.left
100+ anchors.rightMargin: units.gu(1.5)
101+ spacing: -units.gu(1)
102+ visible: slider.x === priv.halfWay
103+ Icon {
104+ name: "back"
105+ height: units.gu(2.5)
106+ color: priv.sliderMainColor
107+ opacity: .5 + priv.opacityDelta
108+ }
109+ Icon {
110+ name: "back"
111+ height: units.gu(2.5)
112+ color: priv.sliderMainColor
113+ opacity: 1 - priv.opacityDelta
117114 }
115+ }
118116
119− UbuntuShape {
120− id: slider
121− objectName: "slider"
122− anchors.top: parent.top
123− anchors.margins: gap
124− x: halfWay
117+ UbuntuShape {
118+ id: slider
119+ objectName: "slider"
120+ anchors.top: parent.top
121+ anchors.margins: priv.gap
122+ x: priv.halfWay
125123
126− Component.onCompleted: {
127− xBehavior.enabled = true
128− }
124+ Component.onCompleted: {
125+ xBehavior.enabled = true
126+ }
129127
130− Behavior on x {
131− id: xBehavior
132− enabled: false
133− UbuntuNumberAnimation {
134− duration: UbuntuAnimation.FastDuration
135− easing.type: Easing.OutBounce
136− }
128+ Behavior on x {
129+ id: xBehavior
130+ enabled: false
131+ UbuntuNumberAnimation {
132+ duration: UbuntuAnimation.FastDuration
133+ easing.type: Easing.OutBounce
137134 }
135+ }
138136
139− Behavior on opacity {
140− UbuntuNumberAnimation {
141− duration: UbuntuAnimation.FastDuration
142− }
137+ Behavior on opacity {
138+ UbuntuNumberAnimation {
139+ duration: UbuntuAnimation.FastDuration
143140 }
141+ }
144142
145− onXChanged: {
146− var factor
147− if (slider.x <= gap + leftShape.width)
148− {
149− factor = (slider.x - gap) / leftShape.width
150− slider.color = interpolate(leftShape.color, sliderMainColor, factor)
151− } else if (slider.x >= rightShape.x - slider.width) {
152− factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width
153− slider.color = interpolate(sliderMainColor, rightShape.color, factor)
154− } else {
155− slider.color = sliderMainColor
156− }
143+ onXChanged: {
144+ var factor
145+ if (slider.x <= priv.gap + leftShape.width)
146+ {
147+ factor = (slider.x - priv.gap) / leftShape.width
148+ slider.color = priv.interpolate(leftShape.color, priv.sliderMainColor, factor)
149+ } else if (slider.x >= rightShape.x - slider.width) {
150+ factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width
151+ slider.color = priv.interpolate(priv.sliderMainColor, rightShape.color, factor)
152+ } else {
153+ slider.color = priv.sliderMainColor
157154 }
155+ }
158156
159− z: 1
160− color: sliderMainColor
161− height: units.gu(6)
162− width: units.gu(6)
163− borderSource: "none"
164− radius: "medium"
165− Icon {
166− anchors.fill: parent
167− anchors.margins: units.gu(1.5)
168− source: "grip-large.svg"
169− color: "white"
170− }
157+ z: 1
158+ color: priv.sliderMainColor
159+ height: units.gu(6)
160+ width: units.gu(6)
161+ borderSource: "none"
162+ radius: "medium"
163+ Icon {
164+ anchors.fill: parent
165+ anchors.margins: units.gu(1.5)
166+ source: "grip-large.svg"
167+ color: "white"
171168 }
172− Row {
173− anchors.verticalCenter: parent.verticalCenter
174− anchors.left: slider.right
175− anchors.leftMargin: units.gu(1.5)
176− spacing: -units.gu(1)
177− visible: slider.x === halfWay
178− Icon {
179− name: "next"
180− height: units.gu(2.5)
181− color: sliderMainColor
182− opacity: 1 - opacityDelta
183− }
184− Icon {
185− name: "next"
186− height: units.gu(2.5)
187− color: sliderMainColor
188− opacity: 0.5 + opacityDelta
189− }
169+ }
170+ Row {
171+ anchors.verticalCenter: parent.verticalCenter
172+ anchors.left: slider.right
173+ anchors.leftMargin: units.gu(1.5)
174+ spacing: -units.gu(1)
175+ visible: slider.x === priv.halfWay
176+ Icon {
177+ name: "next"
178+ height: units.gu(2.5)
179+ color: priv.sliderMainColor
180+ opacity: 1 - priv.opacityDelta
190181 }
182+ Icon {
183+ name: "next"
184+ height: units.gu(2.5)
185+ color: priv.sliderMainColor
186+ opacity: 0.5 + priv.opacityDelta
187+ }
188+ }
191189
192− UbuntuShape {
193− id: rightShape
194− anchors.top: parent.top
195− anchors.right: parent.right
196− anchors.margins: gap
197− color: UbuntuColors.green
198− borderSource: "none"
199−
200− state: "normal"
201− height: units.gu(6)
202− width: units.gu(6)
203− radius: "medium"
204− opacity: slider.x >= halfWay ? 1.0 : slider.x / halfWay
205− UbuntuShape {
206− id: innerRightShape
207− anchors.centerIn: parent
208− borderSource: "none"
209− width: parent.width - units.gu(.5)
210− height: parent.height - units.gu(.5)
211− }
212− Icon {
213− anchors.centerIn: parent
214− width: units.gu(3.5)
215− height: units.gu(3.5)
216− name: rightIconName
217− color: "white"
218− }
190+ UbuntuShape {
191+ id: rightShape
192+ anchors.top: parent.top
193+ anchors.right: parent.right
194+ anchors.margins: priv.gap
195+ color: UbuntuColors.green
196+ borderSource: "none"
197+
198+ state: "normal"
199+ height: units.gu(6)
200+ width: units.gu(6)
201+ radius: "medium"
202+ opacity: slider.x >= priv.halfWay ? 1.0 : slider.x / priv.halfWay
203+
204+ Icon {
205+ anchors.centerIn: parent
206+ width: units.gu(3.5)
207+ height: units.gu(3.5)
208+ name: rightIconName
209+ color: "white"
219210 }
220211 }
212+ }
221213
222− MouseArea {
223− id: mouseArea
224− objectName: "swipeMouseArea"
214+ MouseArea {
215+ id: mouseArea
216+ objectName: "swipeMouseArea"
225217
226− anchors.fill: row
227− drag.target: slider
228− drag.axis: Drag.XAxis
229− drag.minimumX: gap
230− drag.maximumX: row.width - slider.width - gap
218+ anchors.fill: row
219+ drag.target: slider
220+ drag.axis: Drag.XAxis
221+ drag.minimumX: priv.gap
222+ drag.maximumX: row.width - slider.width - priv.gap
231223
232− onReleased: {
233− if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
234− slider.x = halfWay
235− }
236− if (slider.x === drag.minimumX) {
237− slider.x = drag.minimumX
238− enabled = false
239− leftTriggered()
240− }
241− if (slider.x === drag.maximumX) {
242− slider.x = drag.maximumX
243− enabled = false
244− rightTriggered()
245− }
224+ onReleased: {
225+ if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
226+ slider.x = priv.halfWay
246227 }
228+ if (slider.x === drag.minimumX) {
229+ slider.x = drag.minimumX
230+ enabled = false
231+ leftTriggered()
232+ }
233+ if (slider.x === drag.maximumX) {
234+ slider.x = drag.maximumX
235+ enabled = false
236+ rightTriggered()
237+ }
238+ }
247239 }
248240}