git.iko.soy/unity8
on xenial help sign in
Fully implemented all required visual features for the swipe-to-act widget.
b78761eMirco Müller
qml/Notifications/SwipeToAct.qml+255−90
compare with xenial
unifiedsplit
@@ -1,119 +1,284 @@
1import QtQuick 2.0
1import QtQuick 2.0
2import Ubuntu.Components 1.1
2import Ubuntu.Components 1.1
3+import QtGraphicalEffects 1.0
3
4
4Item {
5Item {
5 id: swipeToAct
6 id: swipeToAct
6
7
7− width: parent.width
8+ width: parent.width
8− height: childrenRect.height
9+ height: childrenRect.height
9−
10− property alias leftText: leftLabel.text
11− property alias rightText: rightLabel.text
12
10
13 signal leftTriggered()
11 signal leftTriggered()
14 signal rightTriggered()
12 signal rightTriggered()
15
13
16− readonly property double redH: 0.991
14+ readonly property double sliderHeight: 6
17− readonly property double redS: 0.892
15+ readonly property double gap: units.gu(1)
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
16+ readonly property double halfWay: mouseArea.drag.maximumX / 2
22− readonly property double sliderHeight: 4
23− readonly property color lightGrey: "#eaeaea"
24− readonly property color black: "#000000"
25− readonly property color textColor: "#ffffff"
26
17
27− Row {
18+ Rectangle {
28− id: row
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+ }
29
37
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"
30 width: parent.width
51 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)
52+ height: units.gu(sliderHeight)
41− Label {
53+ borderSource: "none"
42− id: leftLabel
54+ visible: false
43−
44− anchors.centerIn: parent
45− color: textColor
46− fontSize: "medium"
47− }
48− }
55+ }
49
56
50− UbuntuShape {
57+ ShaderEffectSource {
51− id: slider
58+ id: effectSourceMask
59+ sourceItem: mask
60+ width: mask.width
61+ height: mask.height
62+ visible: false
63+ hideSource: true
64+ }
52
65
53− Behavior on x {
66+ ShaderEffect {
54− id: xBehavior
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+ }"
55
89
56− UbuntuNumberAnimation {
90+ Row {
57− duration: UbuntuAnimation.FastDuration
91+ id: row
58− easing.type: Easing.OutBounce
92+ anchors.fill: parent
59− }
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
60− }
150+ }
61
151
62− onXChanged: {
152+ UbuntuShape {
63− if (x === 0.0) {
153+ id: slider
64− rightTriggered()
154+
155+ Behavior on x {
156+ id: xBehavior
157+
158+ UbuntuNumberAnimation {
159+ duration: UbuntuAnimation.FastDuration
160+ easing.type: Easing.OutBounce
161+ }
65 }
162 }
163+
164+ onXChanged: {
165+ if (x === 0.0) {
166+ leftTriggered()
167+ }
66− if (x === row.width - slider.width) {
168+ if (x === row.width - slider.width) {
67− leftTriggered()
169+ rightTriggered()
170+ }
68 }
171 }
69− }
70
172
71− color: lightGrey
72− x: (row.width - slider.width) / 2
73− width: units.gu(7)
74− height: units.gu(sliderHeight)
75− z: 1
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
76− }
203+ }
77
204
78− UbuntuShape {
205+ UbuntuShape {
79− id: rightShape
206+ id: rightShape
80−
207+ states: [
81− property double scale: width / ((row.width - slider.width) / 2)
208+ State {
82− color: Qt.hsla(greenH, greenS * (scale < 1.0 ? scale : 1.0), greenL, 1.0)
209+ name: "normal"
83− opacity: scale < 1.0 ? scale : 1.0
210+ PropertyChanges {
84− x: slider.x + slider.width
211+ target: rightShape
85− width: row.width - (leftShape.width + slider.width)
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)
86− height: units.gu(sliderHeight)
243+ height: parent.height - units.gu(.5)
87− Label {
244+ }
88− id: rightLabel
245+ Icon {
89−
90− anchors.centerIn: parent
246+ anchors.centerIn: parent
91− color: textColor
247+ width: units.gu(2)
92− fontSize: "medium"
248+ height: units.gu(2)
249+ name: "call-start"
250+ color: "white"
251+ }
93− }
252+ }
94 }
253 }
95− }
96
254
97− MouseArea {
255+ MouseArea {
98− id: mouseArea
256+ id: mouseArea
99
257
100− anchors.fill: row
258+ anchors.fill: row
101− drag.target: slider
259+ drag.target: slider
102− drag.axis: Drag.XAxis
260+ drag.axis: Drag.XAxis
103− drag.minimumX: 0
261+ drag.minimumX: 0
104− drag.maximumX: row.width - slider.width
262+ drag.maximumX: row.width - slider.width
105
263
106− onReleased: {
264+ onReleased: {
107− if (slider.x !== 0 || slider.x !== row.width - slider.width) {
265+ if (slider.x !== drag.minimumX || slider.x !== drag.maximumX) {
108− slider.x = (row.width - slider.width) / 2
266+ slider.x = halfWay
109− }
267+ }
110− if (slider.x < units.gu(.5)) {
268+ if (slider.x === drag.minimumX) {
111− slider.x = 0
269+ slider.x = drag.minimumX
270+ slider.opacity = 0
271+ visible = false
272+ leftShape.state = "selected"
112− }
273+ }
113− if (slider.x > row.width - slider.width - units.gu(.5)) {
274+ if (slider.x === drag.maximumX) {
114− slider.x = row.width - slider.width
275+ slider.x = drag.maximumX
276+ slider.opacity = 0
277+ visible = false
278+ rightShape.state = "selected"
279+ }
115 }
280 }
116− }
281+ }
117 }
282 }
118}
283}
119
284