git.iko.soy/unity8
on xenial help sign in
New PreviewOverlay logic
7632f3cAndrea Cimitan
qml/Dash/Previews/PreviewImageGallery.qml+11−4
compare with xenial
unifiedsplit
@@ -64,10 +64,11 @@ PreviewWidget {
64 MouseArea {
64 MouseArea {
65 id: mouseArea
65 id: mouseArea
66 anchors.fill: parent
66 anchors.fill: parent
67+
67 onClicked: {
68 onClicked: {
68− overlay.delegateItem.currentIndex = index;
69 overlay.initialX = rootItem.mapFromItem(parent, 0, 0).x;
69 overlay.initialX = rootItem.mapFromItem(parent, 0, 0).x;
70 overlay.initialY = rootItem.mapFromItem(parent, 0, 0).y;
70 overlay.initialY = rootItem.mapFromItem(parent, 0, 0).y;
71+ overlay.delegateItem.currentIndex = index;
71 overlay.show();
72 overlay.show();
72 }
73 }
73 }
74 }
@@ -78,9 +79,7 @@ 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− initialScale: previewImageListView.height / rootItem.height
84
83
85 delegate: ListView {
84 delegate: ListView {
86 id: overlayListView
85 id: overlayListView
@@ -93,6 +92,14 @@ PreviewWidget {
93 boundsBehavior: Flickable.DragAndOvershootBounds
92 boundsBehavior: Flickable.DragAndOvershootBounds
94 model: root.widgetData["sources"]
93 model: root.widgetData["sources"]
95
94
95+ onCurrentIndexChanged: {
96+ previewImageListView.currentIndex = currentIndex;
97+ overlay.initialX = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).x;
98+ overlay.initialY = rootItem.mapFromItem(previewImageListView.currentItem, 0, 0).y;
99+ overlay.initialWidth = previewImageListView.currentItem.width;
100+ overlay.initialHeight = previewImageListView.currentItem.height;
101+ }
102+
96 delegate: Image {
103 delegate: Image {
97 id: screenshot
104 id: screenshot
98 anchors {
105 anchors {
qml/Dash/Previews/PreviewOverlay.qml+71−25
@@ -22,48 +22,94 @@ 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
36+ property real initialHeight: 1
35
37
36− visible: scale > initialScale
38+ property real xScale: 0
37− clip: visible && scale < 1.0
39+ property real yScale: 0
38− scale: shown ? 1.0 : initialScale
40+ property real progress: 0
41+
42+ visible: progress > 0
43+ clip: progress > 0 && progress < 1
44+ color: Qt.rgba(0, 0, 0, progress)
39 transformOrigin: Item.TopLeft
45 transformOrigin: Item.TopLeft
40− transform: Translate {
46+ transform: [
47+ Scale {
48+ origin.x: 0
49+ origin.y: 0
50+ xScale: overlay.xScale
51+ yScale: overlay.yScale
52+ },
53+ Translate {
41− x: overlay.initialX - overlay.initialX * overlay.scaleProgress
54+ x: overlay.initialX - overlay.initialX * overlay.progress
42− y: overlay.initialY - overlay.initialY * overlay.scaleProgress
55+ y: overlay.initialY - overlay.initialY * overlay.progress
43− }
56+ }
44− color: Qt.rgba(0, 0, 0, scaleProgress)
57+ ]
45− radius: units.gu(1) - units.gu(1) * scaleProgress
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+ ]
46
89
47 function show() {
90 function show() {
48− opening = true;
49− shown = true;
91+ state = "shown"
50 }
92 }
51
93
52 function hide() {
94 function hide() {
53− opening = false;
95+ 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 }
96 }
63
97
64 Loader {
98 Loader {
65 id: loader
99 id: loader
66 anchors.fill: parent
100 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+ }
67 }
113 }
68
114
69 Rectangle {
115 Rectangle {
@@ -77,7 +123,7 @@ Rectangle {
77 }
123 }
78 height: units.gu(7)
124 height: units.gu(7)
79 visible: opacity > 0
125 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
81 color: "black"
127 color: "black"
82
128
83 Behavior on opacity {
129 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