git.iko.soy/unity8
on xenial help sign in
first stab at transitions
a64454fLukáš Tinkl
qml/Wizard/Page.qml+73−2
compare with xenial
unifiedsplit
@@ -127,15 +127,15 @@ Item {
127 // page title
127 // page title
128 Label {
128 Label {
129 id: titleLabel
129 id: titleLabel
130+ property real animatedMargin: 0
130 anchors {
131 anchors {
131 left: parent.left
132 left: parent.left
132 right: parent.right
133 right: parent.right
133 bottom: parent.bottom
134 bottom: parent.bottom
134 bottomMargin: bottomMargin
135 bottomMargin: bottomMargin
135− leftMargin: leftMargin
136+ leftMargin: leftMargin + titleLabel.animatedMargin
136 rightMargin: rightMargin
137 rightMargin: rightMargin
137 }
138 }
138− wrapMode: Text.Wrap
139 text: title
139 text: title
140 color: customTitle ? textColor : backgroundColor
140 color: customTitle ? textColor : backgroundColor
141 fontSize: customTitle ? "large" : "x-large"
141 fontSize: customTitle ? "large" : "x-large"
@@ -195,11 +195,13 @@ Item {
195 // content
195 // content
196 Item {
196 Item {
197 id: contentHolder
197 id: contentHolder
198+ property real animatedMargin: 0
198 anchors {
199 anchors {
199 top: titleRect.bottom
200 top: titleRect.bottom
200 left: parent.left
201 left: parent.left
201 right: parent.right
202 right: parent.right
202 bottom: buttonBarVisible ? buttonRect.top : parent.top
203 bottom: buttonBarVisible ? buttonRect.top : parent.top
204+ leftMargin: contentHolder.animatedMargin
203 }
205 }
204 }
206 }
205
207
@@ -247,4 +249,73 @@ Item {
247 z: 1
249 z: 1
248 }
250 }
249 }
251 }
252+
253+ // transitions
254+
255+ function aboutToShow(duration, direction) {
256+ startContentAnimation(duration, direction)
257+ startShowing(duration)
258+ }
259+
260+ function startContentAnimation(duration, direction) {
261+ contentAnimation.animationDurationBase = duration
262+ contentAnimation.direction = direction
263+ contentAnimation.restart()
264+ }
265+
266+ function startShowing(showDuration) {
267+ actionsShowAnimation.showDuration = showDuration
268+ actionsShowAnimation.restart()
269+ }
270+
271+ SequentialAnimation {
272+ id: actionsShowAnimation
273+ property int showDuration: 0
274+ PropertyAction {
275+ target: buttonRect
276+ property: 'opacity'
277+ value: 0
278+ }
279+ PauseAnimation { duration: Math.max(0, actionsShowAnimation.showDuration - UbuntuAnimation.SnapDuration) }
280+ NumberAnimation {
281+ target: buttonRect
282+ property: 'opacity'
283+ to: 1
284+ duration: UbuntuAnimation.SnapDuration
285+ }
286+ }
287+
288+ SequentialAnimation {
289+ id: contentAnimation
290+ property int animationDurationBase: UbuntuAnimation.BriskDuration
291+ readonly property int additionalDuration: 200
292+ property int direction: Qt.LeftToRight
293+ ScriptAction {
294+ script: {
295+ if (contentAnimation.direction === Qt.LeftToRight) {
296+ titleLabel.animatedMargin = -titleRect.width;
297+ content.animatedMargin = -content.width;
298+ } else {
299+ titleLabel.animatedMargin = titleRect.width;
300+ content.animatedMargin = content.width;
301+ }
302+ }
303+ }
304+ ParallelAnimation {
305+ NumberAnimation {
306+ targets: [titleLabel, content]
307+ property: 'animatedMargin'
308+ to: 0
309+ duration: contentAnimation.animationDurationBase + contentAnimation.additionalDuration
310+ easing.type: Easing.OutCubic
311+ }
312+ NumberAnimation {
313+ targets: [titleLabel,content]
314+ property: 'opacity'
315+ from: 0
316+ to: 1
317+ duration: contentAnimation.animationDurationBase
318+ }
319+ }
320+ }
250}
321}
qml/Wizard/Pages.qml+5−1
@@ -31,6 +31,7 @@ Item {
31 // the user exits the wizard.
31 // the user exits the wizard.
32 property int passwordMethod: UbuntuSecurityPrivacyPanel.Passphrase
32 property int passwordMethod: UbuntuSecurityPrivacyPanel.Passphrase
33 property string password: ""
33 property string password: ""
34+
34 property string countryCode: "US" // default country (for the timezone page)
35 property string countryCode: "US" // default country (for the timezone page)
35 property bool seenSIMPage: false // we want to see the SIM page at most once
36 property bool seenSIMPage: false // we want to see the SIM page at most once
36
37
@@ -78,6 +79,8 @@ Item {
78 while (pageList.index < pageStack.depth - 1)
79 while (pageList.index < pageStack.depth - 1)
79 pop()
80 pop()
80 load(pageList.next())
81 load(pageList.next())
82+
83+ currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.RightToLeft)
81 }
84 }
82
85
83 function prev() {
86 function prev() {
@@ -89,6 +92,8 @@ Item {
89 } else {
92 } else {
90 currentPage.enabled = true
93 currentPage.enabled = true
91 }
94 }
95+
96+ currentPage.aboutToShow(UbuntuAnimation.BriskDuration, Qt.LeftToRight)
92 }
97 }
93
98
94 function load(path) {
99 function load(path) {
@@ -126,7 +131,6 @@ Item {
126 objectName: "timeout"
131 objectName: "timeout"
127 interval: 2000 // wizard pages shouldn't take long
132 interval: 2000 // wizard pages shouldn't take long
128 onTriggered: {
133 onTriggered: {
129− print("PAGE SKIPPED BY TIMEOUT!!!");
130 pageStack.currentPage.skip = true;
134 pageStack.currentPage.skip = true;
131 pageStack.currentPage.skipValid = true;
135 pageStack.currentPage.skipValid = true;
132 }
136 }
qml/Wizard/Pages/40-location.qml+1−1
@@ -65,7 +65,7 @@ LocalComponents.Page {
65 rightMargin: units.gu(1)
65 rightMargin: units.gu(1)
66 }
66 }
67
67
68− wrapMode: Text.WordWrap
68+ wrapMode: content.animatedMargin ? Text.NoWrap : Text.WordWrap
69 color: textColor
69 color: textColor
70 font.weight: checked ? Font.Normal : Font.Light
70 font.weight: checked ? Font.Normal : Font.Light
71 text: i18n.tr("Use GPS, Wi-Fi hotspots and mobile network anonymously to detect location (recommended)")
71 text: i18n.tr("Use GPS, Wi-Fi hotspots and mobile network anonymously to detect location (recommended)")