Merge lp:~fboucault/ubuntu-ui-toolkit/progressbar_updated_design into lp:ubuntu-ui-toolkit

[Florian Boucault]

ProgressBar: new visual design.
Indeterminate progress bar's design is not worked out yet. Simple placeholder animation for now.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:672
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/450/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/1786
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/307
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/307
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/307/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/1791
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/1791/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/1523

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/450/rebuild

review: Approve (continuous-integration)

[Florian Boucault (fboucault)]

Note that this implementation will be simplified when the new ubuntu shape lands.

[Tim Peeters (tpeeters)]

why do you need a special PartialColorize for UbuntuShape?

review: Needs Information

[Tim Peeters (tpeeters)]

PartialColorizeUbuntuShape fragment shader:
- why do you use color.r in the opacity calculations?
- shadow is always 0. Is this intentional? Do you need that variable?

[Florian Boucault (fboucault)]

> why do you need a special PartialColorize for UbuntuShape?

Well, there are very different implementations. We need to only color the inside of the UbuntuShape.

[lp:~fboucault/ubuntu-ui-toolkit/progressbar_updated_design]

673. By Florian Boucault on 2013-08-02

Simplified shader.

[Florian Boucault (fboucault)]

> PartialColorizeUbuntuShape fragment shader:
> - why do you use color.r in the opacity calculations?

Since the shape is greyscale color.r is the same as color.g and color.b

> - shadow is always 0. Is this intentional? Do you need that variable?

Removed it.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:673
http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-ci/451/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-saucy/1829
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-amd64-ci/308
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/308
        deb: http://jenkins.qa.ubuntu.com/job/ubuntu-ui-toolkit-saucy-armhf-ci/308/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/1834
        deb: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-builder-saucy/1834/artifact/work/output/*zip*/output.zip
    SUCCESS: http://jenkins.qa.ubuntu.com/job/generic-mediumtests-runner-saucy/1564

Click here to trigger a rebuild:
http://s-jenkins:8080/job/ubuntu-ui-toolkit-ci/451/rebuild

review: Approve (continuous-integration)

=== modified file 'modules/Ubuntu/Components/ProgressBar.qml'
--- modules/Ubuntu/Components/ProgressBar.qml	2012-10-19 01:09:07 +0000
+++ modules/Ubuntu/Components/ProgressBar.qml	2013-08-02 12:15:38 +0000
@@ -1,5 +1,5 @@
 /*
- * Copyright 2012 Canonical Ltd.
+ * Copyright 2013 Canonical Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU Lesser General Public License as published by
@@ -44,9 +44,6 @@
 AnimatedItem {
     id: progressBar
 
-    width: units.gu(25)
-    height: units.gu(1.5)
-
     /*!
       \preliminary
       Specifies whether the progress interval is unknown. When set, altering
@@ -73,76 +70,5 @@
     */
     property real value: 0.5
 
