git.iko.soy/unity8
on xenial help sign in
Added first iteration of blinking arrows as visual clues for the user.
5d17a09Mirco Müller
qml/Notifications/SwipeToAct.qml+73−19
compare with xenial
unifiedsplit
@@ -16,7 +16,6 @@
16
16
17import QtQuick 2.3
17import QtQuick 2.3
18import Ubuntu.Components 1.1
18import Ubuntu.Components 1.1
19−import QtGraphicalEffects 1.0
20
19
21Item {
20Item {
22 id: swipeToAct
21 id: swipeToAct
@@ -34,18 +33,17 @@ Item {
34 readonly property double halfWay: mouseArea.drag.maximumX / 2
33 readonly property double halfWay: mouseArea.drag.maximumX / 2
35
34
36 UbuntuShape {
35 UbuntuShape {
36+ id: row
37 width: parent.width
37 width: parent.width
38 height: sliderHeight
38 height: sliderHeight
39 color: "#f4f4f4"
39 color: "#f4f4f4"
40
40
41− Row {
42− id: row
43− anchors.fill: parent
44− spacing: gap
45− anchors.margins: gap
46−
47 UbuntuShape {
41 UbuntuShape {
48 id: leftShape
42 id: leftShape
43+ anchors.top: parent.top
44+ anchors.left: parent.left
45+ anchors.margins: gap
46+
49 states: [
47 states: [
50 State {
48 State {
51 name: "normal"
49 name: "normal"
@@ -93,16 +91,46 @@ Item {
93 }
91 }
94 }
92 }
95
93
96− Rectangle {
94+ Row {
97− id: leftSpacer
95+ anchors.verticalCenter: parent.verticalCenter
98− width: (row.width - (leftShape.width + slider.width + rightShape.width + 4 * row.spacing)) / 2
96+ anchors.right: slider.left
97+ anchors.rightMargin: units.gu(1.5)
98+ spacing: -units.gu(1)
99+ Icon {
100+ name: "back"
101+ height: units.gu(2.5)
102+ color: "#b2b2b2"
103+ UbuntuNumberAnimation on opacity {
104+ from: .5
105+ to: 1
106+ loops: Animation.Infinite
107+ duration: UbuntuAnimation.SleepyDuration
108+ easing.type: Easing.Linear
109+ }
110+ }
111+ Icon {
112+ name: "back"
99− height: units.gu(4)
113+ height: units.gu(2.5)
100− opacity: 0
114+ color: "#b2b2b2"
115+ UbuntuNumberAnimation on opacity {
116+ from: 1
117+ to: .5
118+ loops: Animation.Infinite
119+ duration: UbuntuAnimation.SleepyDuration
120+ easing.type: Easing.Linear
121+ }
122+ }
101 }
123 }
102
124
103 UbuntuShape {
125 UbuntuShape {
104 id: slider
126 id: slider
105 objectName: "slider"
127 objectName: "slider"
128+ anchors.top: parent.top
129+ anchors.margins: gap
130+
131+ Component.onCompleted: {
132+ x = halfWay
133+ }
106
134
107 Behavior on x {
135 Behavior on x {
108 UbuntuNumberAnimation {
136 UbuntuNumberAnimation {
@@ -141,16 +169,43 @@ Item {
141 color: "white"
169 color: "white"
142 }
170 }
143 }
171 }
144−
172+ Row {
145− Rectangle {
173+ anchors.verticalCenter: parent.verticalCenter
146− id: rightSpacer
174+ anchors.left: slider.right
147− width: leftSpacer.width
175+ anchors.leftMargin: units.gu(1.5)
176+ spacing: -units.gu(1)
177+ Icon {
178+ name: "next"
148− height: units.gu(4)
179+ height: units.gu(2.5)
149− opacity: 0
180+ color: "#b2b2b2"
181+ UbuntuNumberAnimation on opacity {
182+ from: 1
183+ to: .5
184+ loops: Animation.Infinite
185+ duration: UbuntuAnimation.SleepyDuration
186+ easing.type: Easing.Linear
187+ }
188+ }
189+ Icon {
190+ name: "next"
191+ height: units.gu(2.5)
192+ color: "#b2b2b2"
193+ UbuntuNumberAnimation on opacity {
194+ from: .5
195+ to: 1
196+ loops: Animation.Infinite
197+ duration: UbuntuAnimation.SleepyDuration
198+ easing.type: Easing.Linear
199+ }
200+ }
150 }
201 }
151
202
152 UbuntuShape {
203 UbuntuShape {
153 id: rightShape
204 id: rightShape
205+ anchors.top: parent.top
206+ anchors.right: parent.right
207+ anchors.margins: gap
208+
154 states: [
209 states: [
155 State {
210 State {
156 name: "normal"
211 name: "normal"
@@ -226,6 +281,5 @@ Item {
226 rightShape.state = "selected"
281 rightShape.state = "selected"
227 }
282 }
228 }
283 }
229− }
230 }
284 }
231}
285}