@@ -22,48 +22,94 @@ Rectangle {
2222 id: overlay
2323 objectName: "overlay"
2424
25− readonly property real scaleProgress: (scale - initialScale) / (1.0 - initialScale)
25+ readonly property real aspectRatio: width / height
26+ readonly property real initialAspectRatio: initialWidth / initialHeight
27+ readonly property real initialXScale: initialWidth / width
28+ readonly property real initialYScale: initialHeight / height
2629
2730 property alias delegate: loader.sourceComponent
2831 property alias delegateItem: loader.item
2932 property alias headerShown: overlayHeader.shown
30− property bool shown: false
31− property bool opening: false
3233 property real initialX: 0
3334 property real initialY: 0
34− property real initialScale: 0
35+ property real initialWidth: 1
36+ property real initialHeight: 1
3537
36− visible: scale > initialScale
37− clip: visible && scale < 1.0
38− scale: shown ? 1.0 : initialScale
38+ property real xScale: 0
39+ property real yScale: 0
40+ property real progress: 0
41+
42+ visible: progress > 0
43+ clip: progress > 0 && progress < 1
44+ color: Qt.rgba(0, 0, 0, progress)
3945 transformOrigin: Item.TopLeft
40− transform: Translate {
41− x: overlay.initialX - overlay.initialX * overlay.scaleProgress
42− y: overlay.initialY - overlay.initialY * overlay.scaleProgress
43− }
44− color: Qt.rgba(0, 0, 0, scaleProgress)
45− radius: units.gu(1) - units.gu(1) * scaleProgress
46+ transform: [
47+ Scale {
48+ origin.x: 0
49+ origin.y: 0
50+ xScale: overlay.xScale
51+ yScale: overlay.yScale
52+ },
53+ Translate {
54+ x: overlay.initialX - overlay.initialX * overlay.progress
55+ y: overlay.initialY - overlay.initialY * overlay.progress
56+ }
57+ ]
58+ state: "hidden"
59+ states: [
60+ State {
61+ name: "shown"
62+ PropertyChanges { target: overlay; progress: 1; xScale: 1; yScale: 1 }
63+ },
64+ State {
65+ name: "hidden"
66+ PropertyChanges { target: overlay; progress: 0; xScale: initialXScale; yScale: initialYScale }
67+ }
68+ ]
69+ transitions: [
70+ Transition {
71+ from: "hidden"
72+ to: "shown"
73+ UbuntuNumberAnimation {
74+ target: overlay
75+ properties: "progress,xScale,yScale"
76+ duration: UbuntuAnimation.FastDuration
77+ }
78+ },
79+ Transition {
80+ from: "shown"
81+ to: "hidden"
82+ UbuntuNumberAnimation {
83+ target: overlay
84+ properties: "progress,xScale,yScale"
85+ duration: UbuntuAnimation.FastDuration / 2
86+ }
87+ }
88+ ]
4689
4790 function show() {
48− opening = true;
49− shown = true;
91+ state = "shown"
5092 }
5193
5294 function hide() {
53− opening = false;
54− shown = false;
55− }
56−
57− Behavior on scale {
58− UbuntuNumberAnimation {
59− duration: overlay.opening ? UbuntuAnimation.FastDuration :
60− UbuntuAnimation.FastDuration / 2
61− }
95+ state = "hidden"
6296 }
6397
6498 Loader {
6599 id: loader
66100 anchors.fill: parent
101+
102+ readonly property real initialXScale: initialAspectRatio >= 1 ? 1 : aspectRatio / initialAspectRatio
103+ readonly property real initialYScale: initialAspectRatio >= 1 ? initialAspectRatio / aspectRatio : 1
104+ readonly property real xScale: loader.initialXScale - loader.initialXScale * overlay.progress + overlay.progress
105+ readonly property real yScale: loader.initialYScale - loader.initialYScale * overlay.progress + overlay.progress
106+
107+ transform: Scale {
108+ origin.x: parent.width / 2
109+ origin.y: parent.height / 2
110+ xScale: loader.xScale
111+ yScale: loader.yScale
112+ }
67113 }
68114
69115 Rectangle {
@@ -77,7 +123,7 @@ Rectangle {
77123 }
78124 height: units.gu(7)
79125 visible: opacity > 0
80− opacity: overlay.scaleProgress > 0.6 && shown ? 0.8 : 0
126+ opacity: overlay.state == "shown" && overlay.progress > 0.8 && shown ? 0.8 : 0
81127 color: "black"
82128
83129 Behavior on opacity {