-    // TODO: use proper images/styling
-    BorderImage {
-        id: frame
-        anchors.fill: parent
-        source: internals.barSource
-        border {
-            left: units.dp(2)
-            top: units.dp(2)
-            right: units.dp(2)
-            bottom: units.dp(2)
-        }
-
-        smooth: true
-        clip: true
-        Image {
-            id: trackerIndeterminate
-            visible: progressBar.indeterminate
-            width: progressBar.width - 2 * internals.trackerOffset + 4 * sourceSize.width
-            y: internals.trackerOffset
-            height: progressBar.height - 2 * internals.trackerOffset
-
-            source: internals.unknownTrackerSource
-            smooth: true
-            fillMode: Image.TileHorizontally
-
-            property real animatedX
-            x: internals.trackerOffset + Math.round(trackerIndeterminate.animatedX)
-            NumberAnimation on animatedX {
-                running: progressBar.indeterminate && progressBar.visible && progressBar.onScreen
-                loops: Animation.Infinite
-                from: -trackerIndeterminate.sourceSize.width
-                to: 0
-                duration: (300 * trackerIndeterminate.sourceSize.width / 10)
-            }
-        }
-
-        BorderImage {
-            id: tracker
-            visible: !progressBar.indeterminate
-
-            source: internals.knownTrackerSource
-            anchors {
-                fill: frame
-                leftMargin: internals.trackerOffset
-                topMargin: internals.trackerOffset
-                bottomMargin: internals.trackerOffset
-                rightMargin: internals.trackerOffset + internals.progress()
-            }
-            smooth: true
-        }
-    }
-
-    QtObject {
-        id: internals
-        // style properties, preparation for theming
-        property url barSource: Qt.resolvedUrl("artwork/ProgressBarBackground.png")
-        property url knownTrackerSource: Qt.resolvedUrl("artwork/ProgressBarTracker.png")
-        property url unknownTrackerSource: Qt.resolvedUrl("artwork/ProgressBarTrackerIndeterminate.png")
-        property int trackerOffset: units.dp(1)
-
-        function progress()
-        {
-            if (progressBar.indeterminate)
-                return 0
-            var normalValue = Math.max(progressBar.value, progressBar.minimumValue)
-            normalValue = Math.min(normalValue, progressBar.maximumValue)
-            var area = Math.abs(progressBar.maximumValue - progressBar.minimumValue)
-            var progress = Math.abs((normalValue + Math.abs(progressBar.minimumValue)) / area)
-            var trackerW = progressBar.width - 2 * trackerOffset
-            return trackerW - trackerW * progress
-        }
-    }
+    style: Theme.createStyleComponent("ProgressBarStyle.qml", progressBar)
 }

