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