git.iko.soy/unity8
on xenial help sign in
add scaling of apps to compensate difference between fullscreen and regular apps
0ccba8fMichael Zanetti
qml/Stages/PhoneStage.qml+16−47
compare with xenial
unifiedsplit
@@ -240,7 +240,7 @@ Item {
240
240
241 property int tileDistance: width / 4
241 property int tileDistance: width / 4
242
242
243− property real positionMarker1: 0.35
243+ property real positionMarker1: 0.3
244 property real positionMarker2: 0.45
244 property real positionMarker2: 0.45
245 property real positionMarker3: 0.6
245 property real positionMarker3: 0.6
246 property real positionMarker4: .9
246 property real positionMarker4: .9
@@ -339,12 +339,14 @@ Item {
339 id: spreadRepeater
339 id: spreadRepeater
340 model: ApplicationManager
340 model: ApplicationManager
341 delegate: TransformedSpreadDelegate {
341 delegate: TransformedSpreadDelegate {
342+ id: appDelegate
342 startAngle: 45
343 startAngle: 45
343 endAngle: 5
344 endAngle: 5
344 startScale: 1
345 startScale: 1
345 endScale: 0.6
346 endScale: 0.6
346 startDistance: spreadView.tileDistance
347 startDistance: spreadView.tileDistance
347 endDistance: units.gu(.5)
348 endDistance: units.gu(.5)
349+ width: spreadView.width
348 height: spreadView.height
350 height: spreadView.height
349 selected: spreadView.selectedIndex == index
351 selected: spreadView.selectedIndex == index
350 otherSelected: spreadView.selectedIndex >= 0 && !selected
352 otherSelected: spreadView.selectedIndex >= 0 && !selected
@@ -352,19 +354,6 @@ Item {
352 z: index
354 z: index
353 x: index == 0 ? 0 : spreadView.width + (index - 1) * spreadView.tileDistance
355 x: index == 0 ? 0 : spreadView.width + (index - 1) * spreadView.tileDistance
354
356
355− width: {
356− switch (index) {
357− case 0:
358− return spreadView.width;
359− case 1:
360− if (spreadView.stage == 0) {
361− return spreadView.width * spreadView.positionMarker2;
362− }
363− default:
364− return spreadView.tileDistance;
365− }
366− }
367−
368 progress: {
357 progress: {
369 switch (index) {
358 switch (index) {
370 case 0:
359 case 0:
@@ -383,47 +372,27 @@ Item {
383 }
372 }
384
373
385 animatedProgress: {
374 animatedProgress: {
386− if (spreadView.stage < 2 && index < 2) {
375+ if (spreadView.stage == 0 && index < 2) {
387− if (spreadView.contentX < spreadView.width * spreadView.positionMarker1) {
376+ if (progress < spreadView.positionMarker1) {
388− return spreadView.contentX / spreadView.width
377+ return progress;
389− } else if (spreadView.stage == 0){
378+ } else if (progress < spreadView.positionMarker1 + .05){
379+ return spreadView.positionMarker1 + snappingCurve.value * 3
380+ } else {
390 return spreadView.positionMarker2
381 return spreadView.positionMarker2
391 }
382 }
392 }
383 }
393 return progress;
384 return progress;
394 }
385 }
395
386
396− onClicked: {
387+ EasingCurve {
397− spreadView.snapTo(index);
388+ id: snappingCurve
398− }
389+ type: EasingCurve.OutQuad
399−
390+ period: 0.05//spreadView.positionMarker2 - spreadView.positionMarker1
400− // This timer is to decouple the application reordering with the enabling of the SmoothedAnimation
391+ progress: appDelegate.progress - spreadView.positionMarker1
401− // If both are done in same event loop pass, the reordering would animate.
402− Connections {
403− target: spreadView
404− onStageChanged: {
405− if (spreadView.stage == 0) {
406− enableAnimationTimer.start();
407− } else {
408− stage1Animation.enabled = false;
409− }
410− }
411− }
412− Timer {
413− id: enableAnimationTimer
414− interval: 1
415− onTriggered: {
416− stage1Animation.enabled = true;
417− }
418 }
392 }
419
393
420− Behavior on animatedProgress {
394+ onClicked: {
421− id: stage1Animation
395+ spreadView.snapTo(index);
422− SmoothedAnimation {
423− velocity: .5;
424−// duration: UbuntuAnimation.BriskDuration;
425−// easing: UbuntuAnimation.StandardEasing
426− }
427 }
396 }
428 }
397 }
429 }
398 }
qml/Stages/SpreadDelegate.qml+8−1
@@ -5,6 +5,13 @@ Item {
5
5
6 signal clicked()
6 signal clicked()
7
7
8+ property real topMarginProgress
9+
10+ QtObject {
11+ id: priv
12+ property real heightDifference: root.height - appImage.implicitHeight
13+ }
14+
8 Image {
15 Image {
9 id: dropShadow
16 id: dropShadow
10 anchors.fill: appImage
17 anchors.fill: appImage
@@ -13,7 +20,7 @@ Item {
13 }
20 }
14 Image {
21 Image {
15 id: appImage
22 id: appImage
16− anchors { left: parent.left; bottom: parent.bottom }
23+ anchors { left: parent.left; bottom: parent.bottom; top: parent.top; topMargin: priv.heightDifference * Math.max(0, 1 - root.topMarginProgress) }
17 source: model.screenshot
24 source: model.screenshot
18 scale: 1
25 scale: 1
19 }
26 }
qml/Stages/TransformedSpreadDelegate.qml+36−3
@@ -4,6 +4,7 @@ import Ubuntu.Components 0.1
4
4
5SpreadDelegate {
5SpreadDelegate {
6 id: root
6 id: root
7+ clip: true
7
8
8 property bool selected: false
9 property bool selected: false
9 property bool otherSelected: false
10 property bool otherSelected: false
@@ -42,12 +43,16 @@ SpreadDelegate {
42 if (spreadView.stage == 1) {
43 if (spreadView.stage == 1) {
43 if (index == 0) {
44 if (index == 0) {
44 priv.stage2startTranslate = priv.easingAnimation(0, spreadView.positionMarker4, 0, -spreadView.width, spreadView.positionMarker4) + spreadView.width;
45 priv.stage2startTranslate = priv.easingAnimation(0, spreadView.positionMarker4, 0, -spreadView.width, spreadView.positionMarker4) + spreadView.width;
46+ priv.stage2startAngle = priv.easingAnimation(0, spreadView.positionMarker4, root.startAngle, root.endAngle, spreadView.positionMarker4)
47+ priv.stage2startScale = priv.easingAnimation(0, spreadView.positionMarker4, root.startScale, root.endScale, spreadView.positionMarker4)
48+ priv.stage2startTopMarginProgress = priv.linearAnimation(0, 1, 0, 1, spreadView.positionMarker4)
45 } else if (index == 1) {
49 } else if (index == 1) {
46 // find where the main easing for Tile 1 would be when reaching stage 2
50 // find where the main easing for Tile 1 would be when reaching stage 2
47 var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
51 var stage2Progress = spreadView.positionMarker4 - spreadView.tileDistance / spreadView.width;
48 priv.stage2startTranslate = priv.easingAnimation(0, stage2Progress, 0, -spreadView.width + root.endDistance, stage2Progress);
52 priv.stage2startTranslate = priv.easingAnimation(0, stage2Progress, 0, -spreadView.width + root.endDistance, stage2Progress);
49 priv.stage2startAngle = priv.easingAnimation(0, stage2Progress, root.startAngle, root.endAngle, stage2Progress)
53 priv.stage2startAngle = priv.easingAnimation(0, stage2Progress, root.startAngle, root.endAngle, stage2Progress)
50 priv.stage2startScale = priv.easingAnimation(0, stage2Progress, root.startScale, root.endScale, stage2Progress);
54 priv.stage2startScale = priv.easingAnimation(0, stage2Progress, root.startScale, root.endScale, stage2Progress);
55+ priv.stage2startTopMarginProgress = priv.linearAnimation(0, 1, 0, spreadView.positionMarker4, stage2Progress)
51 }
56 }
52 }
57 }
53 }
58 }
@@ -62,12 +67,14 @@ SpreadDelegate {
62 property real selectedAngle
67 property real selectedAngle
63 property real selectedScale
68 property real selectedScale
64 property real selectedOpacity
69 property real selectedOpacity
70+ property real selectedTopMarginProgress
65
71
66 // Those values are needed as target values for the end of stage 1.
72 // Those values are needed as target values for the end of stage 1.
67 // As they are static values, lets caluclate them once when entering stage 1 instead of calculating them in each animation pass.
73 // As they are static values, lets caluclate them once when entering stage 1 instead of calculating them in each animation pass.
68 property real stage2startTranslate
74 property real stage2startTranslate
69 property real stage2startAngle
75 property real stage2startAngle
70 property real stage2startScale
76 property real stage2startScale
77+ property real stage2startTopMarginProgress
71
78
72 function snapshot() {
79 function snapshot() {
73 selectedProgress = root.progress;
80 selectedProgress = root.progress;
@@ -75,6 +82,7 @@ SpreadDelegate {
75 selectedAngle = angle;
82 selectedAngle = angle;
76 selectedScale = scale;
83 selectedScale = scale;
77 selectedOpacity = opacity;
84 selectedOpacity = opacity;
85+ selectedTopMarginProgress = topMarginProgress;
78 }
86 }
79
87
80 property real negativeProgress: {
88 property real negativeProgress: {
@@ -85,7 +93,7 @@ SpreadDelegate {
85 }
93 }
86
94
87 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
95 function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
88− // progress : progressDiff = value : valueDiff
96+ // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff
89 return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;
97 return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;
90 }
98 }
91
99
@@ -147,7 +155,7 @@ SpreadDelegate {
147 newAngle = linearAnimation(0, spreadView.positionMarker2, 0, root.endAngle * spreadView.snapPosition, root.animatedProgress)
155 newAngle = linearAnimation(0, spreadView.positionMarker2, 0, root.endAngle * spreadView.snapPosition, root.animatedProgress)
148 break;
156 break;
149 } else if (spreadView.stage == 1) {
157 } else if (spreadView.stage == 1) {
150− newAngle = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, root.endAngle * spreadView.snapPosition, root.endAngle, root.progress)
158+ newAngle = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, root.endAngle * spreadView.snapPosition, stage2startAngle, root.progress)
151 break;
159 break;
152 }
160 }
153 case 1:
161 case 1:
@@ -176,7 +184,7 @@ SpreadDelegate {
176 newScale = 1;
184 newScale = 1;
177 break
185 break
178 } else if(spreadView.stage == 1) {
186 } else if(spreadView.stage == 1) {
179− newScale = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 1, root.endScale, root.progress)
187+ newScale = linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 1, stage2startScale, root.progress)
180 break;
188 break;
181 }
189 }
182 case 1:
190 case 1:
@@ -212,6 +220,30 @@ SpreadDelegate {
212
220
213 return 1;
221 return 1;
214 }
222 }
223+
224+ property real topMarginProgress: {
225+ if (selected) {
226+ return linearAnimation(selectedProgress, negativeProgress, selectedTopMarginProgress, 0, root.progress);
227+ }
228+
229+ switch (index) {
230+ case 0:
231+ if (spreadView.stage == 0) {
232+ return 0;
233+ } else if (spreadView.stage == 1) {
234+ return linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 0, priv.stage2startTopMarginProgress, root.progress);
235+ }
236+ break;
237+ case 1:
238+ if (spreadView.stage == 0) {
239+ return 0;
240+ } else if (spreadView.stage == 1) {
241+ return linearAnimation(spreadView.positionMarker2, spreadView.positionMarker4, 0, priv.stage2startTopMarginProgress, root.progress);
242+ }
243+ }
244+
245+ return root.progress;
246+ }
215 }
247 }
216
248
217 transform: [
249 transform: [
@@ -230,6 +262,7 @@ SpreadDelegate {
230 }
262 }
231 ]
263 ]
232 opacity: priv.opacity
264 opacity: priv.opacity
265+ topMarginProgress: priv.topMarginProgress
233
266
234 EasingCurve {
267 EasingCurve {
235 id: easingCurve
268 id: easingCurve