Unity 8
 All Classes Functions
PreviewImageGallery.qml
1 /*
2  * Copyright (C) 2014 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.0
18 import Ubuntu.Components 1.1
19 import "../../Components"
20 
21 /*! This preview widget shows a horizontal list of images.
22  * The URIs for the images should be an array in widgetData["sources"].
23  */
24 
25 PreviewWidget {
26  id: root
27  implicitHeight: units.gu(22)
28 
29  property Item rootItem: QuickUtils.rootItem(root)
30 
31  ListView {
32  id: previewImageListView
33  objectName: "previewImageListView"
34  spacing: units.gu(1)
35  anchors.fill: parent
36  orientation: ListView.Horizontal
37  cacheBuffer: width * 3
38  model: root.widgetData["sources"]
39  clip: true
40 
41  LazyImage {
42  objectName: "placeholderScreenshot"
43  anchors {
44  top: parent.top
45  bottom: parent.bottom
46  }
47  scaleTo: "height"
48  source: "broken_image"
49  initialWidth: units.gu(13)
50  visible: previewImageListView.count == 0
51  }
52 
53  delegate: LazyImage {
54  objectName: "previewImage" + index
55  anchors {
56  top: parent.top
57  bottom: parent.bottom
58  }
59  source: modelData ? modelData : ""
60  scaleTo: "height"
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  }
179  }
180  }
181 }