@@ -30,8 +30,26 @@ Item {
3030 property string rightIconName
3131 readonly property double sliderHeight: units.gu(8)
3232 readonly property double gap: units.gu(1)
33+ readonly property color sliderDefault: "#b2b2b2"
3334 readonly property double halfWay: mouseArea.drag.maximumX / 2
3435
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+
3553 UbuntuShape {
3654 id: row
3755 width: parent.width
@@ -43,33 +61,8 @@ Item {
4361 anchors.top: parent.top
4462 anchors.left: parent.left
4563 anchors.margins: gap
64+ color: "#df382c" //UbuntuColors.red
4665
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− ]
7366 state: "normal"
7467 height: units.gu(6)
7568 width: units.gu(6)
@@ -96,6 +89,7 @@ Item {
9689 anchors.right: slider.left
9790 anchors.rightMargin: units.gu(1.5)
9891 spacing: -units.gu(1)
92+ visible: slider.x === halfWay
9993 Icon {
10094 name: "back"
10195 height: units.gu(2.5)
@@ -145,14 +139,17 @@ Item {
145139 }
146140 }
147141
148− onOpacityChanged: {
149− if (opacity === 0) {
150− if (rightShape.state === "selected") {
151− rightTriggered()
152− }
153− if (leftShape.state === "selected") {
154− leftTriggered()
155− }
142+ onXChanged: {
143+ var factor
144+ if (slider.x <= gap + leftShape.width)
145+ {
146+ factor = (slider.x - gap) / leftShape.width
147+ slider.color = interpolate(leftShape.color, sliderDefault, factor)
148+ } else if (slider.x >= rightShape.x - slider.width) {
149+ factor = (slider.x - rightShape.x + rightShape.width) / rightShape.width
150+ slider.color = interpolate(sliderDefault, rightShape.color, factor)
151+ } else {
152+ slider.color = "#b2b2b2"
156153 }
157154 }
158155
@@ -174,6 +171,7 @@ Item {
174171 anchors.left: slider.right
175172 anchors.leftMargin: units.gu(1.5)
176173 spacing: -units.gu(1)
174+ visible: slider.x === halfWay
177175 Icon {
178176 name: "next"
179177 height: units.gu(2.5)
@@ -205,33 +203,8 @@ Item {
205203 anchors.top: parent.top
206204 anchors.right: parent.right
207205 anchors.margins: gap
206+ color: "#38b44a" // UbuntuColors.green
208207
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− ]
235208 state: "normal"
236209 height: units.gu(6)
237210 width: units.gu(6)
@@ -261,8 +234,8 @@ Item {
261234 anchors.fill: row
262235 drag.target: slider
263236 drag.axis: Drag.XAxis
264− drag.minimumX: 0
265− drag.maximumX: row.width - slider.width
237+ drag.minimumX: gap
238+ drag.maximumX: row.width - slider.width - gap
266239
267240 onReleased: {
268241 if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
@@ -270,15 +243,13 @@ Item {
270243 }
271244 if (slider.x === drag.minimumX) {
272245 slider.x = drag.minimumX
273− slider.opacity = 0
274246 enabled = false
275− leftShape.state = "selected"
247+ leftTriggered()
276248 }
277249 if (slider.x === drag.maximumX) {
278250 slider.x = drag.maximumX
279− slider.opacity = 0
280251 enabled = false
281− rightShape.state = "selected"
252+ rightTriggered()
282253 }
283254 }
284255 }