Unity 8
 All Classes Functions Properties
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 0.1
19 
20 Item {
21  id: root
22 
23  property string iconName
24  property int count: -1
25  property int progress: -1
26  property bool itemFocused: false
27  property real maxAngle: 0
28  property bool inverted: false
29  property bool clipCorner: false
30 
31  readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
32  readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
33 
34  property int itemWidth
35  property int itemHeight
36  // The angle used for rotating
37  property real angle: 0
38  // This is the offset that keeps the items inside the panel
39  property real offset: 0
40  property real itemOpacity: 1
41  property real brightness: 0
42 
43  Item {
44  id: iconItem
45  width: parent.itemWidth + units.gu(1)
46  height: parent.itemHeight + units.gu(1)
47  anchors.centerIn: parent
48 
49  UbuntuShape {
50  id: iconShape
51  anchors.fill: parent
52  anchors.margins: units.gu(1)
53  radius: "medium"
54  borderSource: "none"
55 
56  image: Image {
57  id: iconImage
58  sourceSize.width: iconShape.width
59  sourceSize.height: iconShape.height
60  fillMode: Image.PreserveAspectCrop
61  source: root.iconName
62  }
63  }
64 
65  BorderImage {
66  id: itemGlow
67  anchors.centerIn: iconItem
68  source: "graphics/icon-top-highlight.png"
69  width: root.itemWidth - units.gu(1)
70  height: root.itemHeight - units.gu(1)
71  }
72 
73  BorderImage {
74  objectName: "countEmblem"
75  anchors {
76  right: parent.right
77  top: parent.top
78  margins: units.dp(3)
79  }
80  width: Math.min(root.itemWidth, Math.max(units.gu(3), countLabel.implicitWidth + units.gu(2.5)))
81  height: units.gu(3)
82  source: "graphics/notification.sci"
83  visible: root.count > 0
84 
85  Label {
86  id: countLabel
87  text: root.count
88  anchors.centerIn: parent
89  width: root.itemWidth - units.gu(1)
90  horizontalAlignment: Text.AlignHCenter
91  elide: Text.ElideRight
92  color: "white"
93  fontSize: "small"
94  font.bold: true
95  }
96  }
97 
98  BorderImage {
99  id: progressOverlay
100  objectName: "progressOverlay"
101  anchors {
102  left: iconItem.left
103  right: iconItem.right
104  bottom: iconItem.bottom
105  leftMargin: units.gu(1)
106  rightMargin: units.gu(1)
107  bottomMargin: units.gu(1)
108  }
109  height: units.gu(1.5)
110  visible: root.progress > -1
111  source: "graphics/progressbar-trough.sci"
112 
113  // For fill calculation we need to remove the 2 units of border defined in .sci file
114  property int adjustedWidth: width - units.gu(2)
115 
116  Item {
117  anchors {
118  left: parent.left
119  top: parent.top
120  bottom: parent.bottom
121  }
122  width: Math.min(100, root.progress) / 100 * parent.adjustedWidth + units.gu(1)
123  clip: true
124 
125  BorderImage {
126  anchors {
127  left: parent.left
128  top: parent.top
129  bottom: parent.bottom
130  }
131  width: progressOverlay.width
132  source: "graphics/progressbar-fill.sci"
133  }
134  }
135  }
136  Image {
137  objectName: "focusedHighlight"
138  anchors {
139  right: parent.right
140  verticalCenter: parent.verticalCenter
141  }
142  visible: root.itemFocused
143  source: "graphics/focused_app_arrow.png"
144  }
145  }
146 
147  Item {
148  id: clipper
149  anchors.centerIn: parent
150  width: iconItem.width
151  height: iconItem.height
152  Rectangle {
153  anchors {
154  fill: parent
155  topMargin: -units.gu(2)
156  leftMargin: -units.gu(2)
157  rightMargin: -units.gu(2)
158  bottomMargin: units.gu(1.2)
159  }
160  color: "red"
161  rotation: root.rotation + 45
162  }
163  }
164 
165  ShaderEffect {
166  id: transformEffect
167  anchors.centerIn: parent
168  anchors.verticalCenterOffset: root.offset
169  width: iconItem.width
170  height: iconItem.height
171  property real itemOpacity: root.itemOpacity
172  property real brightness: Math.max(-1, root.brightness)
173  property real angle: root.angle
174  property bool clipCorner: root.clipCorner
175  rotation: root.inverted ? 180 : 0
176 
177  property variant source: ShaderEffectSource {
178  id: shaderEffectSource
179  sourceItem: iconItem
180  hideSource: true
181  }
182 
183  property var mask: ShaderEffectSource {
184  sourceItem: clipper
185  hideSource: true
186  }
187 
188  transform: [
189  // Rotating 3 times at top/bottom because that increases the perspective.
190  // This is a hack, but as QML does not support real 3D coordinates
191  // getting a higher perspective can only be done by a hack. This is the most
192  // readable/understandable one I could come up with.
193  Rotation {
194  axis { x: 1; y: 0; z: 0 }
195  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
196  angle: root.angle * 0.7
197  },
198  Rotation {
199  axis { x: 1; y: 0; z: 0 }
200  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
201  angle: root.angle * 0.7
202  },
203  Rotation {
204  axis { x: 1; y: 0; z: 0 }
205  origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
206  angle: root.angle * 0.7
207  },
208  // Because rotating it 3 times moves it more to the front/back, i.e. it gets
209  // bigger/smaller and we need a scale to compensate that again.
210  Scale {
211  xScale: 1 - (Math.abs(angle) / 500)
212  yScale: 1 - (Math.abs(angle) / 500)
213  origin { x: iconItem.width / 2; y: iconItem.height / 2}
214  }
215  ]
216 
217  // Using a fragment shader instead of QML's opacity and BrightnessContrast
218  // to be able to do both in one step which gives quite some better performance
219  fragmentShader: "
220  varying highp vec2 qt_TexCoord0;
221  uniform sampler2D source;
222  uniform sampler2D mask;
223  uniform lowp float brightness;
224  uniform lowp float itemOpacity;
225  uniform bool clipCorner;
226  void main(void)
227  {
228  highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
229  highp vec4 maskColor = texture2D(mask, qt_TexCoord0);
230  sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
231  sourceColor *= itemOpacity;
232  if (clipCorner) {
233  sourceColor *= maskColor.a;
234  }
235  gl_FragColor = sourceColor;
236  }"
237  }
238 }