Unity 8
LauncherDelegate.qml
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  */
16 
17 import QtQuick 2.0
18 import Ubuntu.Components 1.1
19 
20 Item {
21  id: root
22 
23  property string iconName
24  property int count: 0
25  property bool countVisible: false
26  property int progress: -1
27  property bool itemFocused: false
28  property real maxAngle: 0
29  property bool inverted: false
30  property bool alerting: false
31  readonly property alias wiggling: wiggleAnim.running
32 
33  readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
34  readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
35 
36  property int itemWidth
37  property int itemHeight
38  // The angle used for rotating
39  property real angle: 0
40  // This is the offset that keeps the items inside the panel
41  property real offset: 0
42  property real itemOpacity: 1
43  property real brightness: 0
44  property double maxWiggleAngle: 5.0
45 
46  QtObject {
47  id: priv
48 
49  readonly property int wiggleDuration: UbuntuAnimation.SnapDuration
50  property real wiggleAngle: 0
51  }
52 
53  SequentialAnimation {
54  id: wiggleAnim
55 
56  running: alerting
57  loops: 1
58  alwaysRunToEnd: true
59 
60  NumberAnimation {
61  target: priv
62  property: "wiggleAngle"
63  from: 0
64  to: maxWiggleAngle
65  duration: priv.wiggleDuration
66  easing.type: Easing.InQuad
67  }
68 
69  NumberAnimation {
70  target: priv
71  property: "wiggleAngle"
72  from: maxWiggleAngle
73  to: -maxWiggleAngle
74  duration: priv.wiggleDuration
75  easing.type: Easing.InOutQuad
76  }
77 
78  NumberAnimation {
79  target: priv
80  property: "wiggleAngle"
81  from: -maxWiggleAngle
82  to: maxWiggleAngle
83  duration: priv.wiggleDuration
84  easing.type: Easing.InOutQuad
85  }
86 
87  NumberAnimation {
88  target: priv
89  property: "wiggleAngle"
90  from: maxWiggleAngle
91  to: -maxWiggleAngle
92  duration: priv.wiggleDuration
93  easing.type: Easing.InOutQuad
94  }
95 
96  NumberAnimation {
97  target: priv
98  property: "wiggleAngle"
99  from: -maxWiggleAngle
100  to: maxWiggleAngle
101  duration: priv.wiggleDuration
102  easing.type: Easing.InOutQuad
103  }
104 
105  NumberAnimation {
106  target: priv
107  property: "wiggleAngle"
108  from: maxWiggleAngle
109  to: 0
110  duration: priv.wiggleDuration
111  easing.type: Easing.OutQuad
112  }
113 
114  UbuntuNumberAnimation {
115  target: root
116  property: "alerting"
117  to: 0
118  }
119  }
120 
121  Item {
122  id: iconItem
123  width: parent.itemWidth + units.gu(1)
124  height: parent.itemHeight + units.gu(1)
125  anchors.centerIn: parent
126 
127  UbuntuShape {
128  id: iconShape
129  anchors.fill: parent
130  anchors.margins: units.gu(1)
131  radius: "medium"
132  borderSource: "none"
133 
134  image: Image {
135  id: iconImage
136  sourceSize.width: iconShape.width
137  sourceSize.height: iconShape.height
138  fillMode: Image.PreserveAspectCrop
139  source: root.iconName
140  }
141  }
142 
143  BorderImage {
144  id: itemGlow
145  anchors.centerIn: iconItem
146  source: "graphics/icon-top-highlight.png"
147  width: root.itemWidth - units.gu(1)
148  height: root.itemHeight - units.gu(1)
149  }
150 
151  UbuntuShape {
152  id: countEmblem
153  objectName: "countEmblem"
154  anchors {
155  right: parent.right
156  bottom: parent.bottom
157  margins: units.dp(3)
158  }
159  width: Math.min(root.itemWidth, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
160  height: units.gu(2)
161  color: UbuntuColors.orange
162  visible: root.countVisible
163  borderSource: "none"
164 
165  Label {
166  id: countLabel
167  objectName: "countLabel"
168  text: root.count
169  anchors.centerIn: parent
170  // FIXME: verticalCenter seems to be off wee bit and QML doesn't have a centerLine
171  // property for Text: https://bugreports.qt-project.org/browse/QTBUG-40479
172  anchors.verticalCenterOffset: -units.dp(.5)
173  width: root.itemWidth - units.gu(1)
174  horizontalAlignment: Text.AlignHCenter
175  elide: Text.ElideRight
176  color: "white"
177  fontSize: "x-small"
178  }
179  }
180 
181  UbuntuShape {
182  id: progressOverlay
183  objectName: "progressOverlay"
184 
185  anchors {
186  left: iconItem.left
187  right: iconItem.right
188  verticalCenter: parent.verticalCenter
189  leftMargin: units.gu(1.5)
190  rightMargin: units.gu(1.5)
191  }
192  height: units.gu(1)
193  visible: root.progress > -1
194  color: UbuntuColors.darkGrey
195  borderSource: "none"
196 
197  Item {
198  anchors {
199  left: parent.left
200  top: parent.top
201  bottom: parent.bottom
202  }
203  width: Math.min(100, root.progress) / 100 * parent.width
204  clip: true
205 
206  UbuntuShape {
207  anchors {
208  left: parent.left
209  top: parent.top
210  bottom: parent.bottom
211  }
212  color: "white"
213  borderSource: "none"
214  width: progressOverlay.width
215  }
216  }
217  }
218 
219  Image {
220  objectName: "focusedHighlight"
221  anchors {
222  right: parent.right
223  verticalCenter: parent.verticalCenter
224  }
225  visible: root.itemFocused
226  source: "graphics/focused_app_arrow.png"
227  }
228  }
229 
230  ShaderEffect {
231  id: transformEffect
232  anchors.centerIn: parent
233  anchors.verticalCenterOffset: root.offset
234  width: iconItem.width
235  height: iconItem.height
236  property real itemOpacity: root.itemOpacity
237  property real brightness: Math.max(-1, root.brightness)
238  property real angle: root.angle
239  rotation: root.inverted ? 180 : 0
240 
241  property variant source: ShaderEffectSource {
242  id: shaderEffectSource
243  sourceItem: iconItem
244  hideSource: true
245  }
246 
247  transform: [
248  // The rotation about the icon's center/z-axis for the wiggle
249  // needs to happen here too, because there's no other way to
250  // align the wiggle with the icon-folding otherwise
251  Rotation {
252  axis { x: 0; y: 0; z: 1 }
253  origin { x: iconItem.width / 2; y: iconItem.height / 2; z: 0 }
254  angle: priv.wiggleAngle
255  },
256  // Rotating 3 times at top/bottom because that increases the perspective.
257  // This is a hack, but as QML does not support real 3D coordinates
258  // getting a higher perspective can only be done by a hack. This is the most
259  // readable/understandable one I could come up with.
260  Rotation {
261  axis { x: 1; y: 0; z: 0 }
262  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
263  angle: root.angle * 0.7
264  },
265  Rotation {
266  axis { x: 1; y: 0; z: 0 }
267  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
268  angle: root.angle * 0.7
269  },
270  Rotation {
271  axis { x: 1; y: 0; z: 0 }
272  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
273  angle: root.angle * 0.7
274  },
275  // Because rotating it 3 times moves it more to the front/back, i.e. it gets
276  // bigger/smaller and we need a scale to compensate that again.
277  Scale {
278  xScale: 1 - (Math.abs(angle) / 500)
279  yScale: 1 - (Math.abs(angle) / 500)
280  origin { x: iconItem.width / 2; y: iconItem.height / 2}
281  }
282  ]
283 
284  // Using a fragment shader instead of QML's opacity and BrightnessContrast
285  // to be able to do both in one step which gives quite some better performance
286  fragmentShader: "
287  varying highp vec2 qt_TexCoord0;
288  uniform sampler2D source;
289  uniform lowp float brightness;
290  uniform lowp float itemOpacity;
291  void main(void)
292  {
293  highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
294  sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
295  sourceColor *= itemOpacity;
296  gl_FragColor = sourceColor;
297  }"
298  }
299 }