Ubuntu Music App

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

  1. theme-slider
  2. Merge into remix
Proposed by Victor Thompson
Status: Merged
Approved by: Victor Thompson
Approved revision: 746
Merged at revision: 746
Proposed branch: lp:~vthompson/music-app/theme-slider
Merge into: lp:music-app/remix
Diff against target: 486 lines (+408/-4)
8 files modified
MusicNowPlaying.qml (+2/-4)
common/Themes/Ambiance/BubbleShape.qml (+172/-0)
common/Themes/Ambiance/PartialColorize.qml (+51/-0)
common/Themes/Ambiance/PartialColorizeUbuntuShape.qml (+36/-0)
common/Themes/Ambiance/UbuntuBlueSliderStyle.qml (+126/-0)
common/Themes/Ambiance/artwork/bubble_shadow@20.sci (+7/-0)
common/Themes/Ambiance/artwork/bubble_shadow@30.sci (+7/-0)
common/Themes/Ambiance/artwork/bubble_shadow@8.sci (+7/-0)
To merge this branch: bzr merge lp:~vthompson/music-app/theme-slider
Reviewer Review Type Date Requested Status
Andrew Hayzen Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+242161@code.launchpad.net

Commit message

Theme the Slider component.

Description of the change

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.

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

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 updated
746. By Victor Thompson

Add necessary artwork from the theme

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

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)
Revision history for this message
Andrew Hayzen (ahayzen) wrote :

