on xenial help sign in
added a dropshadow
commit8e838d67d806af82d32f48ed7d5d1c435358b99e authorMichael Zanetti <michael.zanetti@canonical.com> dateTue 21 Jan 2014, 13:14 (13 years ago) parent3a4ef73
2 files changed+185−179
qml/Stages/PhoneStage.qml+185−179 qml/Stages/graphics/dropshadow.png
qml/Stages/PhoneStage.qml+185−179
@@ -340,208 +340,214 @@ Item {
340340 model: ApplicationManager
341341
342342 Item {
343+ id: appItem
343344 height: parent.height
344345 width: coverFlip.tileWidth
345346
346− Image {
347− id: appImage
348− anchors { left: parent.left; bottom: parent.bottom }
349− width: root.width
350− source: ApplicationManager.get(index).screenshot
351− scale: 1
352−
353− // This is the main progress, of the gesture, the same for every tile
354− property real progress: coverFlip.progress
355− // The progress, translated for the second stage of the animation, after the first app switch has happened
356− // Additionally it speeds it up a bit, depending on the distance of the tile
357− property real translatedProgress: appImage.progress - coverFlip.progressMarker1 - (coverFlip.tileDistance * (index-1))
358−
359− // Is this tile selected by a click?
360− property bool isSelected: false
361− // We need to remember some values when app is selected to be able to animate it to the foreground
362− property real selectedXTranslation: 0
363− property real selectedTranslatedProgress: 0
364− property real selectedProgress: 0
365− property real selectedAngle: 0
366− property real selectedXScale: 0
367−
368− function select() {
369− appImage.selectedXTranslation = appImage.xTranslation;
370− appImage.selectedAngle = appImage.angle;
371− appImage.selectedXScale = appImage.xScale;
372− appImage.selectedTranslatedProgress = appImage.translatedProgress - coverFlip.progressMarker1;
373− appImage.selectedProgress = appImage.progress - coverFlip.progressMarker1;
374− appImage.isSelected = true;
375− switchToAppAnimation.targetContentX = coverFlip.progressMarker1 * root.width
376− switchToAppAnimation.start();
377− }
347+ // This is the main progress, of the gesture, the same for every tile
348+ property real progress: coverFlip.progress
349+ // The progress, translated for the second stage of the animation, after the first app switch has happened
350+ // Additionally it speeds it up a bit, depending on the distance of the tile
351+ property real translatedProgress: appItem.progress - coverFlip.progressMarker1 - (coverFlip.tileDistance * (index-1))
352+
353+ // Is this tile selected by a click?
354+ property bool isSelected: false
355+ // We need to remember some values when app is selected to be able to animate it to the foreground
356+ property real selectedXTranslation: 0
357+ property real selectedTranslatedProgress: 0
358+ property real selectedProgress: 0
359+ property real selectedAngle: 0
360+ property real selectedXScale: 0
361+
362+ function select() {
363+ appItem.selectedXTranslation = appItem.xTranslation;
364+ appItem.selectedAngle = appItem.angle;
365+ appItem.selectedXScale = appItem.xScale;
366+ appItem.selectedTranslatedProgress = appItem.translatedProgress - coverFlip.progressMarker1;
367+ appItem.selectedProgress = appItem.progress - coverFlip.progressMarker1;
368+ appItem.isSelected = true;
369+ switchToAppAnimation.targetContentX = coverFlip.progressMarker1 * root.width
370+ switchToAppAnimation.start();
371+ }
378372
379− property int xTranslation: {
380− var xTranslate = 0;
381− var minXTranslate = -index * root.width + index * units.dp(3);
382− switch (index) {
383− case 0:
384− if (appImage.progress < coverFlip.progressMarker1) {
385− var progress = appImage.progress
386− var progressDiff = coverFlip.progressMarker1
387− var translateDiff = -root.width * 0.25
388− // progress : progressDiff = translate : translateDiff
389− xTranslate = progress * translateDiff / progressDiff
390− }
373+ property int xTranslation: {
374+ var xTranslate = 0;
375+ var minXTranslate = -index * root.width + index * units.dp(3);
376+ switch (index) {
377+ case 0:
378+ if (appItem.progress < coverFlip.progressMarker1) {
379+ var progress = appItem.progress
380+ var progressDiff = coverFlip.progressMarker1
381+ var translateDiff = -root.width * 0.25
382+ // progress : progressDiff = translate : translateDiff
383+ xTranslate = progress * translateDiff / progressDiff
384+ }
385+ break;
386+ case 1:
387+ if (appItem.progress < coverFlip.progressMarker1) {
388+ var progress = appItem.progress;
389+ var progressDiff = coverFlip.progressMarker1;
390+ var translateDiff = -root.width;
391+ // progress : progressDiff = translate : translateDiff
392+ xTranslate = progress * translateDiff / progressDiff;
391393 break;
392− case 1:
393− if (appImage.progress < coverFlip.progressMarker1) {
394− var progress = appImage.progress;
395− var progressDiff = coverFlip.progressMarker1;
396− var translateDiff = -root.width;
394+ }
395+ // Intentionally no break here...
396+ default:
397+ if (appItem.progress > coverFlip.progressMarker1) {
398+ xTranslate = xTranslateEasing.value * xTranslateEasing.period;
399+ if (appItem.isSelected) {
400+ var translateDiff = root.width * index + appItem.selectedXTranslation
401+ var progressDiff = appItem.selectedProgress
402+ var progress = progressDiff - (appItem.progress - coverFlip.progressMarker1);
397403 // progress : progressDiff = translate : translateDiff
398− xTranslate = progress * translateDiff / progressDiff;
399− break;
400− }
401− // Intentionally no break here...
402− default:
403− if (appImage.progress > coverFlip.progressMarker1) {
404− xTranslate = xTranslateEasing.value * xTranslateEasing.period;
405− if (appImage.isSelected) {
406− var translateDiff = root.width * index + appImage.selectedXTranslation
407− var progressDiff = appImage.selectedProgress
408− var progress = progressDiff - (appImage.progress - coverFlip.progressMarker1);
409− // progress : progressDiff = translate : translateDiff
410− var newTranslate = progress * translateDiff / progressDiff;
411−
412− xTranslate = appImage.selectedXTranslation - newTranslate;
413− }
414− break;
404+ var newTranslate = progress * translateDiff / progressDiff;
405+
406+ xTranslate = appItem.selectedXTranslation - newTranslate;
415407 }
408+ break;
416409 }
417− return xTranslate;
418410 }
411+ return xTranslate;
412+ }
419413
420− property real angle: {
421− var newAngle = 0;
422− switch (index) {
423− case 0:
424− if (appImage.progress < coverFlip.progressMarker1) {
425− var progress = appImage.progress;
426− var angleDiff = coverFlip.endAngle;
427− var progressDiff = coverFlip.progressMarker1;
428− // progress : progressDiff = angle : angleDiff
429− newAngle = progress * angleDiff / progressDiff;
430− } else {
431− var progress = appImage.progress - coverFlip.progressMarker1;
432− var angleDiff = coverFlip.endAngle;
433− var progressDiff = 1 - coverFlip.progressMarker1;
434− // progress : progressDiff = angle : angleDiff
435− newAngle = progress * angleDiff / progressDiff;
436− newAngle = Math.min(coverFlip.endAngle, newAngle);
437− }
414+ property real angle: {
415+ var newAngle = 0;
416+ switch (index) {
417+ case 0:
418+ if (appItem.progress < coverFlip.progressMarker1) {
419+ var progress = appItem.progress;
420+ var angleDiff = coverFlip.endAngle;
421+ var progressDiff = coverFlip.progressMarker1;
422+ // progress : progressDiff = angle : angleDiff
423+ newAngle = progress * angleDiff / progressDiff;
424+ } else {
425+ var progress = appItem.progress - coverFlip.progressMarker1;
426+ var angleDiff = coverFlip.endAngle;
427+ var progressDiff = 1 - coverFlip.progressMarker1;
428+ // progress : progressDiff = angle : angleDiff
429+ newAngle = progress * angleDiff / progressDiff;
430+ newAngle = Math.min(coverFlip.endAngle, newAngle);
431+ }
432+ break;
433+ case 1:
434+ if (appItem.progress < coverFlip.progressMarker1) {
435+ var progress = coverFlip.progress;
436+ var angleDiff = coverFlip.startAngle;
437+ var progressDiff = coverFlip.progressMarker1;
438+ // progress : progressDiff = angle : angleDiff
439+ var angle = progress * angleDiff / progressDiff;
440+ newAngle = coverFlip.startAngle - angle;
438441 break;
439− case 1:
440− if (appImage.progress < coverFlip.progressMarker1) {
441− var progress = coverFlip.progress;
442− var angleDiff = coverFlip.startAngle;
443− var progressDiff = coverFlip.progressMarker1;
444− // progress : progressDiff = angle : angleDiff
445− var angle = progress * angleDiff / progressDiff;
446− newAngle = coverFlip.startAngle - angle;
447− break;
448− }
449− // Intentionally no break here...
450− default:
451− newAngle = coverFlip.startAngle - (angleEasing.value * angleEasing.period);
452− // make sure we stop at the left screen edge
453− newAngle = Math.max(newAngle, coverFlip.endAngle);
442+ }
443+ // Intentionally no break here...
444+ default:
445+ newAngle = coverFlip.startAngle - (angleEasing.value * angleEasing.period);
446+ // make sure we stop at the left screen edge
447+ newAngle = Math.max(newAngle, coverFlip.endAngle);
454448
455− if (appImage.isSelected) {
449+ if (appItem.isSelected) {
456450// var selectedAngleTranslate = selectedAngleEasing.value * selectedAngleEasing.period
457− var angleDiff = appImage.selectedAngle
458− var progressDiff = appImage.selectedProgress
459− var progress = progressDiff - (appImage.progress - coverFlip.progressMarker1);
460− // progress : progressDiff = angle : angleDiff
461− var selectedAngleTranslate = progress * angleDiff / progressDiff;
451+ var angleDiff = appItem.selectedAngle
452+ var progressDiff = appItem.selectedProgress
453+ var progress = progressDiff - (appItem.progress - coverFlip.progressMarker1);
454+ // progress : progressDiff = angle : angleDiff
455+ var selectedAngleTranslate = progress * angleDiff / progressDiff;
462456
463− newAngle = appImage.selectedAngle - selectedAngleTranslate;
464− }
457+ newAngle = appItem.selectedAngle - selectedAngleTranslate;
465458 }
466− return newAngle;
467459 }
460+ return newAngle;
461+ }
468462
469− property real xScale: {
470− var scale = 1;
463+ property real xScale: {
464+ var scale = 1;
471465
472− switch (index) {
473− case 0:
474− if (appImage.progress > coverFlip.progressMarker1) {
475− var scaleDiff = coverFlip.maxScale - 1;
476− var progressDiff = 1.5 - coverFlip.progressMarker1;
477− // progress : progressDiff = scale : scaleDiff
478− scale = 1 - (appImage.progress - coverFlip.progressMarker1) * scaleDiff / progressDiff;
479− }
466+ switch (index) {
467+ case 0:
468+ if (appItem.progress > coverFlip.progressMarker1) {
469+ var scaleDiff = coverFlip.maxScale - 1;
470+ var progressDiff = 1.5 - coverFlip.progressMarker1;
471+ // progress : progressDiff = scale : scaleDiff
472+ scale = 1 - (appItem.progress - coverFlip.progressMarker1) * scaleDiff / progressDiff;
473+ }
474+ break;
475+ case 1:
476+ if (appItem.progress < coverFlip.progressMarker1) {
477+ var scaleDiff = coverFlip.maxScale - 1
478+ var progressDiff = coverFlip.progressMarker1
479+ // progress : progressDiff = scale : scaleDiff
480+ scale = coverFlip.maxScale - (appItem.progress * scaleDiff / progressDiff);
480481 break;
481− case 1:
482− if (appImage.progress < coverFlip.progressMarker1) {
483− var scaleDiff = coverFlip.maxScale - 1
484− var progressDiff = coverFlip.progressMarker1
485− // progress : progressDiff = scale : scaleDiff
486− scale = coverFlip.maxScale - (appImage.progress * scaleDiff / progressDiff);
487− break;
488− }
489− // Intentionally no break
490− default:
491− scale = coverFlip.maxScale - scaleEasing.value * scaleEasing.period;
492− if (appImage.isSelected) {
493− var scaleDiff = -(1 - appImage.selectedXScale)
494− var progressDiff = appImage.selectedProgress
495− var progress = progressDiff - (appImage.progress - coverFlip.progressMarker1);
496− // progress : progressDiff = angle : angleDiff
497− var selectedScaleTranslate = progress * scaleDiff / progressDiff;
498−
499− scale = appImage.selectedXScale - selectedScaleTranslate;
500− }
501482 }
502− return Math.min(coverFlip.maxScale, Math.max(coverFlip.minScale, scale));
483+ // Intentionally no break
484+ default:
485+ scale = coverFlip.maxScale - scaleEasing.value * scaleEasing.period;
486+ if (appItem.isSelected) {
487+ var scaleDiff = -(1 - appItem.selectedXScale)
488+ var progressDiff = appItem.selectedProgress
489+ var progress = progressDiff - (appItem.progress - coverFlip.progressMarker1);
490+ // progress : progressDiff = angle : angleDiff
491+ var selectedScaleTranslate = progress * scaleDiff / progressDiff;
492+
493+ scale = appItem.selectedXScale - selectedScaleTranslate;
494+ }
503495 }
496+ return Math.min(coverFlip.maxScale, Math.max(coverFlip.minScale, scale));
497+ }
504498
505− EasingCurve {
506− id: xTranslateEasing
507− type: EasingCurve.OutQuad
508− period: index * -width
509− progress: appImage.translatedProgress
510− }
511− EasingCurve {
512− id: angleEasing
513− type: EasingCurve.InQuad
514− period: coverFlip.startAngle - coverFlip.endAngle
515− progress: appImage.translatedProgress
516− }
517− EasingCurve {
518− id: scaleEasing
519− type: EasingCurve.Linear
520− period: coverFlip.maxScale - coverFlip.minScale
521− progress: appImage.translatedProgress
522− }
499+ EasingCurve {
500+ id: xTranslateEasing
501+ type: EasingCurve.OutQuad
502+ period: index * -width
503+ progress: appItem.translatedProgress
504+ }
505+ EasingCurve {
506+ id: angleEasing
507+ type: EasingCurve.InQuad
508+ period: coverFlip.startAngle - coverFlip.endAngle
509+ progress: appItem.translatedProgress
510+ }
511+ EasingCurve {
512+ id: scaleEasing
513+ type: EasingCurve.Linear
514+ period: coverFlip.maxScale - coverFlip.minScale
515+ progress: appItem.translatedProgress
516+ }
523517
524− transform: [
525− Rotation {
526− origin { x: 0; y: coverFlip.height / 2 }
527− axis { x: 0; y: 1; z: 0 }
528− angle: appImage.angle
529− },
530− Translate {
531− x: appImage.xTranslation
532− },
533− Scale {
534− origin { x: appImage.xTranslation; y: root.height / 2 - (root.height - appImage.height)}
535− xScale: appImage.xScale
536− yScale: xScale
537− }
538− ]
518+ transform: [
519+ Rotation {
520+ origin { x: 0; y: coverFlip.height / 2 }
521+ axis { x: 0; y: 1; z: 0 }
522+ angle: appItem.angle
523+ },
524+ Translate {
525+ x: appItem.xTranslation
526+ },
527+ Scale {
528+ origin { x: appItem.xTranslation; y: root.height / 2 - (root.height - appImage.height)}
529+ xScale: appItem.xScale
530+ yScale: xScale
531+ }
532+ ]
539533
540− MouseArea {
541− anchors.fill: parent
542− onClicked: {
543− appImage.select()
544− }
534+ Image {
535+ id: dropShadow
536+ anchors.fill: appImage
537+ anchors.margins: -units.gu(2)
538+ source: "graphics/dropshadow.png"
539+ }
540+ Image {
541+ id: appImage
542+ anchors { left: parent.left; bottom: parent.bottom }
543+ width: root.width
544+ source: ApplicationManager.get(index).screenshot
545+ scale: 1
546+ }
547+ MouseArea {
548+ anchors.fill: parent
549+ onClicked: {
550+ appItem.select()
545551 }
546552 }
547553
@@ -557,7 +563,7 @@ Item {
557563 ScriptAction {
558564 script: {
559565 ApplicationManager.focusApplication(ApplicationManager.get(index).appId);
560− appImage.isSelected = false;
566+ appItem.isSelected = false;
561567 coverFlip.progress = 0;
562568 coverFlickable.passedFirstStage = false;
563569 }
qml/Stages/graphics/dropshadow.pngnew file

Binary file not shown.