git.iko.soy/unity8
on xenial help sign in
Add preview image slideshow Fixes: 1351537
db0f253Andrea Cimitan
qml/Components/LazyImage.qml+1
compare with xenial
unifiedsplit
@@ -37,6 +37,7 @@ Item {
37 property alias horizontalAlignment: image.horizontalAlignment
37 property alias horizontalAlignment: image.horizontalAlignment
38 property alias verticalAlignment: image.verticalAlignment
38 property alias verticalAlignment: image.verticalAlignment
39 property alias sourceImage: image
39 property alias sourceImage: image
40+ property alias borderSource: shape.borderSource
40
41
41 state: "default"
42 state: "default"
42
43
qml/Dash/Previews/PreviewImageGallery.qml+121−18
@@ -26,8 +26,11 @@ PreviewWidget {
26 id: root
26 id: root
27 implicitHeight: units.gu(22)
27 implicitHeight: units.gu(22)
28
28
29+ property Item rootItem: QuickUtils.rootItem(root)
30+
29 ListView {
31 ListView {
30 id: previewImageListView
32 id: previewImageListView
33+ objectName: "previewImageListView"
31 spacing: units.gu(1)
34 spacing: units.gu(1)
32 anchors.fill: parent
35 anchors.fill: parent
33 orientation: ListView.Horizontal
36 orientation: ListView.Horizontal
@@ -35,24 +38,6 @@ PreviewWidget {
35 model: root.widgetData["sources"]
38 model: root.widgetData["sources"]
36 clip: true
39 clip: true
37
40
38− // FIXME: Because of ListViews inside ListViews inside Flickables inside ListViews (and some more)
39− // we finally reached the point where this ListView doesn't correctly get swipe input any more but
40− // instead the parent ListView is the one that is swiped. This MouseArea sort of creates a blocking
41− // layer to make sure this ListView can be swiped, regardless of what's behind it.
42− MouseArea {
43− anchors.fill: parent
44− enabled: parent.contentWidth > parent.width
45− }
46−
47− // FIXME: Because of ListViews inside ListViews inside Flickables inside ListViews (and some more)
48− // we finally reached the point where this ListView doesn't correctly get swipe input any more but
49− // instead the parent ListView is the one that is swiped. This MouseArea sort of creates a blocking
50− // layer to make sure this ListView can be swiped, regardless of what's behind it.
51− MouseArea {
52− anchors.fill: parent
53− enabled: parent.contentWidth > parent.width
54− }
55−
56 LazyImage {
41 LazyImage {
57 objectName: "placeholderScreenshot"
42 objectName: "placeholderScreenshot"
58 anchors {
43 anchors {
@@ -66,6 +51,7 @@ PreviewWidget {
66 }
51 }
67
52
68 delegate: LazyImage {
53 delegate: LazyImage {
54+ objectName: "previewImage" + index
69 anchors {
55 anchors {
70 top: parent.top
56 top: parent.top
71 bottom: parent.bottom
57 bottom: parent.bottom
@@ -73,6 +59,123 @@ PreviewWidget {
73 source: modelData ? modelData : ""
59 source: modelData ? modelData : ""
74 scaleTo: "height"
60 scaleTo: "height"
75 initialWidth: units.gu(13)
61 initialWidth: units.gu(13)
62+ borderSource: mouseArea.pressed ? "radius_pressed.sci" : "radius_idle.sci"
63+
64+ MouseArea {
65+ id: mouseArea
66+ anchors.fill: parent
67+ onClicked: {
68+ slideShowListView.currentIndex = index;
69+ slideShow.initialX = rootItem.mapFromItem(parent, 0, 0).x
70+ slideShow.initialY = rootItem.mapFromItem(parent, 0, 0).y
71+ slideShow.visible = true;
72+ }
73+ }
74+ }
75+ }
76+
77+ Rectangle {
78+ id: slideShow
79+ objectName: "slideShow"
80+
81+ readonly property real initialScale: previewImageListView.height / rootItem.height
82+ readonly property real scaleProgress: (scale - initialScale) / (1.0 - initialScale)
83+ property real initialX: 0
84+ property real initialY: 0
85+
86+ parent: rootItem
87+ width: parent.width
88+ height: parent.height
89+ visible: false
90+ clip: visible && scale < 1.0
91+ scale: visible ? 1.0 : initialScale
92+ transformOrigin: Item.TopLeft
93+ transform: Translate {
94+ x: slideShow.initialX - slideShow.initialX * slideShow.scaleProgress
95+ y: slideShow.initialY - slideShow.initialY * slideShow.scaleProgress
96+ }
97+ color: "black"
98+ radius: units.gu(1) - units.gu(1) * slideShow.scaleProgress
99+
100+ Behavior on scale {
101+ enabled: !slideShow.visible
102+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
103+ }
104+
105+ ListView {
106+ id: slideShowListView
107+ objectName: "slideShowListView"
108+ anchors.fill: parent
109+ orientation: ListView.Horizontal
110+ highlightRangeMode: ListView.StrictlyEnforceRange
111+ highlightMoveDuration: 0
112+ snapMode: ListView.SnapOneItem
113+ boundsBehavior: Flickable.DragAndOvershootBounds
114+ model: root.widgetData["sources"]
115+
116+ delegate: Image {
117+ id: screenshot
118+ anchors {
119+ top: parent.top
120+ bottom: parent.bottom
121+ }
122+ width: slideShow.width
123+ source: modelData ? modelData : ""
124+ fillMode: Image.PreserveAspectFit
125+ sourceSize { width: screenshot.width; height: screenshot.height }
126+ }
127+
128+ MouseArea {
129+ anchors.fill: parent
130+ onClicked: slideShowHeader.shown = !slideShowHeader.shown
131+ }
132+ }
133+
134+ Rectangle {
135+ id: slideShowHeader
136+
137+ property bool shown: true
138+
139+ anchors {
140+ left: parent.left
141+ right: parent.right
142+ }
143+ height: units.gu(7)
144+ visible: opacity > 0
145+ opacity: slideShow.scaleProgress > 0.6 && shown ? 0.8 : 0
146+ color: "black"
147+
148+ Behavior on opacity {
149+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
150+ }
151+
152+ AbstractButton {
153+ id: slideShowCloseButton
154+ objectName: "slideShowCloseButton"
155+ anchors {
156+ top: parent.top
157+ bottom: parent.bottom
158+ }
159+ width: units.gu(8)
160+ height: width
161+
162+ onClicked: slideShow.visible = false
163+
164+ Rectangle {
165+ anchors.fill: parent
166+ color: Qt.rgba(1.0, 1.0, 1.0, 0.3)
167+ visible: slideShowCloseButton.pressed
168+ }
169+
170+ Icon {
171+ id: icon
172+ anchors.centerIn: parent
173+ width: units.gu(2.5)
174+ height: width
175+ color: Theme.palette.normal.foregroundText
176+ name: "close"
177+ }
178+ }
76 }
179 }
77 }
180 }
78}
181}
tests/qmltests/Dash/Previews/tst_PreviewImageGallery.qml+51−1
@@ -21,7 +21,7 @@ import Unity.Test 0.1 as UT
21
21
22Rectangle {
22Rectangle {
23 id: root
23 id: root
24− width: units.gu(60)
24+ width: units.gu(80)
25 height: units.gu(80)
25 height: units.gu(80)
26 color: "lightgrey"
26 color: "lightgrey"
27
27
@@ -44,13 +44,63 @@ Rectangle {
44 }
44 }
45
45
46 UT.UnityTestCase {
46 UT.UnityTestCase {
47+ id: testCase
47 name: "PreviewImageGalleryTest"
48 name: "PreviewImageGalleryTest"
48 when: windowShown
49 when: windowShown
49
50
51+ property Item slideShow: findChild(imageGallery.rootItem, "slideShow")
52+ property Item slideShowCloseButton: findChild(slideShow, "slideShowCloseButton")
53+ property Item slideShowListView: findChild(slideShow, "slideShowListView")
54+
55+ function cleanup() {
56+ slideShow.visible = false;
57+ imageGallery.widgetData = sourcesModel1;
58+ waitForRendering(imageGallery);
59+ }
60+
50 function test_changeEmptyModel() {
61 function test_changeEmptyModel() {
51 imageGallery.widgetData = sourcesModel0;
62 imageGallery.widgetData = sourcesModel0;
52 var placeholderScreenshot = findChild(imageGallery, "placeholderScreenshot");
63 var placeholderScreenshot = findChild(imageGallery, "placeholderScreenshot");
53 compare(placeholderScreenshot.visible, true);
64 compare(placeholderScreenshot.visible, true);
54 }
65 }
66+
67+ function test_slideShowOpenClose() {
68+ var image0 = findChild(imageGallery, "previewImage0");
69+ mouseClick(image0, image0.width / 2, image0.height / 2);
70+ tryCompare(slideShow, "visible", true);
71+ tryCompare(slideShow, "scale", 1.0);
72+ tryCompare(slideShowCloseButton, "visible", true);
73+ mouseClick(slideShowCloseButton, slideShowCloseButton.width / 2, slideShowCloseButton.height / 2);
74+ tryCompare(slideShow, "visible", false);
75+ }
76+
77+ function test_slideShowShowHideHeader() {
78+ var image0 = findChild(imageGallery, "previewImage0");
79+ mouseClick(image0, image0.width / 2, image0.height / 2);
80+ tryCompare(slideShow, "visible", true);
81+ tryCompare(slideShow, "scale", 1.0);
82+ tryCompare(slideShowCloseButton, "visible", true);
83+ mouseClick(slideShow, slideShow.width / 2, slideShow.height / 2);
84+ tryCompare(slideShowCloseButton, "visible", false);
85+ mouseClick(slideShow, slideShow.width / 2, slideShow.height / 2);
86+ tryCompare(slideShowCloseButton, "visible", true);
87+ }
88+
89+ function test_slideShowOpenCorrectImage_data() {
90+ return [
91+ { tag: "Image 0", index: 0 },
92+ { tag: "Image 1", index: 1 },
93+ { tag: "Image 2", index: 2 },
94+ ];
95+ }
96+
97+ function test_slideShowOpenCorrectImage(data) {
98+ var image = findChild(imageGallery, "previewImage" + data.index);
99+ mouseClick(image, image.width / 2, image.height / 2);
100+ tryCompare(slideShow, "visible", true);
101+ tryCompare(slideShow, "scale", 1.0);
102+ tryCompare(slideShowListView, "currentIndex", data.index);
103+ verify(image.source === slideShowListView.currentItem.source);
104+ }
55 }
105 }
56}
106}