@@ -22,48 +22,99 @@ 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−
36− visible: scale > initialScale
37− clip: visible && scale < 1.0
38− scale: shown ? 1.0 : initialScale
35+ property real initialWidth: 1
36+ property real initialHeight: 1
37+
38+ property real xScale: initialXScale
39+ property real yScale: initialYScale
40+ property real progress: 0
41+
42+ implicitWidth: 1
43+ implicitHeight: 1
44+ visible: progress > 0
45+ clip: progress > 0 && progress < 1
46+ color: Qt.rgba(0, 0, 0, progress)
3947 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
48+ transform: [
49+ Scale {
50+ origin.x: 0
51+ origin.y: 0
52+ xScale: overlay.xScale
53+ yScale: overlay.yScale
54+ },
55+ Translate {
56+ x: overlay.initialX - overlay.initialX * overlay.progress
57+ y: overlay.initialY - overlay.initialY * overlay.progress
58+ }
59+ ]
60+ state: "hidden"
61+ states: [
62+ State {
63+ name: "shown"
64+ PropertyChanges { target: overlay; progress: 1; xScale: 1; yScale: 1 }
65+ },
66+ State {
67+ name: "hidden"
68+ PropertyChanges { target: overlay; progress: 0; xScale: initialXScale; yScale: initialYScale }
69+ }
70+ ]
71+ transitions: [
72+ Transition {
73+ from: "hidden"
74+ to: "shown"
75+ UbuntuNumberAnimation {
76+ target: overlay
77+ properties: "progress,xScale,yScale"
78+ duration: UbuntuAnimation.FastDuration
79+ }
80+ },
81+ Transition {
82+ from: "shown"
83+ to: "hidden"
84+ UbuntuNumberAnimation {
85+ target: overlay
86+ properties: "progress,xScale,yScale"
87+ duration: UbuntuAnimation.FastDuration / 2
88+ }
89+ }
90+ ]
4691
4792 function show() {
48− opening = true;
49− shown = true;
93+ state = "shown"
5094 }
5195
5296 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− }
97+ state = "hidden"
6298 }
6399
64100 Loader {
65101 id: loader
66102 anchors.fill: parent
103+
104+ readonly property bool verticalScaling: initialAspectRatio / aspectRatio >= 1
105+ readonly property real initialXScale: verticalScaling ? 1 : aspectRatio / initialAspectRatio
106+ readonly property real initialYScale: verticalScaling ? initialAspectRatio / aspectRatio : 1
107+ readonly property real xScale: verticalScaling ? loader.initialXScale - loader.initialXScale * overlay.progress + overlay.progress :
108+ loader.yScale * overlay.yScale / overlay.xScale
109+ readonly property real yScale: verticalScaling ? loader.xScale * overlay.xScale / overlay.yScale :
110+ loader.initialYScale - loader.initialYScale * overlay.progress + overlay.progress
111+
112+ transform: Scale {
113+ origin.x: parent.width / 2
114+ origin.y: parent.height / 2
115+ xScale: loader.xScale
116+ yScale: loader.yScale
117+ }
67118 }
68119
69120 Rectangle {
@@ -77,7 +128,7 @@ Rectangle {
77128 }
78129 height: units.gu(7)
79130 visible: opacity > 0
80− opacity: overlay.scaleProgress > 0.6 && shown ? 0.8 : 0
131+ opacity: overlay.state == "shown" && overlay.progress > 0.8 && shown ? 0.8 : 0
81132 color: "black"
82133
83134 Behavior on opacity {