git.iko.soy/unity8
on xenial help sign in
Stripped some more obsolete code... made the slider pick up the target-icon's color gradually.
c45645aMirco Müller
qml/Notifications/SwipeToAct.qml+37−66
compare with xenial
unifiedsplit
@@ -30,8 +30,26 @@ Item {
30 property string rightIconName
30 property string rightIconName
31 readonly property double sliderHeight: units.gu(8)
31 readonly property double sliderHeight: units.gu(8)
32 readonly property double gap: units.gu(1)
32 readonly property double gap: units.gu(1)
33+ readonly property color sliderDefault: "#b2b2b2"
33 readonly property double halfWay: mouseArea.drag.maximumX / 2
34 readonly property double halfWay: mouseArea.drag.maximumX / 2
34
35
36+ // linearly interpolate between start- and end-color
37+ // with a normalized weight-factor
38+ // 0.0 meaning just the start-color being taken into
39+ // account and 1.0 only taking the end-color into
40+ // account
41+ function interpolate(start, end, factor) {
42+ var rdiff = start.r > end.r ? end.r - start.r : end.r - start.r
43+ var gdiff = start.g > end.g ? end.g - start.g : end.g - start.g
44+ var bdiff = start.b > end.b ? end.b - start.b : end.b - start.b
45+ var adiff = start.a > end.a ? end.a - start.a : end.a - start.a
46+ var r = start.r + factor * rdiff
47+ var g = start.g + factor * gdiff
48+ var b = start.b + factor * bdiff
49+ var a = start.a + factor * adiff
50+ return Qt.rgba(r,g,b,a)
51+ }
52+
35 UbuntuShape {
53 UbuntuShape {
36 id: row
54 id: row
37 width: parent.width
55 width: parent.width
@@ -43,33 +61,8 @@ Item {
43 anchors.top: parent.top
61 anchors.top: parent.top
44 anchors.left: parent.left
62 anchors.left: parent.left
45 anchors.margins: gap
63 anchors.margins: gap
64+ color: "#df382c" //UbuntuColors.red
46
65
47− states: [
48− State {
49− name: "normal"
50− PropertyChanges {
51− target: leftShape
52− color: "#df382c" //UbuntuColors.red
53− }
54− PropertyChanges {
55− target: innerLeftShape
56− color: "#df382c" //UbuntuColors.red
57− visible: false
58− }
59− },
60− State {
61− name: "selected"
62− PropertyChanges {
63− target: leftShape
64− color: "white"
65− }
66− PropertyChanges {
67− target: innerLeftShape
68− color: "#df382c" //UbuntuColors.red
69− visible: true
70− }
71− }
72− ]
73 state: "normal"
66 state: "normal"
74 height: units.gu(6)
67 height: units.gu(6)
75 width: units.gu(6)
68 width: units.gu(6)
@@ -96,6 +89,7 @@ Item {
96 anchors.right: slider.left
89 anchors.right: slider.left
97 anchors.rightMargin: units.gu(1.5)
90 anchors.rightMargin: units.gu(1.5)
98 spacing: -units.gu(1)
91 spacing: -units.gu(1)
92+ visible: slider.x === halfWay
99 Icon {
93 Icon {
100 name: "back"
94 name: "back"
101 height: units.gu(2.5)
95 height: units.gu(2.5)
@@ -145,14 +139,17 @@ Item {
145 }
139 }
146 }
140 }
147
141
148− onOpacityChanged: {
142+ onXChanged: {
149− if (opacity === 0) {
143+ var factor
150− if (rightShape.state === "selected") {
144+ if (slider.x <= gap + leftShape.width)
151− rightTriggered()
145+ {
152− }
146+ factor = (slider.x - gap) / leftShape.width
153− if (leftShape.state === "selected") {
147+ slider.color = interpolate(leftShape.color, sliderDefault, factor)
154− leftTriggered()
148+ } else if (slider.x >= rightShape.x - slider.width) {
155− }
149+ factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width
150+ slider.color = interpolate(sliderDefault, rightShape.color, factor)
151+ } else {
152+ slider.color = "#b2b2b2"
156 }
153 }
157 }
154 }
158
155
@@ -174,6 +171,7 @@ Item {
174 anchors.left: slider.right
171 anchors.left: slider.right
175 anchors.leftMargin: units.gu(1.5)
172 anchors.leftMargin: units.gu(1.5)
176 spacing: -units.gu(1)
173 spacing: -units.gu(1)
174+ visible: slider.x === halfWay
177 Icon {
175 Icon {
178 name: "next"
176 name: "next"
179 height: units.gu(2.5)
177 height: units.gu(2.5)
@@ -205,33 +203,8 @@ Item {
205 anchors.top: parent.top
203 anchors.top: parent.top
206 anchors.right: parent.right
204 anchors.right: parent.right
207 anchors.margins: gap
205 anchors.margins: gap
206+ color: "#38b44a" // UbuntuColors.green
208
207
209− states: [
210− State {
211− name: "normal"
212− PropertyChanges {
213− target: rightShape
214− color: "#38b44a" // UbuntuColors.green
215− }
216− PropertyChanges {
217− target: innerRightShape
218− color: "#38b44a" // UbuntuColors.green
219− visible: false
220− }
221− },
222− State {
223− name: "selected"
224− PropertyChanges {
225− target: rightShape
226− color: "white"
227− }
228− PropertyChanges {
229− target: innerRightShape
230− color: "#38b44a" // UbuntuColors.green
231− visible: true
232− }
233− }
234− ]
235 state: "normal"
208 state: "normal"
236 height: units.gu(6)
209 height: units.gu(6)
237 width: units.gu(6)
210 width: units.gu(6)
@@ -261,8 +234,8 @@ Item {
261 anchors.fill: row
234 anchors.fill: row
262 drag.target: slider
235 drag.target: slider
263 drag.axis: Drag.XAxis
236 drag.axis: Drag.XAxis
264− drag.minimumX: 0
237+ drag.minimumX: gap
265− drag.maximumX: row.width - slider.width
238+ drag.maximumX: row.width - slider.width - gap
266
239
267 onReleased: {
240 onReleased: {
268 if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
241 if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
@@ -270,15 +243,13 @@ Item {
270 }
243 }
271 if (slider.x === drag.minimumX) {
244 if (slider.x === drag.minimumX) {
272 slider.x = drag.minimumX
245 slider.x = drag.minimumX
273− slider.opacity = 0
274 enabled = false
246 enabled = false
275− leftShape.state = "selected"
247+ leftTriggered()
276 }
248 }
277 if (slider.x === drag.maximumX) {
249 if (slider.x === drag.maximumX) {
278 slider.x = drag.maximumX
250 slider.x = drag.maximumX
279− slider.opacity = 0
280 enabled = false
251 enabled = false
281− rightShape.state = "selected"
252+ rightTriggered()
282 }
253 }
283 }
254 }
284 }
255 }