@@ -43,7 +43,7 @@ Indicators.IndicatorBase {
4343
4444 Label {
4545 id: itemLeftLabel
46− width: guRoundUp(implicitWidth)
46+ width: paintedWidth + units.gu(1)
4747 objectName: "leftLabel"
4848 color: Theme.palette.selected.backgroundText
4949 opacity: 0.8
@@ -51,6 +51,7 @@ Indicators.IndicatorBase {
5151 fontSize: "medium"
5252 anchors.verticalCenter: parent.verticalCenter
5353 visible: text != ""
54+ horizontalAlignment: Text.AlignHCenter
5455 }
5556
5657 Row {
@@ -63,20 +64,67 @@ Indicators.IndicatorBase {
6364 model: indicatorWidget.icons
6465
6566 Item {
66− width: guRoundUp(itemImage.width) + units.gu(1)
67+ width: itemImage.width + units.gu(1)
6768 anchors { top: parent.top; bottom: parent.bottom }
6869
69− Icon {
70+ /*
71+ FIXME: should use Icon and the theme system
72+ There is an Icon component in the SDK that the colorization is copied from.
73+ We can't use it here unfortunately due to lack of support for image source
74+ URIs and keeping aspect ratio.
75+
76+ Related bugs:
77+ http://launchpad.net/bugs/1284235
78+ http://launchpad.net/bugs/1284233
79+ */
80+
81+ Image {
7082 id: itemImage
7183 objectName: "itemImage"
72− // FIXME: Should be dynamic width, see http://pad.lv/1284235
73− width: indicatorWidget.iconSize
7484 height: indicatorWidget.iconSize
85+ sourceSize.height: height
7586 anchors.centerIn: parent
7687
77− // FIXME: Icon needs to accept source, see http://pad.lv/1284233
78− name: modelData.replace("image://theme/", "")
79− color: "#CCCCCC"
88+ onSourceChanged: console.debug(source)
89+ visible: false
90+
91+ property string iconPath: "/usr/share/icons/suru/status/scalable/%1.svg"
92+ property var icons: modelData.replace("image://theme/", "").split(",")
93+ property int fallback: 0
94+
95+ onStatusChanged: if (status == Image.Error && fallback < icons.length - 1) fallback += 1;
96+
97+ // Needed to not introduce a binding loop on source
98+ onFallbackChanged: updateSource()
99+ Component.onCompleted: updateSource()
100+ onIconsChanged: updateSource()
101+
102+ function updateSource() {
103+ source = icons.length > 0 ? iconPath.arg(icons[fallback]) : "";
104+ }
105+ }
106+
107+ ShaderEffect {
108+ id: colorizedImage
109+
110+ anchors.fill: itemImage
111+
112+ property Image source: itemImage.status == Image.Ready ? itemImage : null
113+ property color keyColorOut: "#CCCCCC"
114+ property color keyColorIn: "#808080"
115+ property real threshold: 0.1
116+
117+ fragmentShader: "
118+ varying highp vec2 qt_TexCoord0;
119+ uniform sampler2D source;
120+ uniform highp vec4 keyColorOut;
121+ uniform highp vec4 keyColorIn;
122+ uniform lowp float threshold;
123+ uniform lowp float qt_Opacity;
124+ void main() {
125+ lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
126+ gl_FragColor = mix(vec4(keyColorOut.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, keyColorIn.rgb))) * qt_Opacity;
127+ }"
80128 }
81129 }
82130 }
@@ -84,7 +132,7 @@ Indicators.IndicatorBase {
84132
85133 Label {
86134 id: itemRightLabel
87− width: guRoundUp(implicitWidth)
135+ width: paintedWidth + units.gu(1)
88136 objectName: "rightLabel"
89137 color: Theme.palette.selected.backgroundText
90138 opacity: 0.8
@@ -92,20 +140,10 @@ Indicators.IndicatorBase {
92140 fontSize: "medium"
93141 anchors.verticalCenter: parent.verticalCenter
94142 visible: text != ""
143+ horizontalAlignment: Text.AlignHCenter
95144 }
96145 }
97146
98− // TODO: Use toolkit function https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1242575
99− function guRoundUp(width) {
100− if (width == 0) {
101− return 0;
102− }
103− var gu1 = units.gu(1.0);
104− var mod = (width % gu1);
105−
106− return mod == 0 ? width : width + (gu1 - mod);
107− }
108−
109147 onRootActionStateChanged: {
110148 if (rootActionState == undefined) {
111149 leftLabel = "";