git.iko.soy/unity8
on cec6433 help sign in
unity8/Launcher/LauncherDelegate.qml
203 lines 7.2 kB history raw
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 */
17import QtQuick 2.0
18import Ubuntu.Components 0.1
20Item {
21 id: root
23 property string iconName
24 property int count: -1
25 property int progress: -1
26 property bool highlighted: false
27 property real maxAngle: 0
28 property bool inverted: false
30 readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
31 readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
33 property int itemWidth
34 property int itemHeight
35 // The angle used for rotating
36 property real angle: 0
37 // This is the offset that keeps the items inside the panel
38 property real offset: 0
39 property real itemOpacity: 1
40 property real brightness: 0
42 onIconNameChanged: shaderEffectSource.scheduleUpdate();
43 onCountChanged: shaderEffectSource.scheduleUpdate();
44 onProgressChanged: shaderEffectSource.scheduleUpdate();
45 onHighlightedChanged: shaderEffectSource.scheduleUpdate();
47 Item {
48 id: iconItem
49 width: parent.itemWidth
50 height: parent.itemHeight
51 anchors.centerIn: parent
53 UbuntuShape {
54 id: iconShape
55 anchors.fill: parent
56 anchors.margins: units.gu(0.5)
57 radius: "medium"
59 image: Image {
60 id: iconImage
61 sourceSize.width: iconShape.width
62 sourceSize.height: iconShape.height
63 source: root.iconName
64 }
65 }
67 BorderImage {
68 id: overlayHighlight
69 anchors.centerIn: iconItem
70 rotation: inverted ? 180 : 0
71 source: root.highlighted ? "graphics/selected.sci" : "graphics/non-selected.sci"
72 width: root.itemWidth + units.gu(0.5)
73 height: root.itemHeight + units.gu(0.5)
74 }
76 BorderImage {
77 objectName: "countEmblem"
78 anchors {
79 right: parent.right
80 top: parent.top
81 margins: -units.dp(1)
82 }
83 width: Math.min(root.itemWidth, Math.max(units.gu(3), countLabel.implicitWidth + units.gu(2.5)))
84 height: units.gu(3)
85 source: "graphics/notification.sci"
86 visible: root.count > 0
88 Label {
89 id: countLabel
90 text: root.count
91 anchors.centerIn: parent
92 width: root.itemWidth - units.gu(1)
93 horizontalAlignment: Text.AlignHCenter
94 elide: Text.ElideRight
95 color: "white"
96 fontSize: "small"
97 font.bold: true
98 }
99 }
101 BorderImage {
102 id: progressOverlay
103 objectName: "progressOverlay"
104 anchors {
105 left: iconItem.left
106 right: iconItem.right
107 bottom: iconItem.bottom
108 leftMargin: units.gu(0.5)
109 rightMargin: units.gu(0.5)
110 bottomMargin: units.gu(0.5)
111 }
112 height: units.gu(1.5)
113 visible: root.progress > -1
114 source: "graphics/progressbar-trough.sci"
116 // For fill calculation we need to remove the 2 units of border defined in .sci file
117 property int adjustedWidth: width - units.gu(2)
119 Item {
120 anchors {
121 left: parent.left
122 top: parent.top
123 bottom: parent.bottom
124 }
125 width: Math.min(100, root.progress) / 100 * parent.adjustedWidth + units.gu(1)
126 clip: true
128 BorderImage {
129 anchors {
130 left: parent.left
131 top: parent.top
132 bottom: parent.bottom
133 }
134 width: progressOverlay.width
135 source: "graphics/progressbar-fill.sci"
136 }
137 }
138 }
139 }
141 ShaderEffect {
142 id: transformEffect
143 anchors.centerIn: parent
144 anchors.verticalCenterOffset: root.offset
145 width: parent.itemWidth
146 height: parent.itemHeight
147 property real itemOpacity: root.itemOpacity
148 property real brightness: Math.max(-1, root.brightness)
149 property real angle: root.angle
150 rotation: root.inverted ? 180 : 0
152 property variant source: ShaderEffectSource {
153 id: shaderEffectSource
154 sourceItem: iconItem
155 hideSource: true
156 live: false
157 }
159 transform: [
160 // Rotating 3 times at top/bottom because that increases the perspective.
161 // This is a hack, but as QML does not support real 3D coordinates
162 // getting a higher perspective can only be done by a hack. This is the most
163 // readable/understandable one I could come up with.
164 Rotation {
165 axis { x: 1; y: 0; z: 0 }
166 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
167 angle: root.angle * 0.7
168 },
169 Rotation {
170 axis { x: 1; y: 0; z: 0 }
171 origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
172 angle: root.angle * 0.7
173 },
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 // Because rotating it 3 times moves it more to the front/back, i.e. it gets
180 // bigger/smaller and we need a scale to compensate that again.
181 Scale {
182 xScale: 1 - (Math.abs(angle) / 500)
183 yScale: 1 - (Math.abs(angle) / 500)
184 origin { x: iconItem.width / 2; y: iconItem.height / 2}
185 }
186 ]
188 // Using a fragment shader instead of QML's opacity and BrightnessContrast
189 // to be able to do both in one step which gives quite some better performance
190 fragmentShader: "
191 varying highp vec2 qt_TexCoord0;
192 uniform sampler2D source;
193 uniform lowp float brightness;
194 uniform lowp float itemOpacity;
195 void main(void)
196 {
197 highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
198 sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
199 sourceColor *= itemOpacity;
200 gl_FragColor = sourceColor;
201 }"
202 }