Ubuntu Music App

Merge lp:~vthompson/music-app/fixes-1308048-music-tab-cover-sizes into lp:music-app/trusty

  1. fixes-1308048-music-tab-cover-sizes
  2. Merge into trusty
Proposed by Victor Thompson
Status: Merged
Approved by: Victor Thompson
Approved revision: 428
Merged at revision: 428
Proposed branch: lp:~vthompson/music-app/fixes-1308048-music-tab-cover-sizes
Merge into: lp:music-app/trusty
Diff against target: 694 lines (+339/-339)
1 file modified
MusicStart.qml (+339/-339)
To merge this branch: bzr merge lp:~vthompson/music-app/fixes-1308048-music-tab-cover-sizes
Reviewer Review Type Date Requested Status
Andrew Hayzen Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+215997@code.launchpad.net

Commit message

Make cover art a bit smaller on the Music tab

Description of the change

Make cover art a bit smaller on the Music tab. Most of the diff is due to fixing spacing issues. To get a better diff execute the following after branching: bzr diff --diff-options='-w' -r425.

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:428
http://91.189.93.70:8080/job/music-app-ci/722/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-trusty/2136
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/722
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/724
    SUCCESS: http://91.189.93.70:8080/job/music-app-trusty-amd64-ci/443

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

review: Approve (continuous-integration)
Revision history for this message
Alan Pope 🍺🐧🐱 🦄 (popey) wrote :

Tested on desktop but not on device. Can someone please confirm it's good on device?

Revision history for this message
Victor Thompson (vthompson) wrote :

To expedite any opinions, this is what it looks like when the app starts [1] and after the toolbar minimizes a few seconds later [2]. I'm not sure I personally like having smaller icons on the Music tab, but I think it improves the usability issues described in the bug and also makes it easier to see the content while moving through the list quickly.

[1] http://i.imgur.com/Yq2rcy5.png
[2] http://i.imgur.com/efhUf01.png

Revision history for this message
Nekhelesh Ramananthan (nik90) wrote :

hmm victor how do I run this on device? When I try running it, I get org.nemomobile.grilo is not installed.

Revision history for this message
Victor Thompson (vthompson) wrote :

Hi Nekhelesh, the plugins aren't packaged when the click is deployed. You'll need to do the following as root from the phone:

cp -r /usr/share/click/preinstalled/com.ubuntu.music/current/lib /opt/click.ubuntu.com/com.ubuntu.music/current/

Revision history for this message
Andrew Hayzen (ahayzen) wrote :

Hey Nekhelesh,

Due to confinement we have to run the following command to copy grilo over.
cp -r /usr/share/click/preinstalled/com.ubuntu.music/current/lib /opt/
click.ubuntu.com/com.ubuntu.music/current/

(Assuming you have used click-buddy to install the music-app)

Thanks,
Andrew

On 16 April 2014 14:45, Nekhelesh Ramananthan <email address hidden> wrote:

> hmm victor how do I run this on device? When I try running it, I get
> org.nemomobile.grilo is not installed.
> --
>
> https://code.launchpad.net/~vthompson/music-app/fixes-1308048-music-tab-cover-sizes/+merge/215997
> Your team Music App Developers is requested to review the proposed merge
> of lp:~vthompson/music-app/fixes-1308048-music-tab-cover-sizes into
> lp:music-app.
>

Revision history for this message
Andrew Hayzen (ahayzen) wrote :