LGTM :)

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
24import Ubuntu.Thumbnailer 0.124import Ubuntu.Thumbnailer 0.1
25import "common"25import "common"
26import "common/ListItemActions"26import "common/ListItemActions"
27import "common/Themes/Ambiance"
27import "meta-database.js" as Library28import "meta-database.js" as Library
28import "playlists.js" as Playlists29import "playlists.js" as Playlists
2930
@@ -289,6 +290,7 @@
289 anchors.right: parent.right290 anchors.right: parent.right
290 maximumValue: player.duration // load value at startup291 maximumValue: player.duration // load value at startup
291 objectName: "progressSliderShape"292 objectName: "progressSliderShape"
293 style: UbuntuBlueSliderStyle {}
292 value: player.position // load value at startup294 value: player.position // load value at startup
293295
294 function formatValue(v) {296 function formatValue(v) {
@@ -308,10 +310,6 @@
308 }310 }
309 }311 }
310312
311 Component.onCompleted: {
312 Theme.palette.selected.foreground = UbuntuColors.blue
313 }
314
315 onPressedChanged: {313 onPressedChanged: {
316 seeking = pressed314 seeking = pressed
317315
318316
=== 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 @@
1/*
2 * Copyright 2013-2014 Canonical Ltd.
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU Lesser 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 Lesser General Public License for more details.
12 *
13 * You should have received a copy of the GNU Lesser General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
16
17import QtQuick 2.0
18import Ubuntu.Components 1.1
19
20Item {
21 id: bubbleShape
22
23 /*!
24 Do not use an UbuntuShape but a Rectangle as the background of the BubbleShape.
25 */
26 property bool square: false
27
28 /*!
29 The background color of the bubble.
30 */
31 property color color: square ? Theme.palette.normal.background : Theme.palette.normal.overlay
32
33 property point target
34 property string direction: "down"
35 property bool clipContent: false
36 default property alias children: content.children
37 // FIXME: This should not be necessary. See
38 // https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1214978
39 property alias arrowSource: arrow.source
40
41 implicitWidth: units.gu(10)
42 implicitHeight: units.gu(8)
43
44 signal showCompleted()
45 signal hideCompleted()
46
47 opacity: 0.0
48
49 function show() {
50 hideAnimation.stop();
51 showAnimation.start();
52 }
53
54 function hide() {
55 showAnimation.stop();
56 hideAnimation.start();
57 }
58
59 ParallelAnimation {
60 id: showAnimation
61
62 NumberAnimation {
63 target: bubbleShape
64 property: "opacity"
65 from: 0.0
66 to: 1.0
67 duration: UbuntuAnimation.FastDuration
68 easing: UbuntuAnimation.StandardEasing
69 }
70 NumberAnimation {
71 target: scaleTransform
72 property: (direction === "up" || direction === "down") ? "yScale" : "xScale"
73 from: 0.91
74 to: 1.0
75 duration: UbuntuAnimation.FastDuration
76 easing: UbuntuAnimation.StandardEasing
77 }
78 onStopped: showCompleted()
79 }
80
81 NumberAnimation {
82 id: hideAnimation
83 target: bubbleShape
84 property: "opacity"
85 from: 1.0
86 to: 0.0
87 duration: UbuntuAnimation.FastDuration
88 easing: UbuntuAnimation.StandardEasing
89 onStopped: hideCompleted()
90 }
91
92 transform: Scale {
93 id: scaleTransform
94 origin.x: direction === "right" ? bubbleShape.width :
95 direction === "left" ? 0 :
96 bubbleShape.width/2.0
97 origin.y: direction === "up" ? 0 :
98 direction === "down" ? bubbleShape.height :
99 bubbleShape.height/2.0
100 }
101
102 BorderImage {
103 id: shadow
104 anchors.fill: parent
105 anchors.margins: square ? -units.gu(1) : -units.dp(2)
106 anchors.topMargin: square ? 0 : anchors.margins
107 source: !square ? "artwork/bubble_shadow.sci" : "artwork/header_overflow_dropshadow.sci"
108 opacity: 0.8
109 }
110
111 UbuntuShape {
112 anchors.fill: parent
113 borderSource: "none"
114 color: Theme.palette.normal.overlay
115 image: bubbleShape.clipContent ? shapeSource : null
116 visible: !square
117 }
118
119 ShaderEffectSource {
120 id: shapeSource
121 visible: bubbleShape.clipContent
122 sourceItem: bubbleShape.clipContent ? content : null
123 hideSource: !square
124 // FIXME: visible: false prevents rendering so make it a nearly
125 // transparent 1x1 pixel instead
126 opacity: 0.01
127 width: 1
128 height: 1
129 }
130
131 Item {
132 id: content
133 anchors.fill: parent
134
135 Rectangle {
136 id: colorRect
137 anchors.fill: parent
138 color: bubbleShape.color
139 visible: bubbleShape.clipContent
140 }
141 }
142
143 Item {
144 x: target.x
145 y: target.y
146
147 Image {
148 id: arrow
149
150 visible: !square && bubbleShape.direction != "none"
151
152 function directionToRotation(direction) {
153 switch (direction) {
154 case "up":
155 return 180;
156 case "left":
157 return 90;
158 case "right":
159 return -90;
160 default: // "down" or "none"
161 return 0;
162 }
163 }
164
165 x: -width / 2.0
166 y: -height
167 transformOrigin: Item.Bottom
168 rotation: directionToRotation(bubbleShape.direction)
169 source: "artwork/bubble_arrow.png"
170 }
171 }
172}
0173
=== 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 @@
1/*
2 * Copyright 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 Lesser 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 Lesser General Public License for more details.
12 *
13 * You should have received a copy of the GNU Lesser General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
16
17import QtQuick 2.0
18
19ShaderEffect {
20 id: partialColorize
21
22 implicitWidth: source.implicitWidth
23 implicitHeight: source.implicitHeight
24 visible: source != null && source.visible
25
26 property Item sourceItem
27 property var source: ShaderEffectSource {
28 hideSource: true
29 sourceItem: partialColorize.sourceItem
30 visible: sourceItem != null
31 }
32 property color leftColor
33 property color rightColor
34 property real progress
35 property bool mirror: false
36 property string texCoord: mirror ? "1.0 - qt_TexCoord0.x" : "qt_TexCoord0.x"
37
38 fragmentShader: "
39 varying highp vec2 qt_TexCoord0;
40 uniform sampler2D source;
41 uniform lowp vec4 leftColor;
42 uniform lowp vec4 rightColor;
43 uniform lowp float progress;
44 uniform lowp float qt_Opacity;
45
46 void main() {
47 lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
48 lowp vec4 newColor = mix(leftColor, rightColor, step(progress, " + texCoord + "));
49 gl_FragColor = newColor * sourceColor.a * qt_Opacity;
50 }"
51}
052
=== 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 @@
1/*
2 * Copyright 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 Lesser 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 Lesser General Public License for more details.
12 *
13 * You should have received a copy of the GNU Lesser General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
16
17import QtQuick 2.0
18
19PartialColorize {
20 fragmentShader: "
21 varying highp vec2 qt_TexCoord0;
22 uniform sampler2D source;
23 uniform highp vec4 leftColor;
24 uniform highp vec4 rightColor;
25 uniform lowp float progress;
26 uniform lowp float qt_Opacity;
27
28 void main() {
29 lowp vec4 color = texture2D(source, qt_TexCoord0);
30 lowp vec4 newColor = mix(leftColor, rightColor, step(progress, " + texCoord + "));
31 highp float opacity = (1.0 - color.r / max(1.0/256.0, color.a));
32 lowp vec4 result = opacity * vec4(0.0, 0.0, 0.0, 1.0) + vec4(1.0 - opacity) * newColor;
33 gl_FragColor = vec4(result.rgb * result.a, result.a) * color.a * qt_Opacity;
34 }
35 "
36}
037
=== 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 @@
1/*
2 * Copyright 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 Lesser 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 Lesser General Public License for more details.
12 *
13 * You should have received a copy of the GNU Lesser General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
16
17import QtQuick 2.0
18import Ubuntu.Components 1.1
19
20/*
21 The default slider style consists of a bar and a thumb shape.
22
23 This style is themed using the following properties:
24 - thumbSpacing: spacing between the thumb and the bar
25*/
26Item {
27 id: sliderStyle
28
29 property color foregroundColor: UbuntuColors.blue // CUSTOM
30 property color backgroundColor: Theme.palette.normal.base
31
32 property real thumbSpacing: units.gu(0)
33 property Item bar: background
34 property Item thumb: thumb
35
36 implicitWidth: units.gu(38)
37 implicitHeight: units.gu(5)
38
39 UbuntuShape {
40 id: background
41 anchors {
42 verticalCenter: parent.verticalCenter
43 right: parent.right
44 left: parent.left
45 }
46 height: units.dp(4)
47
48 color: "white"
49 }
50
51 PartialColorizeUbuntuShape {
52 anchors.fill: background
53 sourceItem: background
54 progress: thumb.x / thumb.barMinusThumbWidth
55 leftColor: foregroundColor
56 rightColor: backgroundColor
57 mirror: Qt.application.layoutDirection == Qt.RightToLeft
58 }
59
60 UbuntuShape {
61 id: thumb
62
63 anchors {
64 verticalCenter: parent.verticalCenter
65 topMargin: thumbSpacing
66 bottomMargin: thumbSpacing
67 }
68
69 property real barMinusThumbWidth: background.width - (thumb.width + 2.0*thumbSpacing)
70 property real position: thumbSpacing + SliderUtils.normalizedValue(styledItem) * barMinusThumbWidth
71 property bool pressed: SliderUtils.isPressed(styledItem)
72 property bool positionReached: x == position
73 x: position
74
75 /* Enable the animation on x when pressing the slider.
76 Disable it when x has reached the target position.
77 */
78 onPressedChanged: if (pressed) xBehavior.enabled = true;
79 onPositionReachedChanged: if (positionReached) xBehavior.enabled = false;
80
81 Behavior on x {
82 id: xBehavior
83 SmoothedAnimation {
84 duration: UbuntuAnimation.FastDuration
85 }
86 }
87 width: units.gu(2)
88 height: units.gu(2)
89 opacity: 0.97
90 color: Theme.palette.normal.overlay
91 }
92
93 BubbleShape {
94 id: bubbleShape
95
96 width: units.gu(8)
97 height: units.gu(6)
98
99 // FIXME: very temporary implementation
100 property real minX: 0.0
101 property real maxX: background.width - width
102 property real pointerSize: units.dp(6)
103 property real targetMargin: units.gu(1)
104 property point globalTarget: Qt.point(thumb.x + thumb.width / 2.0, thumb.y - targetMargin)
105
106 x: MathUtils.clamp(globalTarget.x - width / 2.0, minX, maxX)
107 y: globalTarget.y - height - pointerSize
108 target: Qt.point(globalTarget.x - x, globalTarget.y - y)
109
110 property bool pressed: SliderUtils.isPressed(styledItem)
111 property bool shouldShow: pressed && label.text != ""
112 onShouldShowChanged: if (shouldShow) {
113 show();
114 } else {
115 hide();
116 }
117
118 Label {
119 id: label
120 anchors.centerIn: parent
121 text: styledItem.formatValue(SliderUtils.liveValue(styledItem))
122 fontSize: "large"
123 color: Theme.palette.normal.overlayText
124 }
125 }
126}
0127
=== added directory 'common/Themes/Ambiance/artwork'
=== added file 'common/Themes/Ambiance/artwork/bubble_arrow@20.png'
1Binary files common/Themes/Ambiance/artwork/bubble_arrow@20.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@20.png 2014-11-21 00:17:49 +0000 differ128Binary files common/Themes/Ambiance/artwork/bubble_arrow@20.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@20.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_arrow@30.png'
2Binary files common/Themes/Ambiance/artwork/bubble_arrow@30.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@30.png 2014-11-21 00:17:49 +0000 differ129Binary files common/Themes/Ambiance/artwork/bubble_arrow@30.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@30.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_arrow@8.png'
3Binary files common/Themes/Ambiance/artwork/bubble_arrow@8.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@8.png 2014-11-21 00:17:49 +0000 differ130Binary files common/Themes/Ambiance/artwork/bubble_arrow@8.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_arrow@8.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@20.png'
4Binary files common/Themes/Ambiance/artwork/bubble_shadow@20.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@20.png 2014-11-21 00:17:49 +0000 differ131Binary files common/Themes/Ambiance/artwork/bubble_shadow@20.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@20.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@20.sci'
--- common/Themes/Ambiance/artwork/bubble_shadow@20.sci 1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/bubble_shadow@20.sci 2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
1border.top: 21
2border.bottom: 26
3border.left: 27
4border.right: 27
5horizontalTileMode: BorderImage.Stretch
6verticalTileMode: BorderImage.Stretch
7source: bubble_shadow@20.png
08
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@30.png'
1Binary files common/Themes/Ambiance/artwork/bubble_shadow@30.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@30.png 2014-11-21 00:17:49 +0000 differ9Binary files common/Themes/Ambiance/artwork/bubble_shadow@30.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@30.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@30.sci'
--- common/Themes/Ambiance/artwork/bubble_shadow@30.sci 1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/bubble_shadow@30.sci 2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
1border.top: 31
2border.bottom: 37
3border.left: 38
4border.right: 38
5horizontalTileMode: BorderImage.Stretch
6verticalTileMode: BorderImage.Stretch
7source: bubble_shadow@30.png
08
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@8.png'
1Binary files common/Themes/Ambiance/artwork/bubble_shadow@8.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@8.png 2014-11-21 00:17:49 +0000 differ9Binary files common/Themes/Ambiance/artwork/bubble_shadow@8.png 1970-01-01 00:00:00 +0000 and common/Themes/Ambiance/artwork/bubble_shadow@8.png 2014-11-21 00:17:49 +0000 differ
=== added file 'common/Themes/Ambiance/artwork/bubble_shadow@8.sci'
--- common/Themes/Ambiance/artwork/bubble_shadow@8.sci 1970-01-01 00:00:00 +0000
+++ common/Themes/Ambiance/artwork/bubble_shadow@8.sci 2014-11-21 00:17:49 +0000
@@ -0,0 +1,7 @@
1border.top: 10
2border.bottom: 11
3border.left: 12
4border.right: 11
5horizontalTileMode: BorderImage.Stretch
6verticalTileMode: BorderImage.Stretch
7source: bubble_shadow@8.png

Subscribers

People subscribed via source and target branches