Merge lp:~vthompson/music-app/theme-slider into lp:music-app/remix

[Victor Thompson]

Theme the Slider component.

Theme the Slider component. This brings in the required Themes.Ambiance components, which are modified to have the Slider be UbuntuColors.blue. This comes from the current development SDK in vivid. As such, we'll want to keep this component in sync with any updates in the SDK.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:745
http://91.189.93.70:8080/job/music-app-ci/1158/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-vivid/282
        deb: http://91.189.93.70:8080/job/generic-mediumtests-vivid/282/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-vivid-amd64-ci/10

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-ci/1158/rebuild

review: Approve (continuous-integration)

[lp:~vthompson/music-app/theme-slider]

746. By Victor Thompson on 2014-11-21

Add necessary artwork from the theme

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:746
http://91.189.93.70:8080/job/music-app-ci/1163/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-vivid/332
        deb: http://91.189.93.70:8080/job/generic-mediumtests-vivid/332/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-vivid-amd64-ci/15

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-ci/1163/rebuild

review: Approve (continuous-integration)

[Andrew Hayzen (ahayzen)]

LGTM :)

review: Approve

=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml	2014-11-16 22:07:05 +0000
+++ MusicNowPlaying.qml	2014-11-21 00:17:49 +0000
@@ -24,6 +24,7 @@
 import Ubuntu.Thumbnailer 0.1
 import "common"
 import "common/ListItemActions"
+import "common/Themes/Ambiance"
 import "meta-database.js" as Library
 import "playlists.js" as Playlists
 
@@ -289,6 +290,7 @@
                     anchors.right: parent.right
                     maximumValue: player.duration  // load value at startup
                     objectName: "progressSliderShape"
+                    style: UbuntuBlueSliderStyle {}
                     value: player.position  // load value at startup
 
                     function formatValue(v) {
@@ -308,10 +310,6 @@
                         }
                     }
 
-                    Component.onCompleted: {
-                        Theme.palette.selected.foreground = UbuntuColors.blue
-                    }
-
                     onPressedChanged: {
                         seeking = pressed
 

=== added directory 'common/Themes'
=== added directory 'common/Themes/Ambiance'
=== added file 'common/Themes/Ambiance/BubbleShape.qml'
--- common/Themes/Ambiance/BubbleShape.qml	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/BubbleShape.qml	2014-11-21 00:17:49 +0000
@@ -0,0 +1,172 @@
+/*
+ * Copyright 2013-2014 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 1.1
+
+Item {
+    id: bubbleShape
+
+    /*!
+      Do not use an UbuntuShape but a Rectangle as the background of the BubbleShape.
+     */
+    property bool square: false
+
+    /*!
+      The background color of the bubble.
+     */
+    property color color: square ? Theme.palette.normal.background : Theme.palette.normal.overlay
+
+    property point target
+    property string direction: "down"
+    property bool clipContent: false
+    default property alias children: content.children
+    // FIXME: This should not be necessary. See
+    // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1214978
+    property alias arrowSource: arrow.source
+
+    implicitWidth: units.gu(10)
+    implicitHeight: units.gu(8)
+
+    signal showCompleted()
+    signal hideCompleted()
+
+    opacity: 0.0
+
+    function show() {
+        hideAnimation.stop();
+        showAnimation.start();
+    }
+
+    function hide() {
+        showAnimation.stop();
+        hideAnimation.start();
+    }
+
+    ParallelAnimation {
+        id: showAnimation
+
+        NumberAnimation {
+            target: bubbleShape
+            property: "opacity"
+            from: 0.0
+            to: 1.0
+            duration: UbuntuAnimation.FastDuration
+            easing: UbuntuAnimation.StandardEasing
+        }
+        NumberAnimation {
+            target: scaleTransform
+            property: (direction === "up" || direction === "down") ? "yScale" : "xScale"
+            from: 0.91
+            to: 1.0
+            duration: UbuntuAnimation.FastDuration
+            easing: UbuntuAnimation.StandardEasing
+        }
+        onStopped: showCompleted()
+    }
+
+    NumberAnimation {
+        id: hideAnimation
+        target: bubbleShape
+        property: "opacity"
+        from: 1.0
+        to: 0.0
+        duration: UbuntuAnimation.FastDuration
+        easing: UbuntuAnimation.StandardEasing
+        onStopped: hideCompleted()
+    }
+
+    transform: Scale {
+        id: scaleTransform
+        origin.x: direction === "right" ? bubbleShape.width :
+                  direction === "left" ? 0 :
+                                          bubbleShape.width/2.0
+        origin.y: direction === "up" ? 0 :
+                  direction === "down" ? bubbleShape.height :
+                                         bubbleShape.height/2.0
+    }
+
+    BorderImage {
+        id: shadow
+        anchors.fill: parent
+        anchors.margins: square ? -units.gu(1) : -units.dp(2)
+        anchors.topMargin: square ? 0 : anchors.margins
+        source: !square ? "artwork/bubble_shadow.sci" : "artwork/header_overflow_dropshadow.sci"
+        opacity: 0.8
+    }
+
+    UbuntuShape {
+        anchors.fill: parent
+        borderSource: "none"
+        color: Theme.palette.normal.overlay
+        image: bubbleShape.clipContent ? shapeSource : null
+        visible: !square
+    }
+
+    ShaderEffectSource {
+        id: shapeSource
+        visible: bubbleShape.clipContent
+        sourceItem: bubbleShape.clipContent ? content : null
+        hideSource: !square
+        // FIXME: visible: false prevents rendering so make it a nearly
+        // transparent 1x1 pixel instead
+        opacity: 0.01
+        width: 1
+        height: 1
+    }
+
+    Item {
+        id: content
+        anchors.fill: parent
+
+        Rectangle {
+            id: colorRect
+            anchors.fill: parent
+            color: bubbleShape.color
+            visible: bubbleShape.clipContent
+        }
+    }
+
+    Item {
+        x: target.x
+        y: target.y
+
+        Image {
+            id: arrow
+
+            visible: !square && bubbleShape.direction != "none"
+
+            function directionToRotation(direction) {
+                switch (direction) {
+                case "up":
+                    return 180;
+                case "left":
+                    return 90;
+                case "right":
+                    return -90;
+                default: // "down" or "none"
+                    return 0;
+                }
+            }
+
+            x: -width / 2.0
+            y: -height
+            transformOrigin: Item.Bottom
+            rotation: directionToRotation(bubbleShape.direction)
+            source: "artwork/bubble_arrow.png"
+        }
+    }
+}

