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