on xenial help sign in
Add slideshow to previewImageGallery
48e19e5Andrea Cimitan
qml/Dash/Previews/PreviewImageGallery.qml+115−18
@@ -26,6 +26,8 @@ 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
31 spacing: units.gu(1)
33 spacing: units.gu(1)
@@ -35,24 +37,6 @@ PreviewWidget {
35 model: root.widgetData["sources"]
37 model: root.widgetData["sources"]
36 clip: true
38 clip: true
37
39
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 {
40 LazyImage {
57 objectName: "placeholderScreenshot"
41 objectName: "placeholderScreenshot"
58 anchors {
42 anchors {
@@ -73,6 +57,119 @@ PreviewWidget {
73 source: modelData ? modelData : ""
57 source: modelData ? modelData : ""
74 scaleTo: "height"
58 scaleTo: "height"
75 initialWidth: units.gu(13)
59 initialWidth: units.gu(13)
60+
61+ MouseArea {
62+ anchors.fill: parent
63+ onClicked: {
64+ slideShowListView.currentIndex = index;
65+ slideShow.initialX = rootItem.mapFromItem(parent, 0, 0).x
66+ slideShow.initialY = rootItem.mapFromItem(parent, 0, 0).y
67+ slideShow.visible = true;
68+ }
69+ }
70+ }
71+ }
72+
73+ Rectangle {
74+ id: slideShow
75+ objectName: "slideShow"
76+
77+ readonly property real initialScale: previewImageListView.height / rootItem.height
78+ readonly property real scaleProgress: (scale - initialScale) / (1.0 - initialScale)
79+ property real initialX: 0
80+ property real initialY: 0
81+
82+ parent: rootItem
83+ width: parent.width
84+ height: parent.height
85+ visible: false
86+ clip: visible && scale < 1.0
87+ scale: visible ? 1.0 : initialScale
88+ transformOrigin: Item.TopLeft
89+ transform: Translate {
90+ x: slideShow.initialX - slideShow.initialX * slideShow.scaleProgress
91+ y: slideShow.initialY - slideShow.initialY * slideShow.scaleProgress
92+ }
93+ color: "black"
94+
95+ Behavior on scale {
96+ enabled: !slideShow.visible
97+ UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
98+ }
99+
100+ ListView {
101+ id: slideShowListView
102+ anchors.fill: parent
103+ orientation: ListView.Horizontal
104+ highlightRangeMode: ListView.StrictlyEnforceRange
105+ highlightMoveDuration: 0
106+ snapMode: ListView.SnapOneItem
107+ boundsBehavior: Flickable.DragAndOvershootBounds
108+ model: root.widgetData["sources"]
109+
110+ delegate: Image {
111+ id: screenshot
112+ anchors {
113+ top: parent.top
114+ bottom: parent.bottom
115+ }
116+ width: slideShow.width
117+ source: modelData ? modelData : ""
118+ fillMode: Image.PreserveAspectFit
119+ sourceSize { width: screenshot.width; height: screenshot.height }
120+ }
121+
122+ MouseArea {
123+ anchors.fill: parent
124+ onClicked: slideShowHeader.shown = !slideShowHeader.shown
125+ }
126+ }
127+
128+ Rectangle {
129+ id: slideShowHeader
130+
131+ property bool shown: true
132+
133+ anchors {
134+ left: parent.left
135+ right: parent.right
136+ }
137+ height: units.gu(7)
138+ visible: opacity > 0
139+ opacity: shown ? 0.8 : 0
140+ color: "black"
141+
142+ Behavior on opacity {
143+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
144+ }
145+
146+ AbstractButton {
147+ id: slideShowBackButton
148+ objectName: "slideShowBackButton"
149+ anchors {
150+ top: parent.top
151+ bottom: parent.bottom
152+ }
153+ width: units.gu(8)
154+ height: width
155+
156+ onClicked: slideShow.visible = false
157+
158+ Rectangle {
159+ anchors.fill: parent
160+ color: Qt.rgba(1.0, 1.0, 1.0, 0.3)
161+ visible: slideShowBackButton.pressed
162+ }
163+
164+ Icon {
165+ id: icon
166+ anchors.centerIn: parent
167+ width: units.gu(2.5)
168+ height: width
169+ color: Theme.palette.normal.foregroundText
170+ name: "back"
171+ }
172+ }
76 }
173 }
77 }
174 }
78}
175}