Looks good to me, it resolves the issue of both the vertical and horizontal scrolls not being initially obvious.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'MusicStart.qml'
--- MusicStart.qml 2014-03-27 23:44:29 +0000
+++ MusicStart.qml 2014-04-16 03:22:43 +0000
@@ -63,351 +63,351 @@
63 width: mainpage.width63 width: mainpage.width
64 height: mainpage.height64 height: mainpage.height
6565
66 contentHeight: mainView.hasRecent ? recentlyPlayed.height + recentlist.height + genres.height + genrelist.height + albums.height + albumlist.height + units.gu(3)66 contentHeight: mainView.hasRecent ? recentlyPlayed.height + recentlist.height + genres.height + genrelist.height + albums.height + albumlist.height + units.gu(4)
67 : genres.height + genrelist.height + albums.height + albumlist.height + units.gu(2)67 : genres.height + genrelist.height + albums.height + albumlist.height + units.gu(3)
68 contentWidth: width68 contentWidth: width
6969
70 focus: true70 focus: true
7171
72 ListItem.Standard {72 ListItem.Standard {
73 id: recentlyPlayed73 id: recentlyPlayed
74 text: i18n.tr("Recent")74 text: i18n.tr("Recent")
75 visible: mainView.hasRecent75 visible: mainView.hasRecent
76 }76 }
7777
78 ListView {78 ListView {
79 id: recentlist79 id: recentlist
80 anchors.top: recentlyPlayed.bottom80 anchors.top: recentlyPlayed.bottom
81 anchors.topMargin: units.gu(1)81 anchors.topMargin: units.gu(1)
82 width: parent.width82 width: parent.width
83 spacing: units.gu(2)83 spacing: units.gu(1)
84 height: units.gu(22)84 height: units.gu(18)
85 // TODO: Update when view counts are collected85 // TODO: Update when view counts are collected
86 model: recentModel.model86 model: recentModel.model
87 delegate: recentDelegate87 delegate: recentDelegate
88 header: Item {88 header: Item {
89 id: spacer89 id: spacer
90 width: units.gu(1)90 width: units.gu(1)
91 }91 }
92 footer: Item {92 footer: Item {
93 id: clearRecent93 id: clearRecent
94 width: units.gu(20)94 width: recentlist.height - units.gu(2)
95 height: units.gu(20)95 height: width
96 visible: mainView.hasRecent && !loading.visible96 visible: mainView.hasRecent && !loading.visible
97 Button {97 Button {
98 id: clearRecentButton98 id: clearRecentButton
99 anchors.centerIn: parent99 anchors.centerIn: parent
100 text: "Clear History"100 text: "Clear History"
101 onClicked: {101 onClicked: {
102 Library.clearRecentHistory()102 Library.clearRecentHistory()
103 mainView.hasRecent = false103 mainView.hasRecent = false
104 recentModel.filterRecent()104 recentModel.filterRecent()
105 }105 }
106 }106 }
107 }107 }
108 orientation: ListView.Horizontal108 orientation: ListView.Horizontal
109 visible: mainView.hasRecent109 visible: mainView.hasRecent
110110
111 Component {111 Component {
112 id: recentDelegate112 id: recentDelegate
113 Item {113 Item {
114 property string title: model.title114 property string title: model.title
115 property string title2: model.title2115 property string title2: model.title2
116 property var covers: type === "playlist" ? Playlists.getPlaylistCovers(title) : [Library.getAlbumCover(title)]116 property var covers: type === "playlist" ? Playlists.getPlaylistCovers(title) : [Library.getAlbumCover(title)]
117 property string type: model.type117 property string type: model.type
118 property string time: model.time118 property string time: model.time
119 property string key: model.key119 property string key: model.key
120 id: recentItem120 id: recentItem
121 height: units.gu(20)121 height: recentlist.height - units.gu(1)
122 width: units.gu(20)122 width: height
123 CoverRow {123 CoverRow {
124 id: recentShape124 id: recentShape
125 anchors {125 anchors {
126 top: parent.top126 top: parent.top
127 left: parent.left127 left: parent.left
128 verticalCenter: parent.verticalCenter128 verticalCenter: parent.verticalCenter
129 }129 }
130 count: recentItem.covers.length130 count: recentItem.covers.length
131 size: recentItem.width131 size: recentItem.width
132 covers: recentItem.covers132 covers: recentItem.covers
133 spacing: units.gu(2)133 spacing: units.gu(2)
134 }134 }
135 UbuntuShape { // Background so can see text in current state135 UbuntuShape { // Background so can see text in current state
136 id: albumBg2136 id: albumBg2
137 anchors.bottom: parent.bottom137 anchors.bottom: parent.bottom
138 color: styleMusic.common.black138 color: styleMusic.common.black
139 height: units.gu(4)139 height: units.gu(4)
140 width: parent.width140 width: parent.width
141 }141 }
142 Rectangle { // Background so can see text in current state142 Rectangle { // Background so can see text in current state
143 id: albumBg143 id: albumBg
144 anchors.bottom: parent.bottom144 anchors.bottom: parent.bottom
145 anchors.bottomMargin: units.gu(2)145 anchors.bottomMargin: units.gu(2)
146 color: styleMusic.common.black146 color: styleMusic.common.black
147 height: units.gu(3)147 height: units.gu(3)
148 width: parent.width148 width: parent.width
149 }149 }
150 Label {150 Label {
151 id: albumArtist151 id: albumArtist
152 anchors.bottom: parent.bottom152 anchors.bottom: parent.bottom
153 anchors.bottomMargin: units.gu(3)153 anchors.bottomMargin: units.gu(3)
154 anchors.left: parent.left154 anchors.left: parent.left
155 anchors.leftMargin: units.gu(1)155 anchors.leftMargin: units.gu(1)
156 anchors.right: parent.right156 anchors.right: parent.right
157 anchors.rightMargin: units.gu(1)157 anchors.rightMargin: units.gu(1)
158 color: styleMusic.common.white158 color: styleMusic.common.white
159 elide: Text.ElideRight159 elide: Text.ElideRight
160 text: title160 text: title
161 fontSize: "small"161 fontSize: "small"
162 }162 }
163 Label {163 Label {
164 id: albumLabel164 id: albumLabel
165 anchors.left: parent.left165 anchors.left: parent.left
166 anchors.leftMargin: units.gu(1)166 anchors.leftMargin: units.gu(1)
167 anchors.bottom: parent.bottom167 anchors.bottom: parent.bottom
168 anchors.bottomMargin: units.gu(1)168 anchors.bottomMargin: units.gu(1)
169 anchors.right: parent.right169 anchors.right: parent.right
170 anchors.rightMargin: units.gu(1)170 anchors.rightMargin: units.gu(1)
171 color: styleMusic.nowPlaying.labelSecondaryColor171 color: styleMusic.nowPlaying.labelSecondaryColor
172 elide: Text.ElideRight172 elide: Text.ElideRight
173 text: title2173 text: title2
174 fontSize: "x-small"174 fontSize: "x-small"
175 }175 }
176 MouseArea {176 MouseArea {
177 anchors.fill: parent177 anchors.fill: parent
178 onClicked: {178 onClicked: {
179 if (type === "playlist") {179 if (type === "playlist") {
180 albumTracksModel.filterPlaylistTracks(key)180 albumTracksModel.filterPlaylistTracks(key)
181 } else {181 } else {
182 albumTracksModel.filterAlbumTracks(title)182 albumTracksModel.filterAlbumTracks(title)
183 }183 }
184184
185 songsSheet.line1 = title2185 songsSheet.line1 = title2
186 songsSheet.line2 = title186 songsSheet.line2 = title
187 songsSheet.covers = recentItem.covers187 songsSheet.covers = recentItem.covers
188 PopupUtils.open(songsSheet.sheet)188 PopupUtils.open(songsSheet.sheet)
189 songsSheet.isAlbum = (type === "album")189 songsSheet.isAlbum = (type === "album")
190 }190 }
191 }191 }
192 }192 }
193 }193 }
194 }194 }
195195
196 ListItem.ThinDivider {196 ListItem.ThinDivider {
197 id: genreDivider197 id: genreDivider
198 anchors.top: mainView.hasRecent ? recentlist.bottom : parent.top198 anchors.top: mainView.hasRecent ? recentlist.bottom : parent.top
199 }199 }
200 ListItem.Standard {200 ListItem.Standard {
201 id: genres201 id: genres
202 anchors.top: genreDivider.bottom202 anchors.top: genreDivider.bottom
203 text: i18n.tr("Genres")203 text: i18n.tr("Genres")
204 }204 }
205 // TODO: add music genres. frequency of play? most tracks?205 // TODO: add music genres. frequency of play? most tracks?
206 ListView {206 ListView {
207 id: genrelist207 id: genrelist
208 width: parent.width208 width: parent.width
209 anchors.top: genres.bottom209 anchors.top: genres.bottom
210 anchors.topMargin: units.gu(1)210 anchors.topMargin: units.gu(1)
211 spacing: units.gu(2)211 spacing: units.gu(1)
212 height: units.gu(22)212 height: units.gu(18)
213 model: genreModel.model213 model: genreModel.model
214 delegate: genreDelegate214 delegate: genreDelegate
215 header: Item {215 header: Item {
216 id: spacer216 id: spacer
217 width: units.gu(1)217 width: units.gu(1)
218 }218 }
219 orientation: ListView.Horizontal219 orientation: ListView.Horizontal
220220
221 Component {221 Component {
222 id: genreDelegate222 id: genreDelegate
223 Item {223 Item {
224 property string artist: model.artist224 property string artist: model.artist
225 property string album: model.album225 property string album: model.album
226 property string title: model.title226 property string title: model.title
227 property var covers: Library.getGenreCovers(model.genre)227 property var covers: Library.getGenreCovers(model.genre)
228 property string length: model.length228 property string length: model.length
229 property string file: model.file229 property string file: model.file
230 property string year: model.year230 property string year: model.year
231 property string genre: model.genre231 property string genre: model.genre
232232
233 id: genreItem233 id: genreItem
234 objectName: "genreItemObject"234 objectName: "genreItemObject"
235 height: units.gu(20)235 height: genrelist.height - units.gu(1)
236 width: units.gu(20)236 width: height
237 CoverRow {237 CoverRow {
238 id: genreShape238 id: genreShape
239 anchors {239 anchors {
240 top: parent.top240 top: parent.top
241 left: parent.left241 left: parent.left
242 verticalCenter: parent.verticalCenter242 verticalCenter: parent.verticalCenter
243 }243 }
244 count: genreItem.covers.length244 count: genreItem.covers.length
245 size: genreItem.width245 size: genreItem.width
246 covers: genreItem.covers246 covers: genreItem.covers
247 spacing: units.gu(2)247 spacing: units.gu(2)
248 }248 }
249 MouseArea {249 MouseArea {
250 anchors.fill: parent250 anchors.fill: parent
251 onClicked: {251 onClicked: {
252 albumTracksModel.filterGenreTracks(genre)252 albumTracksModel.filterGenreTracks(genre)
253 songsSheet.line1 = "Genre"253 songsSheet.line1 = "Genre"
254 songsSheet.line2 = genre254 songsSheet.line2 = genre
255 songsSheet.isAlbum = false255 songsSheet.isAlbum = false
256 songsSheet.covers = covers256 songsSheet.covers = covers
257 PopupUtils.open(songsSheet.sheet)257 PopupUtils.open(songsSheet.sheet)
258 }258 }
259 }259 }
260 Rectangle { // Background so can see text in current state260 Rectangle { // Background so can see text in current state
261 id: genreBg261 id: genreBg
262 anchors.bottom: parent.bottom262 anchors.bottom: parent.bottom
263 anchors.bottomMargin: units.gu(2)263 anchors.bottomMargin: units.gu(2)
264 color: styleMusic.common.black264 color: styleMusic.common.black
265 height: units.gu(3)265 height: units.gu(3)
266 width: parent.width266 width: parent.width
267 }267 }
268 UbuntuShape { // Background so can see text in current state268 UbuntuShape { // Background so can see text in current state
269 id: genreBg2269 id: genreBg2
270 anchors.bottom: parent.bottom270 anchors.bottom: parent.bottom
271 color: styleMusic.common.black271 color: styleMusic.common.black
272 height: units.gu(4)272 height: units.gu(4)
273 width: parent.width273 width: parent.width
274 }274 }
275 Label {275 Label {
276 id: genreLabel276 id: genreLabel
277 anchors.bottom: parent.bottom277 anchors.bottom: parent.bottom
278 anchors.bottomMargin: units.gu(1)278 anchors.bottomMargin: units.gu(1)
279 anchors.left: parent.left279 anchors.left: parent.left
280 anchors.leftMargin: units.gu(1)280 anchors.leftMargin: units.gu(1)
281 anchors.right: parent.right281 anchors.right: parent.right
282 anchors.rightMargin: units.gu(1)282 anchors.rightMargin: units.gu(1)
283 color: styleMusic.common.white283 color: styleMusic.common.white
284 elide: Text.ElideRight284 elide: Text.ElideRight
285 text: genre285 text: genre
286 fontSize: "small"286 fontSize: "small"
287 }287 }
288 Label {288 Label {
289 id: genreTotal289 id: genreTotal
290 anchors.bottom: parent.bottom290 anchors.bottom: parent.bottom
291 anchors.bottomMargin: units.gu(3)291 anchors.bottomMargin: units.gu(3)
292 anchors.left: parent.left292 anchors.left: parent.left
293 anchors.leftMargin: units.gu(1)293 anchors.leftMargin: units.gu(1)
294 anchors.right: parent.right294 anchors.right: parent.right
295 anchors.rightMargin: units.gu(1)295 anchors.rightMargin: units.gu(1)
296 color: styleMusic.nowPlaying.labelSecondaryColor296 color: styleMusic.nowPlaying.labelSecondaryColor
297 elide: Text.ElideRight297 elide: Text.ElideRight
298 text: i18n.tr("%1 song", "%1 songs", model.total).arg(model.total)298 text: i18n.tr("%1 song", "%1 songs", model.total).arg(model.total)
299 fontSize: "x-small"299 fontSize: "x-small"
300 }300 }
301 }301 }
302 }302 }
303 }303 }
304304
305 ListItem.ThinDivider {305 ListItem.ThinDivider {
306 id: albumsDivider306 id: albumsDivider
307 anchors.top: genrelist.bottom307 anchors.top: genrelist.bottom
308 }308 }
309 ListItem.Standard {309 ListItem.Standard {
310 id: albums310 id: albums
311 text: i18n.tr("Albums")311 text: i18n.tr("Albums")
312 anchors.top: albumsDivider.bottom312 anchors.top: albumsDivider.bottom
313 }313 }
314314
315 ListView {315 ListView {
316 id: albumlist316 id: albumlist
317 width: parent.width317 width: parent.width
318 anchors.top: albums.bottom318 anchors.top: albums.bottom
319 anchors.topMargin: units.gu(1)319 anchors.topMargin: units.gu(1)
320 spacing: units.gu(2)320 spacing: units.gu(1)
321 height: units.gu(22)321 height: units.gu(18)
322 model: albumModel.model322 model: albumModel.model
323 delegate: albumDelegate323 delegate: albumDelegate
324 header: Item {324 header: Item {
325 id: albumSpacer325 id: albumSpacer
326 width: units.gu(1)326 width: units.gu(1)
327 }327 }
328 orientation: ListView.Horizontal328 orientation: ListView.Horizontal
329329
330 Component {330 Component {
331 id: albumDelegate331 id: albumDelegate
332 Item {332 Item {
333 property string artist: model.artist333 property string artist: model.artist
334 property string album: model.album334 property string album: model.album
335 property var covers: [Library.getAlbumCover(album)]335 property var covers: [Library.getAlbumCover(album)]
336 property string length: model.length336 property string length: model.length
337 property string file: model.file337 property string file: model.file
338 property string year: model.year338 property string year: model.year
339 property string genre: model.genre339 property string genre: model.genre
340340
341 id: albumItem341 id: albumItem
342 objectName: "albumItemObject"342 objectName: "albumItemObject"
343 height: units.gu(20)343 height: albumlist.height - units.gu(1)
344 width: units.gu(20)344 width: height
345 CoverRow {345 CoverRow {
346 id: albumShape346 id: albumShape
347 anchors {347 anchors {
348 top: parent.top348 top: parent.top
349 left: parent.left349 left: parent.left
350 verticalCenter: parent.verticalCenter350 verticalCenter: parent.verticalCenter
351 }351 }
352 count: albumItem.covers.length352 count: albumItem.covers.length
353 size: albumItem.width353 size: albumItem.width
354 covers: albumItem.covers354 covers: albumItem.covers
355 spacing: units.gu(2)355 spacing: units.gu(2)
356 }356 }
357 MouseArea {357 MouseArea {
358 anchors.fill: parent358 anchors.fill: parent
359 onClicked: {359 onClicked: {
360 albumTracksModel.filterAlbumTracks(album)360 albumTracksModel.filterAlbumTracks(album)
361 songsSheet.line1 = artist361 songsSheet.line1 = artist
362 songsSheet.line2 = album362 songsSheet.line2 = album
363 songsSheet.isAlbum = true363 songsSheet.isAlbum = true
364 songsSheet.covers = covers364 songsSheet.covers = covers
365 PopupUtils.open(songsSheet.sheet)365 PopupUtils.open(songsSheet.sheet)
366 }366 }
367 }367 }
368 Rectangle { // Background so can see text in current state368 Rectangle { // Background so can see text in current state
369 id: albumBg369 id: albumBg
370 anchors.bottom: parent.bottom370 anchors.bottom: parent.bottom
371 anchors.bottomMargin: units.gu(2)371 anchors.bottomMargin: units.gu(2)
372 color: styleMusic.common.black372 color: styleMusic.common.black
373 height: units.gu(3)373 height: units.gu(3)
374 width: parent.width374 width: parent.width
375 }375 }
376 UbuntuShape { // Background so can see text in current state376 UbuntuShape { // Background so can see text in current state
377 id: albumBg2377 id: albumBg2
378 anchors.bottom: parent.bottom378 anchors.bottom: parent.bottom
379 color: styleMusic.common.black379 color: styleMusic.common.black
380 height: units.gu(4)380 height: units.gu(4)
381 width: parent.width381 width: parent.width
382 }382 }
383 Label {383 Label {
384 id: albumLabel384 id: albumLabel
385 anchors.bottom: parent.bottom385 anchors.bottom: parent.bottom
386 anchors.bottomMargin: units.gu(1)386 anchors.bottomMargin: units.gu(1)
387 anchors.left: parent.left387 anchors.left: parent.left
388 anchors.leftMargin: units.gu(1)388 anchors.leftMargin: units.gu(1)
389 anchors.right: parent.right389 anchors.right: parent.right
390 anchors.rightMargin: units.gu(1)390 anchors.rightMargin: units.gu(1)
391 color: styleMusic.nowPlaying.labelSecondaryColor391 color: styleMusic.nowPlaying.labelSecondaryColor
392 elide: Text.ElideRight392 elide: Text.ElideRight
393 text: artist393 text: artist
394 fontSize: "x-small"394 fontSize: "x-small"
395 }395 }
396 Label {396 Label {
397 id: albumLabel2397 id: albumLabel2
398 anchors.bottom: parent.bottom398 anchors.bottom: parent.bottom
399 anchors.bottomMargin: units.gu(3)399 anchors.bottomMargin: units.gu(3)
400 anchors.left: parent.left400 anchors.left: parent.left
401 anchors.leftMargin: units.gu(1)401 anchors.leftMargin: units.gu(1)
402 anchors.right: parent.right402 anchors.right: parent.right
403 anchors.rightMargin: units.gu(1)403 anchors.rightMargin: units.gu(1)
404 color: styleMusic.common.white404 color: styleMusic.common.white
405 elide: Text.ElideRight405 elide: Text.ElideRight
406 text: album406 text: album
407 fontSize: "small"407 fontSize: "small"
408 }
409 }408 }
410 }409 }
411 }410 }
412 }411 }
413 }412 }
413}

Subscribers

People subscribed via source and target branches

to status/vote changes: