git.iko.soy/unity8
on xenial help sign in
Refactor PreviewOverlay to fix weird zoom out/in animations when previewing images from the Previews
28b1389Andrea Cimitan
qml/Dash/Previews/PreviewImageGallery.qml+25−6
compare with xenial
unifiedsplit
@@ -38,6 +38,8 @@ PreviewWidget {
38 model: root.widgetData["sources"]
38 model: root.widgetData["sources"]
39 clip: true
39 clip: true
40
40
41+ onCurrentIndexChanged: overlay.updateInitialItem()
42+
41 LazyImage {
43 LazyImage {
42 objectName: "placeholderScreenshot"
44 objectName: "placeholderScreenshot"
43 anchors {
45 anchors {
@@ -65,9 +67,8 @@ PreviewWidget {
65 id: mouseArea
67 id: mouseArea
66 anchors.fill: parent
68 anchors.fill: parent
67 onClicked: {
69 onClicked: {
68− overlay.delegateItem.currentIndex = index;
70+ previewImageListView.currentIndex = index;
69− overlay.initialX = rootItem.mapFromItem(parent, 0, 0).x;
71+ overlay.updateInitialItem();
70− overlay.initialY = rootItem.mapFromItem(parent, 0, 0).y;
71 overlay.show();
72 overlay.show();
72 }
73 }
73 }
74 }
@@ -78,9 +79,14 @@ PreviewWidget {
78 id: overlay
79 id: overlay
79 objectName: "overlay"
80 objectName: "overlay"
80 parent: rootItem
81 parent: rootItem
81− width: parent.width
82+ anchors.fill: parent
82− height: parent.height
83+
83− initialScale: previewImageListView.height / rootItem.height
84+ function updateInitialItem() {
85+ initialX = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).x;
86+ initialY = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).y;
87+ initialWidth = previewImageListView.currentItem.width;
88+ initialHeight = previewImageListView.currentItem.height;
89+ }
84
90
85 delegate: ListView {
91 delegate: ListView {
86 id: overlayListView
92 id: overlayListView
@@ -92,6 +98,19 @@ PreviewWidget {
92 snapMode: ListView.SnapOneItem
98 snapMode: ListView.SnapOneItem
93 boundsBehavior: Flickable.DragAndOvershootBounds
99 boundsBehavior: Flickable.DragAndOvershootBounds
94 model: root.widgetData["sources"]
100 model: root.widgetData["sources"]
101+ currentIndex: previewImageListView.currentIndex
102+
103+ onCurrentIndexChanged: {
104+ // if the index changed while overlay is visible, it was from user interaction,
105+ // let's update the index of the original listview
106+ if (overlay.visible) {
107+ previewImageListView.highlightMoveDuration = 0;
108+ previewImageListView.highlightResizeDuration = 0;
109+ previewImageListView.currentIndex = currentIndex;
110+ previewImageListView.highlightMoveDuration = -1;
111+ previewImageListView.highlightResizeDuration = -1;
112+ }
113+ }
95
114
96 delegate: Image {
115 delegate: Image {
97 id: screenshot
116 id: screenshot
qml/Dash/Previews/PreviewOverlay.qml+77−26
@@ -22,48 +22,99 @@ Rectangle {
22 id: overlay
22 id: overlay
23 objectName: "overlay"
23 objectName: "overlay"
24
24
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
26
29
27 property alias delegate: loader.sourceComponent
30 property alias delegate: loader.sourceComponent
28 property alias delegateItem: loader.item
31 property alias delegateItem: loader.item
29 property alias headerShown: overlayHeader.shown
32 property alias headerShown: overlayHeader.shown
30− property bool shown: false
31− property bool opening: false
32 property real initialX: 0
33 property real initialX: 0
33 property real initialY: 0
34 property real initialY: 0
34− property real initialScale: 0
35+ property real initialWidth: 1
35−
36+ property real initialHeight: 1
36− visible: scale > initialScale
37+
37− clip: visible && scale < 1.0
38+ property real xScale: initialXScale
38− scale: shown ? 1.0 : initialScale
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)
39 transformOrigin: Item.TopLeft
47 transformOrigin: Item.TopLeft
40− transform: Translate {
48+ transform: [
49+ Scale {
50+ origin.x: 0
51+ origin.y: 0
52+ xScale: overlay.xScale
53+ yScale: overlay.yScale
54+ },
55+ Translate {
41− x: overlay.initialX - overlay.initialX * overlay.scaleProgress
56+ x: overlay.initialX - overlay.initialX * overlay.progress
42− y: overlay.initialY - overlay.initialY * overlay.scaleProgress
57+ y: overlay.initialY - overlay.initialY * overlay.progress
43− }
58+ }
44− color: Qt.rgba(0, 0, 0, scaleProgress)
59+ ]
45− radius: units.gu(1) - units.gu(1) * scaleProgress
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+ ]
46
91
47 function show() {
92 function show() {
48− opening = true;
49− shown = true;
93+ state = "shown"
50 }
94 }
51
95
52 function hide() {
96 function hide() {
53− opening = false;
97+ state = "hidden"
54− shown = false;
55− }
56−
57− Behavior on scale {
58− UbuntuNumberAnimation {
59− duration: overlay.opening ? UbuntuAnimation.FastDuration :
60− UbuntuAnimation.FastDuration / 2
61− }
62 }
98 }
63
99
64 Loader {
100 Loader {
65 id: loader
101 id: loader
66 anchors.fill: parent
102 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+ }
67 }
118 }
68
119
69 Rectangle {
120 Rectangle {
@@ -77,7 +128,7 @@ Rectangle {
77 }
128 }
78 height: units.gu(7)
129 height: units.gu(7)
79 visible: opacity > 0
130 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
81 color: "black"
132 color: "black"
82
133
83 Behavior on opacity {
134 Behavior on opacity {
qml/Dash/Previews/PreviewZoomableImage.qml+3−3
@@ -59,9 +59,9 @@ PreviewWidget {
59 id: overlay
59 id: overlay
60 objectName: "overlay"
60 objectName: "overlay"
61 parent: rootItem
61 parent: rootItem
62− width: parent.width
62+ anchors.fill: parent
63− height: parent.height
63+ initialWidth: lazyImage.width
64− initialScale: lazyImage.height / rootItem.height
64+ initialHeight: lazyImage.height
65
65
66 delegate: ZoomableImage {
66 delegate: ZoomableImage {
67 anchors.fill: parent
67 anchors.fill: parent
tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml+1−1
@@ -22,7 +22,7 @@ import Unity.Test 0.1 as UT
22Rectangle {
22Rectangle {
23 id: root
23 id: root
24 width: units.gu(80)
24 width: units.gu(80)
25− height: units.gu(80)
25+ height: units.gu(70)
26 color: "lightgrey"
26 color: "lightgrey"
27
27
28 property var sourcesModel0: {
28 property var sourcesModel0: {