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