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 import "../../Components/Flickables" as Flickables
21 
22 /*! This preview widget shows a horizontal list of images.
23  * The URIs for the images should be an array in widgetData["sources"].
24  */
25 
26 PreviewWidget {
27  id: root
28  implicitHeight: units.gu(22)
29 
30  property Item rootItem: QuickUtils.rootItem(root)
31 
32  Flickables.ListView {
33  id: previewImageListView
34  objectName: "previewImageListView"
35  spacing: units.gu(1)
36  anchors.fill: parent
37  orientation: ListView.Horizontal
38  cacheBuffer: width * 3
39  model: root.widgetData["sources"]
40  clip: true
41 
42  LazyImage {
43  objectName: "placeholderScreenshot"
44  anchors {
45  top: parent.top
46  bottom: parent.bottom
47  }
48  scaleTo: "height"
49  source: "broken_image"
50  initialWidth: units.gu(13)
51  visible: previewImageListView.count == 0
52  }
53 
54  delegate: LazyImage {
55  objectName: "previewImage" + index
56  anchors {
57  top: parent.top
58  bottom: parent.bottom
59  }
60  source: modelData ? modelData : ""
61  scaleTo: "height"
62  initialWidth: units.gu(13)
63  borderSource: mouseArea.pressed ? "radius_pressed.sci" : "radius_idle.sci"
64 
65  MouseArea {
66  id: mouseArea
67  anchors.fill: parent
68  onClicked: {
69  slideShowListView.currentIndex = index;
70  slideShow.initialX = rootItem.mapFromItem(parent, 0, 0).x
71  slideShow.initialY = rootItem.mapFromItem(parent, 0, 0).y
72  slideShow.visible = true;
73  }
74  }
75  }
76  }
77 
78  Rectangle {
79  id: slideShow
80  objectName: "slideShow"
81 
82  readonly property real initialScale: previewImageListView.height / rootItem.height
83  readonly property real scaleProgress: (scale - initialScale) / (1.0 - initialScale)
84  property real initialX: 0
85  property real initialY: 0
86 
87  parent: rootItem
88  width: parent.width
89  height: parent.height
90  visible: false
91  clip: visible && scale < 1.0
92  scale: visible ? 1.0 : initialScale
93  transformOrigin: Item.TopLeft
94  transform: Translate {
95  x: slideShow.initialX - slideShow.initialX * slideShow.scaleProgress
96  y: slideShow.initialY - slideShow.initialY * slideShow.scaleProgress
97  }
98  color: "black"
99  radius: units.gu(1) - units.gu(1) * slideShow.scaleProgress
100 
101  Behavior on scale {
102  enabled: !slideShow.visible
103  UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
104  }
105 
106  Flickables.ListView {
107  id: slideShowListView
108  objectName: "slideShowListView"
109  anchors.fill: parent
110  orientation: ListView.Horizontal
111  highlightRangeMode: ListView.StrictlyEnforceRange
112  highlightMoveDuration: 0
113  snapMode: ListView.SnapOneItem
114  boundsBehavior: Flickable.DragAndOvershootBounds
115  model: root.widgetData["sources"]
116 
117  delegate: Image {
118  id: screenshot
119  anchors {
120  top: parent.top
121  bottom: parent.bottom
122  }
123  width: slideShow.width
124  source: modelData ? modelData : ""
125  fillMode: Image.PreserveAspectFit
126  sourceSize { width: screenshot.width; height: screenshot.height }
127  }
128 
129  MouseArea {
130  anchors.fill: parent
131  onClicked: slideShowHeader.shown = !slideShowHeader.shown
132  }
133  }
134 
135  Rectangle {
136  id: slideShowHeader
137 
138  property bool shown: true
139 
140  anchors {
141  left: parent.left
142  right: parent.right
143  }
144  height: units.gu(7)
145  visible: opacity > 0
146  opacity: slideShow.scaleProgress > 0.6 && shown ? 0.8 : 0
147  color: "black"
148 
149  Behavior on opacity {
150  UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
151  }
152 
153  AbstractButton {
154  id: slideShowCloseButton
155  objectName: "slideShowCloseButton"
156  anchors {
157  top: parent.top
158  bottom: parent.bottom
159  }
160  width: units.gu(8)
161  height: width
162 
163  onClicked: slideShow.visible = false
164 
165  Rectangle {
166  anchors.fill: parent
167  color: Qt.rgba(1.0, 1.0, 1.0, 0.3)
168  visible: slideShowCloseButton.pressed
169  }
170 
171  Icon {
172  id: icon
173  anchors.centerIn: parent
174  width: units.gu(2.5)
175  height: width
176  color: Theme.palette.normal.foregroundText
177  name: "close"
178  }
179  }
180  }
181  }
182 }