=== renamed file 'modules/Ubuntu/Components/Themes/Ambiance/PartialColorizeImage.qml' => 'modules/Ubuntu/Components/Themes/Ambiance/PartialColorize.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PartialColorizeImage.qml	2013-07-08 21:13:19 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PartialColorize.qml	2013-08-02 12:15:38 +0000
@@ -1,31 +1,38 @@
 /*
- * Copyright (C) 2013 Canonical, Ltd.
+ * Copyright 2013 Canonical Ltd.
  *
  * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
+ * it under the terms of the GNU Lesser General Public License as published by
  * the Free Software Foundation; version 3.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
+ * GNU Lesser General Public License for more details.
  *
- * You should have received a copy of the GNU General Public License
+ * You should have received a copy of the GNU Lesser General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 import QtQuick 2.0
 
 ShaderEffect {
+    id: partialColorize
+
     implicitWidth: source.implicitWidth
     implicitHeight: source.implicitHeight
+    visible: source != null && source.visible
 
-    property Image source
+    property Item sourceItem
+    property var source: ShaderEffectSource {
+        hideSource: true
+        sourceItem: partialColorize.sourceItem
+        visible: sourceItem != null
+    }
     property color leftColor
     property color rightColor
     property real progress
-    visible: source.status == Image.Ready
-
+    
     fragmentShader: "
             varying highp vec2 qt_TexCoord0;
             uniform sampler2D source;

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/PartialColorizeUbuntuShape.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/PartialColorizeUbuntuShape.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/PartialColorizeUbuntuShape.qml	2013-08-02 12:15:38 +0000
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+
+PartialColorize {
+    fragmentShader: "
+        varying highp vec2 qt_TexCoord0;
+        uniform sampler2D source;
+        uniform highp vec4 leftColor;
+        uniform highp vec4 rightColor;
+        uniform lowp float progress;
+        uniform lowp float qt_Opacity;
+
+        void main() {
+            lowp vec4 color = texture2D(source, qt_TexCoord0);
+            lowp vec4 newColor = mix(leftColor, rightColor, step(progress, qt_TexCoord0.x));
+            highp float opacity = (1.0 - color.r / max(1.0/256.0, color.a));
+            lowp vec4 result = opacity * vec4(0.0, 0.0, 0.0, 1.0) + vec4(1.0 - opacity) * newColor;
+            gl_FragColor = vec4(result.rgb * result.a, result.a) * color.a * qt_Opacity;
+        }
+    "
+}

=== added file 'modules/Ubuntu/Components/Themes/Ambiance/ProgressBarStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ProgressBarStyle.qml	1970-01-01 00:00:00 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ProgressBarStyle.qml	2013-08-02 12:15:38 +0000
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+
+Item {
+    id: progressBarStyle
+
+    property ProgressBar progressBar: styledItem
+
+    implicitWidth: units.gu(38)
+    implicitHeight: units.gu(5)
+
+    UbuntuShape {
+        id: background
+        anchors.fill: parent
+        /* The color must be white for PartialColorizeUbuntuShape to accurately
+           replace the white with leftColor and rightColor
+        */
+        color: progressBar.indeterminate ? Theme.palette.normal.base : "white"
+    }
+
+    property real progress: progressBar.indeterminate ? 0.0
+                            : progressBar.value / (progressBar.maximumValue - progressBar.minimumValue)
+
+    /* Colorize the background with rightColor and progressively fill it
+       with leftColor proportionally to progress
+    */
+    PartialColorizeUbuntuShape {
+        anchors.fill: background
+        sourceItem: progressBar.indeterminate ? null : background
+        progress: progressBarStyle.progress
+        leftColor: Theme.palette.selected.foreground
+        rightColor: Theme.palette.normal.base
+    }
+
+    Label {
+        id: valueLabel
+        anchors.centerIn: background
+        fontSize: "medium"
+        color: Theme.palette.normal.baseText
+        text: progressBar.indeterminate ? i18n.tr("In Progress...")
+              : "%1%".arg(Number(progressBarStyle.progress * 100.0).toFixed(0))
+
+        SequentialAnimation on opacity {
+            loops: Animation.Infinite
+            running: progressBar.indeterminate
+            UbuntuNumberAnimation {
+                to: 0.5; duration: UbuntuAnimation.SleepyDuration
+            }
+            UbuntuNumberAnimation {
+                to: 1.0; duration: UbuntuAnimation.SleepyDuration
+            }
+        }
+    }
+
+    PartialColorize {
+        anchors.fill: valueLabel
+        sourceItem: progressBar.indeterminate ? null : valueLabel
+        leftColor: Theme.palette.selected.foregroundText
+        rightColor: Theme.palette.normal.baseText
+        progress: (progressBarStyle.progress * background.width - valueLabel.x) / valueLabel.width
+    }
+}

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2013-07-10 17:34:20 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/SwitchStyle.qml	2013-08-02 12:15:38 +0000
@@ -83,7 +83,7 @@
             height: thumb.height
             width: thumb.width
 
-            PartialColorizeImage {
+            PartialColorize {
                 anchors.centerIn: parent
                 source: Image {
                     source: "artwork/cross.png"
@@ -105,7 +105,7 @@
             height: thumb.height
             width: thumb.width
 
-            PartialColorizeImage {
+            PartialColorize {
                 anchors.centerIn: parent
                 source: Image {
                     source: "artwork/tick.png"

=== removed file 'modules/Ubuntu/Components/artwork/[e-mail]'
Binary files modules/Ubuntu/Components/artwork/[e-mail]	2012-11-21 12:07:16 +0000 and modules/Ubuntu/Components/artwork/[e-mail]	1970-01-01 00:00:00 +0000 differ
=== removed file 'modules/Ubuntu/Components/artwork/[e-mail]'
Binary files modules/Ubuntu/Components/artwork/[e-mail]	2012-11-21 12:07:16 +0000 and modules/Ubuntu/Components/artwork/[e-mail]	1970-01-01 00:00:00 +0000 differ
=== removed file 'modules/Ubuntu/Components/artwork/[e-mail]'
Binary files modules/Ubuntu/Components/artwork/[e-mail]	2012-11-21 12:07:16 +0000 and modules/Ubuntu/Components/artwork/[e-mail]	1970-01-01 00:00:00 +0000 differ