git.iko.soy/unity8
on 0d255ad help sign in
unity8/Launcher/LauncherDelegate.qml
289 lines 12 kB history raw
1/*
2 * Copyright (C) 2013 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 */
17import QtQuick 2.0
18import Ubuntu.Components 0.1
20Item {
21 id: root
23 property string iconName
25 property real angle: 0
26 property bool highlighted: false
27 property real offset: 0
28 property alias brightness: transformEffect.brightness
29 property real itemOpacity: 1
31 property real maxAngle: 0
32 property bool inverted: false
34 readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * height
35 readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * height
37 property bool dragging:false
39 signal clicked()
40 signal longtap()
41 signal released()
43 Item {
44 id: iconItem
45 width: parent.width
46 height: parent.height
47 anchors.centerIn: parent
49 UbuntuShape {
50 id: iconShape
51 anchors.fill: parent
52 anchors.margins: units.gu(0.5)
53 radius: "medium"
55 image: Image {
56 id: iconImage
57 sourceSize.width: iconShape.width
58 sourceSize.height: iconShape.height
59 source: "../graphics/applicationIcons/" + root.iconName + ".png"
60 }
62 MouseArea {
63 id: mouseArea
64 anchors.fill: parent
65 onClicked: root.clicked()
66 onCanceled: root.released()
67 preventStealing: false
69 onPressAndHold: {
70 root.state = "moving"
71 }
72 onReleased: {
73 root.state = "docked"
74 }
75 }
76 }
77 BorderImage {
78 id: overlayHighlight
79 anchors.centerIn: iconItem
80 rotation: inverted ? 180 : 0
81 source: isSelected ? "graphics/selected.sci" : "graphics/non-selected.sci"
82 width: root.width + units.gu(0.5)
83 height: width
84 property bool isSelected: root.highlighted || mouseArea.pressed
85 onIsSelectedChanged: shaderEffectSource.scheduleUpdate();
86 }
87 }
89 ShaderEffect {
90 id: transformEffect
91 anchors.centerIn: parent
92 anchors.verticalCenterOffset: root.offset
93 width: parent.width
94 height: parent.height
95 property real itemOpacity: root.itemOpacity
96 property real brightness: 0
97 property real angle: root.angle
98 rotation: root.inverted ? 180 : 0
101 property variant source: ShaderEffectSource {
102 id: shaderEffectSource
103 sourceItem: iconItem
104 hideSource: true
105 live: false
106 }
108 transform: [
109 // Rotating 3 times at top/bottom because that increases the perspective.
110 // This is a hack, but as QML does not support real 3D coordinates
111 // getting a higher perspective can only be done by a hack. This is the most
112 // readable/understandable one I could come up with.
113 Rotation {
114 axis { x: 1; y: 0; z: 0 }
115 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
116 angle: root.angle * 0.7
117 },
118 Rotation {
119 axis { x: 1; y: 0; z: 0 }
120 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
121 angle: root.angle * 0.7
122 },
123 Rotation {
124 axis { x: 1; y: 0; z: 0 }
125 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
126 angle: root.angle * 0.7
127 },
128 // Because rotating it 3 times moves it more to the front/back, i.e. it gets
129 // bigger/smaller and we need a scale to compensate that again.
130 Scale {
131 xScale: 1 - (Math.abs(angle) / 500)
132 yScale: 1 - (Math.abs(angle) / 500)
133 origin { x: iconItem.width / 2; y: iconItem.height / 2}
134 }
135 ]
137 // Using a fragment shader instead of QML's opacity and BrightnessContrast
138 // to be able to do both in one step which gives quite some better performance
139 fragmentShader: "
140 varying highp vec2 qt_TexCoord0;
141 uniform sampler2D source;
142 uniform lowp float brightness;
143 uniform lowp float itemOpacity;
144 void main(void)
145 {
146 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
147 sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
148 sourceColor *= itemOpacity;
149 gl_FragColor = sourceColor;
150 }"
151 }
153 QtObject {
154 id: priv
156 property ListView listView: root.ListView.view
157 property real totalUnfoldedHeight: listView.itemSize + listView.spacing
158 property real totalEffectiveHeight: effectiveHeight + listView.spacing
159 property real effectiveContentY: listView.contentY - listView.originY
160 property real effectiveY: y - listView.originY
161 property real distanceFromTopEdge: -(effectiveContentY + listView.topMargin - index*totalUnfoldedHeight)
162 property real distanceFromBottomEdge: listView.height - listView.bottomMargin - (effectiveY+height) + effectiveContentY
164 property real distanceFromEdge: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? distanceFromBottomEdge : distanceFromTopEdge
165 property real orientationFlag: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? -1 : 1
167 property real overlapWithFoldingArea: listView.foldingAreaHeight - distanceFromEdge
168 }
170 states: [
171 State {
172 name: "docked"
173 PropertyChanges {
174 target: root
176 // This is the offset that keeps the items inside the panel
177 offset: {
178 // First/last items are special
179 if (index == 0 || index == priv.listView.count-1) {
180 // Just keep them bound to the edges in case they're outside of the visible area
181 if (priv.distanceFromEdge < 0) {
182 return (-priv.distanceFromEdge - (height - effectiveHeight)) * priv.orientationFlag;
183 }
184 return 0;
185 }
187 // Are we already completely outside the flickable? Stop the icon here.
188 if (priv.distanceFromEdge < -priv.totalUnfoldedHeight) {
189 return (-priv.distanceFromEdge - (root.height - effectiveHeight)) * priv.orientationFlag;
190 }
192 // We're touching the edge, move slower than the actual flicking speed.
193 if (priv.distanceFromEdge < 0) {
194 return (Math.abs(priv.distanceFromEdge) * priv.totalEffectiveHeight / priv.totalUnfoldedHeight) * priv.orientationFlag
195 }
196 return 0;
197 }
199 // The angle used for rotating
200 angle: {
201 // First/last items are special
202 if (index == 0 || index == priv.listView.count-1) {
203 if (priv.distanceFromEdge < 0) {
204 // proportion equation: distanceFromTopEdge : angle = totalUnfoldedHeight/2 : maxAngle
205 return Math.max(-maxAngle, priv.distanceFromEdge * maxAngle / (priv.listView.foldingAreaHeight)) * priv.orientationFlag
206 }
207 return 0; // Don't fold first/last item as long as inside the view
208 }
210 // Are we in the already completely outside the flickable? Fold for the last 5 degrees
211 if (priv.distanceFromEdge < 0) {
212 // proportion equation: -distanceFromTopEdge : angle = totalUnfoldedHeight : 5
213 return Math.max(-maxAngle, (priv.distanceFromEdge * 5 / priv.listView.foldingAreaHeight) - (maxAngle-5)) * priv.orientationFlag
214 }
216 // We are overlapping with the folding area, fold the icon to maxAngle - 5 degrees
217 if (priv.overlapWithFoldingArea > 0) {
218 // proportion equation: overlap: totalHeight = angle : (maxAngle - 5)
219 return -priv.overlapWithFoldingArea * (maxAngle -5) / priv.listView.foldingAreaHeight * priv.orientationFlag;
220 }
221 return 0;
222 }
224 itemOpacity: {
225 // First/last items are special
226 if (index == 0 || index == priv.listView.count-1) {
227 if (priv.distanceFromEdge < 0) {
228 // Fade from 1 to 0 in the distance of 3 * foldingAreaHeight (which is when the next item reaches the edge)
229 return 1.0 - (-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
230 }
231 return 1; // Don't make first/last item transparent as long as inside the view
232 }
234 // Are we already completely outside the flickable? Fade from 0.75 to 0 in 2 items height
235 if (priv.distanceFromEdge < 0) {
236 // proportion equation: -distanceFromEdge : 1-opacity = totalUnfoldedHeight : 0.75
237 return 0.75 - (-priv.distanceFromEdge * 0.75 / (priv.totalUnfoldedHeight*2))
238 }
240 // We are overlapping with the folding area, fade out to 0.75
241 if (priv.overlapWithFoldingArea > 0) {
242 // proportion equation: overlap : totalHeight = 1-opacity : 0.25
243 return 1 - (priv.overlapWithFoldingArea * 0.25 / priv.listView.foldingAreaHeight)
244 }
245 return 1;
246 }
248 brightness: {
249 // First/last items are special
250 if (index == 0 || index == priv.listView.count-1) {
251 if (priv.distanceFromEdge < 0) {
252 return -(-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
253 }
254 return 0;
255 }
256 // Are we already completely outside the flickable? Fade from 0.7 to 0 in 2 items height
257 if (priv.distanceFromEdge < 0) {
258 return -0.3 - (-priv.distanceFromEdge * 0.1 / (priv.totalUnfoldedHeight*2))
259 }
261 // We are overlapping with the folding area, fade out to 0.7
262 if (priv.overlapWithFoldingArea > 0) {
263 return - (priv.overlapWithFoldingArea * 0.3 / priv.listView.foldingAreaHeight)
264 }
265 return 0;
266 }
267 }
268 },
270 State {
271 name: "moving"
272 PropertyChanges {
273 target: launcherDelegate;
274 offset: 0
275 angle: 0
276 }
277 PropertyChanges {
278 target: root
279 highlighted: true
280 dragging: true
281 }
282 PropertyChanges {
283 target: mouseArea
284 preventStealing: true
285 drag.target: root
286 }
287 }
288 ]