=== added file 'common/Themes/Ambiance/PartialColorize.qml'
--- common/Themes/Ambiance/PartialColorize.qml	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/PartialColorize.qml	2014-11-21 00:17:49 +0000
@@ -0,0 +1,51 @@
+/*
+ * 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
+
+ShaderEffect {
+    id: partialColorize
+
+    implicitWidth: source.implicitWidth
+    implicitHeight: source.implicitHeight
+    visible: source != null && source.visible
+
+    property Item sourceItem
+    property var source: ShaderEffectSource {
+        hideSource: true
+        sourceItem: partialColorize.sourceItem
+        visible: sourceItem != null
+    }
+    property color leftColor
+    property color rightColor
+    property real progress
+    property bool mirror: false
+    property string texCoord: mirror ? "1.0 - qt_TexCoord0.x" : "qt_TexCoord0.x"
+
+    fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform sampler2D source;
+            uniform lowp vec4 leftColor;
+            uniform lowp vec4 rightColor;
+            uniform lowp float progress;
+            uniform lowp float qt_Opacity;
+
+            void main() {
+                lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
+                lowp vec4 newColor = mix(leftColor, rightColor, step(progress, " + texCoord + "));
+                gl_FragColor = newColor * sourceColor.a * qt_Opacity;
+            }"
+}

=== added file 'common/Themes/Ambiance/PartialColorizeUbuntuShape.qml'
--- common/Themes/Ambiance/PartialColorizeUbuntuShape.qml	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/PartialColorizeUbuntuShape.qml	2014-11-21 00:17:49 +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, " + texCoord + "));
+            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 'common/Themes/Ambiance/UbuntuBlueSliderStyle.qml'
--- common/Themes/Ambiance/UbuntuBlueSliderStyle.qml	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/UbuntuBlueSliderStyle.qml	2014-11-21 00:17:49 +0000
@@ -0,0 +1,126 @@
+/*
+ * 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 1.1
+
+/*
+  The default slider style consists of a bar and a thumb shape.
+
+  This style is themed using the following properties:
+  - thumbSpacing: spacing between the thumb and the bar
+*/
+Item {
+    id: sliderStyle
+
+    property color foregroundColor: UbuntuColors.blue // CUSTOM
+    property color backgroundColor: Theme.palette.normal.base
+
+    property real thumbSpacing: units.gu(0)
+    property Item bar: background
+    property Item thumb: thumb
+
+    implicitWidth: units.gu(38)
+    implicitHeight: units.gu(5)
+
+    UbuntuShape {
+        id: background
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            left: parent.left
+        }
+        height: units.dp(4)
+
+        color: "white"
+    }
+
+    PartialColorizeUbuntuShape {
+        anchors.fill: background
+        sourceItem: background
+        progress: thumb.x / thumb.barMinusThumbWidth
+        leftColor: foregroundColor
+        rightColor: backgroundColor
+        mirror: Qt.application.layoutDirection == Qt.RightToLeft
+    }
+
+    UbuntuShape {
+        id: thumb
+
+        anchors {
+            verticalCenter: parent.verticalCenter
+            topMargin: thumbSpacing
+            bottomMargin: thumbSpacing
+        }
+
+        property real barMinusThumbWidth: background.width - (thumb.width + 2.0*thumbSpacing)
+        property real position: thumbSpacing + SliderUtils.normalizedValue(styledItem) * barMinusThumbWidth
+        property bool pressed: SliderUtils.isPressed(styledItem)
+        property bool positionReached: x == position
+        x: position
+
+        /* Enable the animation on x when pressing the slider.
+           Disable it when x has reached the target position.
+        */
+        onPressedChanged: if (pressed) xBehavior.enabled = true;
+        onPositionReachedChanged: if (positionReached) xBehavior.enabled = false;
+
+        Behavior on x {
+            id: xBehavior
+            SmoothedAnimation {
+                duration: UbuntuAnimation.FastDuration
+            }
+        }
+        width: units.gu(2)
+        height: units.gu(2)
+        opacity: 0.97
+        color: Theme.palette.normal.overlay
+    }
+
+    BubbleShape {
+        id: bubbleShape
+
+        width: units.gu(8)
+        height: units.gu(6)
+
+        // FIXME: very temporary implementation
+        property real minX: 0.0
+        property real maxX: background.width - width
+        property real pointerSize: units.dp(6)
+        property real targetMargin: units.gu(1)
+        property point globalTarget: Qt.point(thumb.x + thumb.width / 2.0, thumb.y - targetMargin)
+
+        x: MathUtils.clamp(globalTarget.x - width / 2.0, minX, maxX)
+        y: globalTarget.y - height - pointerSize
+        target: Qt.point(globalTarget.x - x, globalTarget.y - y)
+
+        property bool pressed: SliderUtils.isPressed(styledItem)
+        property bool shouldShow: pressed && label.text != ""
+        onShouldShowChanged: if (shouldShow) {
+                                show();
+                             } else {
+                                hide();
+                             }
+
+        Label {
+            id: label
+            anchors.centerIn: parent
+            text: styledItem.formatValue(SliderUtils.liveValue(styledItem))
+            fontSize: "large"
+            color: Theme.palette.normal.overlayText
+        }
+    }
+}

=== added directory 'common/Themes/Ambiance/artwork'
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
--- common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
+border.top: 21
+border.bottom: 26
+border.left: 27
+border.right: 27
+horizontalTileMode: BorderImage.Stretch
+verticalTileMode: BorderImage.Stretch
+source: [e-mail]

=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
--- common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
+border.top: 31
+border.bottom: 37
+border.left: 38
+border.right: 38
+horizontalTileMode: BorderImage.Stretch
+verticalTileMode: BorderImage.Stretch
+source: [e-mail]

=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
Binary files common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/[e-mail]'
--- common/Themes/Ambiance/artwork/[e-mail]	1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/[e-mail]	2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
+border.top: 10
+border.bottom: 11
+border.left: 12
+border.right: 11
+horizontalTileMode: BorderImage.Stretch
+verticalTileMode: BorderImage.Stretch
+source: [e-mail]