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 1.3
23 property string iconName
25 property bool countVisible: false
26 property int progress: -1
27 property bool itemRunning: false
28 property bool itemFocused: false
29 property real maxAngle: 0
30 property bool inverted: false
31 property bool alerting: false
32 readonly property alias wiggling: wiggleAnim.running
34 readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
35 readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
37 property int itemWidth
38 property int itemHeight
39 // The angle used for rotating
40 property real angle: 0
41 // This is the offset that keeps the items inside the panel
42 property real offset: 0
43 property real itemOpacity: 1
44 property real brightness: 0
45 property double maxWiggleAngle: 5.0
50 readonly property int wiggleDuration: UbuntuAnimation.SnapDuration
51 property real wiggleAngle: 0
63 property: "wiggleAngle"
66 duration: priv.wiggleDuration
67 easing.type: Easing.InQuad
72 property: "wiggleAngle"
75 duration: priv.wiggleDuration
76 easing.type: Easing.InOutQuad
81 property: "wiggleAngle"
84 duration: priv.wiggleDuration
85 easing.type: Easing.InOutQuad
90 property: "wiggleAngle"
93 duration: priv.wiggleDuration
94 easing.type: Easing.InOutQuad
99 property: "wiggleAngle"
100 from: -maxWiggleAngle
102 duration: priv.wiggleDuration
103 easing.type: Easing.InOutQuad
108 property: "wiggleAngle"
111 duration: priv.wiggleDuration
112 easing.type: Easing.OutQuad
115 UbuntuNumberAnimation {
124 width: parent.itemWidth + units.gu(1)
125 height: parent.itemHeight + units.gu(1)
126 anchors.centerIn: parent
131 anchors.margins: units.gu(1)
133 aspect: UbuntuShape.Flat
134 sourceFillMode: UbuntuShape.PreserveAspectCrop
137 sourceSize.width: iconShape.width
138 sourceSize.height: iconShape.height
139 source: root.iconName
145 anchors.centerIn: iconItem
146 source: "graphics/icon-top-highlight.png"
147 width: root.itemWidth - units.gu(1)
148 height: root.itemHeight - units.gu(1)
153 objectName: "countEmblem"
156 bottom: parent.bottom
159 width: Math.min(root.itemWidth, Math.max(units.gu(2), countLabel.implicitWidth + units.gu(1)))
161 backgroundColor: UbuntuColors.orange
162 visible: root.countVisible
163 aspect: UbuntuShape.Flat
167 objectName: "countLabel"
169 anchors.centerIn: parent
170 // FIXME: verticalCenter seems to be off wee bit and QML doesn't have a centerLine
171 // property for Text: https://bugreports.qt-project.org/browse/QTBUG-40479
172 anchors.verticalCenterOffset: -units.dp(.5)
173 width: root.itemWidth - units.gu(1)
174 horizontalAlignment: Text.AlignHCenter
175 elide: Text.ElideRight
183 objectName: "progressOverlay"
187 right: iconItem.right
188 verticalCenter: parent.verticalCenter
189 leftMargin: units.gu(1.5)
190 rightMargin: units.gu(1.5)
193 visible: root.progress > -1
194 color: UbuntuColors.darkGrey
201 bottom: parent.bottom
203 width: Math.min(100, root.progress) / 100 * parent.width
210 bottom: parent.bottom
214 width: progressOverlay.width
220 objectName: "runningHighlight"
223 verticalCenter: parent.verticalCenter
225 visible: root.itemRunning
227 source: "graphics/focused_app_arrow.png"
231 objectName: "focusedHighlight"
234 verticalCenter: parent.verticalCenter
236 visible: root.itemFocused
237 source: "graphics/focused_app_arrow.png"
243 anchors.centerIn: parent
244 anchors.verticalCenterOffset: root.offset
245 width: iconItem.width
246 height: iconItem.height
247 property real itemOpacity: root.itemOpacity
248 property real brightness: Math.max(-1, root.brightness)
249 property real angle: root.angle
250 rotation: root.inverted ? 180 : 0
252 property variant source: ShaderEffectSource {
253 id: shaderEffectSource
259 // The rotation about the icon's center/z-axis for the wiggle
260 // needs to happen here too, because there's no other way to
261 // align the wiggle with the icon-folding otherwise
263 axis { x: 0; y: 0; z: 1 }
264 origin { x: iconItem.width / 2; y: iconItem.height / 2; z: 0 }
265 angle: priv.wiggleAngle
267 // Rotating 3 times at top/bottom because that increases the perspective.
268 // This is a hack, but as QML does not support real 3D coordinates
269 // getting a higher perspective can only be done by a hack. This is the most
270 // readable/understandable one I could come up with.
272 axis { x: 1; y: 0; z: 0 }
273 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
274 angle: root.angle * 0.7
277 axis { x: 1; y: 0; z: 0 }
278 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
279 angle: root.angle * 0.7
282 axis { x: 1; y: 0; z: 0 }
283 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
284 angle: root.angle * 0.7
286 // Because rotating it 3 times moves it more to the front/back, i.e. it gets
287 // bigger/smaller and we need a scale to compensate that again.
289 xScale: 1 - (Math.abs(angle) / 500)
290 yScale: 1 - (Math.abs(angle) / 500)
291 origin { x: iconItem.width / 2; y: iconItem.height / 2}
295 // Using a fragment shader instead of QML's opacity and BrightnessContrast
296 // to be able to do both in one step which gives quite some better performance
298 varying highp vec2 qt_TexCoord0;
299 uniform sampler2D source;
300 uniform lowp float brightness;
301 uniform lowp float itemOpacity;
304 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
305 sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
306 sourceColor *= itemOpacity;
307 gl_FragColor = sourceColor;