2 * Copyright (C) 2013 Canonical, Ltd.
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.
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.
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/>.
18 import Ubuntu.Components 0.1
23 property string iconName
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 clipCorner: false
32 readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
33 readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
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
46 width: parent.itemWidth + units.gu(1)
47 height: parent.itemHeight + units.gu(1)
48 anchors.centerIn: parent
53 anchors.margins: units.gu(1)
59 sourceSize.width: iconShape.width
60 sourceSize.height: iconShape.height
61 fillMode: Image.PreserveAspectCrop
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)
75 objectName: "countEmblem"
81 width: Math.min(root.itemWidth, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
83 color: UbuntuColors.orange
84 visible: root.countVisible
89 objectName: "countLabel"
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
105 objectName: "progressOverlay"
108 right: iconItem.right
109 bottom: iconItem.bottom
110 leftMargin: units.gu(1)
111 rightMargin: units.gu(1)
112 bottomMargin: units.gu(1)
114 height: units.gu(1.5)
115 visible: root.progress > -1
116 source: "graphics/progressbar-trough.sci"
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)
125 bottom: parent.bottom
127 width: Math.min(100, root.progress) / 100 * parent.adjustedWidth + units.gu(1)
134 bottom: parent.bottom
136 width: progressOverlay.width
137 source: "graphics/progressbar-fill.sci"
142 objectName: "focusedHighlight"
145 verticalCenter: parent.verticalCenter
147 visible: root.itemFocused
148 source: "graphics/focused_app_arrow.png"
154 anchors.centerIn: parent
155 width: iconItem.width
156 height: iconItem.height
160 topMargin: -units.gu(2)
161 leftMargin: -units.gu(2)
162 rightMargin: -units.gu(2)
163 bottomMargin: units.gu(1.2)
166 rotation: root.rotation + 45
172 anchors.centerIn: parent
173 anchors.verticalCenterOffset: root.offset
174 width: iconItem.width
175 height: iconItem.height
176 property real itemOpacity: root.itemOpacity
177 property real brightness: Math.max(-1, root.brightness)
178 property real angle: root.angle
179 property bool clipCorner: root.clipCorner
180 rotation: root.inverted ? 180 : 0
182 property variant source: ShaderEffectSource {
183 id: shaderEffectSource
188 property var mask: ShaderEffectSource {
194 // Rotating 3 times at top/bottom because that increases the perspective.
195 // This is a hack, but as QML does not support real 3D coordinates
196 // getting a higher perspective can only be done by a hack. This is the most
197 // readable/understandable one I could come up with.
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
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
209 axis { x: 1; y: 0; z: 0 }
210 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
211 angle: root.angle * 0.7
213 // Because rotating it 3 times moves it more to the front/back, i.e. it gets
214 // bigger/smaller and we need a scale to compensate that again.
216 xScale: 1 - (Math.abs(angle) / 500)
217 yScale: 1 - (Math.abs(angle) / 500)
218 origin { x: iconItem.width / 2; y: iconItem.height / 2}
222 // Using a fragment shader instead of QML's opacity and BrightnessContrast
223 // to be able to do both in one step which gives quite some better performance
225 varying highp vec2 qt_TexCoord0;
226 uniform sampler2D source;
227 uniform sampler2D mask;
228 uniform lowp float brightness;
229 uniform lowp float itemOpacity;
230 uniform bool clipCorner;
233 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
234 highp vec4 maskColor = texture2D(mask, qt_TexCoord0);
235 sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
236 sourceColor *= itemOpacity;
238 sourceColor *= maskColor.a;
240 gl_FragColor = sourceColor;