Unity 8
PreviewOverlay.qml
1 /*
2  * Copyright (C) 2014,2015 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.4
18 import Ubuntu.Components 1.3
19 import "../../Components"
20 
21 Rectangle {
22  id: overlay
23  objectName: "overlay"
24 
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
29 
30  property alias delegate: loader.sourceComponent
31  property alias delegateItem: loader.item
32  property alias headerShown: overlayHeader.shown
33  property real initialX: 0
34  property real initialY: 0
35  property real initialWidth: 1
36  property real initialHeight: 1
37 
38  property real xScale: initialXScale
39  property real yScale: initialYScale
40  property real progress: 0
41 
42  implicitWidth: 1
43  implicitHeight: 1
44  visible: progress > 0
45  clip: progress > 0 && progress < 1
46  color: Qt.rgba(0, 0, 0, progress)
47  transformOrigin: Item.TopLeft
48  transform: [
49  Scale {
50  origin.x: 0
51  origin.y: 0
52  xScale: overlay.xScale
53  yScale: overlay.yScale
54  },
55  Translate {
56  x: overlay.initialX - overlay.initialX * overlay.progress
57  y: overlay.initialY - overlay.initialY * overlay.progress
58  }
59  ]
60  state: "hidden"
61  states: [
62  State {
63  name: "shown"
64  PropertyChanges { target: overlay; progress: 1; xScale: 1; yScale: 1 }
65  },
66  State {
67  name: "hidden"
68  PropertyChanges { target: overlay; progress: 0; xScale: initialXScale; yScale: initialYScale }
69  }
70  ]
71  transitions: [
72  Transition {
73  from: "hidden"
74  to: "shown"
75  UbuntuNumberAnimation {
76  target: overlay
77  properties: "progress,xScale,yScale"
78  duration: UbuntuAnimation.FastDuration
79  }
80  },
81  Transition {
82  from: "shown"
83  to: "hidden"
84  UbuntuNumberAnimation {
85  target: overlay
86  properties: "progress,xScale,yScale"
87  duration: UbuntuAnimation.FastDuration / 2
88  }
89  }
90  ]
91 
92  function show() {
93  state = "shown"
94  }
95 
96  function hide() {
97  state = "hidden"
98  }
99 
100  Loader {
101  id: loader
102  anchors.fill: parent
103 
104  readonly property bool verticalScaling: initialAspectRatio / aspectRatio >= 1
105  readonly property real initialXScale: verticalScaling ? 1 : aspectRatio / initialAspectRatio
106  readonly property real initialYScale: verticalScaling ? initialAspectRatio / aspectRatio : 1
107  readonly property real xScale: verticalScaling ? loader.initialXScale - loader.initialXScale * overlay.progress + overlay.progress :
108  loader.yScale * overlay.yScale / overlay.xScale
109  readonly property real yScale: verticalScaling ? loader.xScale * overlay.xScale / overlay.yScale :
110  loader.initialYScale - loader.initialYScale * overlay.progress + overlay.progress
111 
112  transform: Scale {
113  origin.x: parent.width / 2
114  origin.y: parent.height / 2
115  xScale: loader.xScale
116  yScale: loader.yScale
117  }
118  }
119 
120  Rectangle {
121  id: overlayHeader
122 
123  property bool shown: true
124 
125  anchors {
126  left: parent.left
127  right: parent.right
128  }
129  height: units.gu(7)
130  visible: opacity > 0
131  opacity: overlay.state == "shown" && overlay.progress > 0.8 && shown ? 0.8 : 0
132  color: "black"
133 
134  Behavior on opacity {
135  UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
136  }
137 
138  AbstractButton {
139  id: overlayCloseButton
140  objectName: "overlayCloseButton"
141  anchors {
142  top: parent.top
143  bottom: parent.bottom
144  }
145  width: units.gu(8)
146  height: width
147 
148  onClicked: overlay.hide()
149 
150  Rectangle {
151  anchors.fill: parent
152  color: Qt.rgba(1.0, 1.0, 1.0, 0.3)
153  visible: overlayCloseButton.pressed
154  }
155 
156  Icon {
157  id: icon
158  anchors.centerIn: parent
159  width: units.gu(2.5)
160  height: width
161  color: theme.palette.normal.foregroundText
162  name: "close"
163  }
164  }
165  }
166 }