Ubuntu Music App

Merge lp:~nik90/music-app/album-code-refactor-and-fixes into lp:music-app/trusty

  1. album-code-refactor-and-fixes
  2. Merge into trusty
Proposed by Nekhelesh Ramananthan
Status: Rejected
Rejected by: Andrew Hayzen
Proposed branch: lp:~nik90/music-app/album-code-refactor-and-fixes
Merge into: lp:music-app/trusty
Diff against target: 857 lines (+303/-264)
7 files modified
MusicAlbums.qml (+224/-263)
MusicArtists.qml (+6/-0)
MusicNowPlaying.qml (+1/-0)
MusicPlaylists.qml (+4/-1)
MusicStart.qml (+4/-0)
MusicTracks.qml (+1/-0)
common/ImageButton.qml (+63/-0)
To merge this branch: bzr merge lp:~nik90/music-app/album-code-refactor-and-fixes
Reviewer Review Type Date Requested Status
Nekhelesh Ramananthan (community) Disapprove
Victor Thompson Needs Fixing
Ubuntu Phone Apps Jenkins Bot continuous-integration Needs Fixing
Review via email: mp+200946@code.launchpad.net

Commit message

This commit implements the following,
- Fixes missing playlist count in the playlist page (Bug #1267315)
- Removes some redundant code declarations.
- Added code indentation and spacing to allow for better code readability
- Where possible use column and row to remove anchor definitions in the elements themselves.
- Added new component ImageButton which is derived from the Abstract Button. This is used in places like the expandable where "Add to Playlist" and "Add to queue" actions are required.
- Changed the UbuntuShape radius to "medium" throughout the app as can be observed in the design spec at https://docs.google.com/document/d/12ZvFDfH-7zjk-seTFpP205yOuUNi9ticEkvmQFi_bTY/edit
- Tweaked grid flow type to LeftToRight to ensure that the grid view uses the application width and height efficiently.

Description of the change

This MP implements the following,
- Fixes missing playlist count in the playlist page (Bug #1267315)

- Added new component ImageButton which is derived from the Abstract Button. This is used in places like the expandable where "Add to Playlist" and "Add to queue" actions are required instead of using a label and icon by themselves. (only in MusicAlbums.qml for this MP)

- Removes some redundant code declarations like the following,
1. wrapMode: Text.NoWrap is not required since the default wrapMode is NoWrap.
2. MaximumLineCount: 1 is also not required since if you declare the width of the label, it will automatically restrict the label to 1 line.
3. Many times I saw empty signals like onDoublePressed{} with no code inside it. I removed them since they do nothing.

- Added code indentation and spacing to allow for better code readability

- Changed the UbuntuShape radius to "medium" throughout the app as can be observed in the design spec at https://docs.google.com/document/d/12ZvFDfH-7zjk-seTFpP205yOuUNi9ticEkvmQFi_bTY/edit

- Where possible use column and row to remove anchor definitions in the elements themselves.

UPDATE1: Tweaked grid flow type to LeftToRight to ensure that the grid view uses the application width and height efficiently. Before this fix, the grid would always show the albums vertically even if there were sufficient width. This is suboptimal behaviour.

NOTE: This kind of code refactor and organization is required in other pages. However to make it easier to review and also reduce the risk of regression, I will do it in several MP. This MP was focussed on the MusicAlbums.qml file alone.

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

FAILED: Continuous integration, rev:302
http://91.189.93.70:8080/job/music-app-ci/433/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-trusty/612
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/433
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/435
    SUCCESS: http://91.189.93.70:8080/job/music-app-trusty-amd64-ci/154

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

review: Needs Fixing (continuous-integration)
Revision history for this message
Victor Thompson (vthompson) wrote :

Thanks for the count fix. I never noticed it--I haven't paid much attention to the playlist portion of the app as that was mostly Daniel's baby. I'm not 100% sure the UbuntuShapes should be modified to have a medium radius, however. I thought most of the spec elements were NOT that round (besides the larger shapes in the Music in Albums tabs). The spec almost seems oddly somewhere between the default (small) and medium, but closer to small. BUT, I know most other apps are using the rounder version of the components. At first I assumed I wouldn't prefer the cover art images at a medium radius, but I actually do like it visualized that way now that I see it.

The refactor portion of this still needs to be reviewed a bit--I don't have time at the moment.

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

Let me know what your final decision is regarding the ubuntu shape. Personally I like the "medium" radius since it matches with other apps and also looks good. But I leave that entirely up to you. As for the refactor portion, I will have one final look at my changes.

It seems that one of the tests is failing due to my code refactor. I tried fixing the test, but I am terrible with python and wasn't able to fix. Do you mind looking at it while reviewing my code and proposing a fix? The failing test is music_app.tests.test_music.TestMainWindow.test_add_song_to_queue_from_albums_sheet(with mouse)

lp:~nik90/music-app/album-code-refactor-and-fixes updated
303. By Nekhelesh Ramananthan

Tweaked grid behaviour to take advantage of the app width and height

304. By Nekhelesh Ramananthan

reverted manifest.json file change

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

FAILED: Continuous integration, rev:304
http://91.189.93.70:8080/job/music-app-ci/435/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests-trusty/617
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/435
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/437
    SUCCESS: http://91.189.93.70:8080/job/music-app-trusty-amd64-ci/156

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

review: Needs Fixing (continuous-integration)
Revision history for this message
Victor Thompson (vthompson) wrote :

I believe you'll need to revert your changes in r303. The Albums tab is supposed to flow left to right as it did previously, as per the design spec.

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

One more thing is that the playlist count not being shown should be fixed by the branch I have proposed to merge that completes the app's move to using the Sheet property, per the design spec. The Page that you are fixing will actually be removed by that MP.

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

Considering that the page I did the code refactoring for does not exist and bug fixes made in another MP, I am disapproving this branch.

>I believe you'll need to revert your changes in r303. The Albums tab is supposed to flow left to right as it >did previously, as per the design spec.

You might want to check the music app trunk. In the albums tab, the albums are supposed to use a organic view as per design spec. However currently the music app shows the albums vertically there by wasting application width when viewed on the desktop. None the less, this MP is disapproved, so it doesn't matter.

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

Shall I reject the MP for you?

Regarding the organic view this wasn't added before due to time constraints, but it is on our list of things todo :-)

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

Yeah please do. Thanks.

Unmerged revisions

304. By Nekhelesh Ramananthan

reverted manifest.json file change

303. By Nekhelesh Ramananthan

Tweaked grid behaviour to take advantage of the app width and height

302. By Nekhelesh Ramananthan

Changed ubuntu shape radius to medium throughout app

301. By Nekhelesh Ramananthan

merge from trunk

300. By Nekhelesh Ramananthan

Fixed missing playlist count in the playlist page

299. By Nekhelesh Ramananthan

Revert accidental manifest.json change

298. By Nekhelesh Ramananthan

Organised the entire album tab code

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'MusicAlbums.qml'
--- MusicAlbums.qml 2013-12-23 22:53:59 +0000
+++ MusicAlbums.qml 2014-01-09 14:17:52 +0000
@@ -16,20 +16,20 @@
16 */16 */
1717
18import QtQuick 2.018import QtQuick 2.0
19import QtMultimedia 5.0
19import Ubuntu.Components 0.120import Ubuntu.Components 0.1
20import Ubuntu.Components.ListItems 0.121import QtGraphicalEffects 1.0
22import QtQuick.LocalStorage 2.0
21import Ubuntu.Components.Popups 0.123import Ubuntu.Components.Popups 0.1
22import Ubuntu.Components.ListItems 0.1 as ListItem24import Ubuntu.Components.ListItems 0.1 as ListItem
23import QtMultimedia 5.0
24import QtQuick.LocalStorage 2.0
25import QtGraphicalEffects 1.0
26import "settings.js" as Settings
27import "meta-database.js" as Library25import "meta-database.js" as Library
28import "playlists.js" as Playlists26import "playlists.js" as Playlists
27import "settings.js" as Settings
29import "common"28import "common"
3029
31Page {30Page {
32 id: mainpage31 id: mainpage
32
33 title: i18n.tr("Albums")33 title: i18n.tr("Albums")
3434
35 property string artist: ""35 property string artist: ""
@@ -42,9 +42,7 @@
4242
43 onVisibleChanged: {43 onVisibleChanged: {
44 if (visible === true)44 if (visible === true)
45 {
46 musicToolbar.setPage(mainpage);45 musicToolbar.setPage(mainpage);
47 }
48 }46 }
4947
50 MusicSettings {48 MusicSettings {
@@ -53,27 +51,34 @@
5351
54 GridView {52 GridView {
55 id: albumlist53 id: albumlist
56 anchors.fill: parent54
57 anchors.leftMargin: units.gu(1)55 anchors {
58 anchors.topMargin: units.gu(1)56 fill: parent
59 anchors.bottomMargin: units.gu(1)57 margins: units.gu(1)
60 cellHeight: (parent.height - units.gu(2))/358 }
61 cellWidth: (parent.height - units.gu(2))/359
62 model: albumModel.model60 model: albumModel.model
63 delegate: albumDelegate61 delegate: albumDelegate
64 flow: GridView.TopToBottom62 flow: GridView.LeftToRight
63 cellHeight: mainpage.width <= units.gu(50) ? (mainpage.width - albumlist.anchors.margins)/2 : (units.gu(60) - albumlist.anchors.margins)/3
64 cellWidth: cellHeight
6565
66 Component {66 Component {
67 id: albumDelegate67 id: albumDelegate
68 Item {68 Item {
69 id: albumItem69 id: albumItem
70
70 height: albumlist.cellHeight - units.gu(1)71 height: albumlist.cellHeight - units.gu(1)
71 width: albumlist.cellHeight - units.gu(1)72 width: albumlist.cellHeight - units.gu(1)
72 anchors.margins: units.gu(1)73 anchors.margins: units.gu(1)
74
73 UbuntuShape {75 UbuntuShape {
74 id: albumShape76 id: albumShape
77
75 height: albumItem.width78 height: albumItem.width
76 width: albumItem.width79 width: albumItem.width
80 radius: "medium"
81
77 image: Image {82 image: Image {
78 id: icon83 id: icon
79 fillMode: Image.Stretch84 fillMode: Image.Stretch
@@ -86,58 +91,58 @@
86 property string year: model.year91 property string year: model.year
87 source: cover !== "" ? cover : "images/cover_default.png"92 source: cover !== "" ? cover : "images/cover_default.png"
88 }93 }
89 UbuntuShape { // Background so can see text in current state94
90 id: albumBg295 // Black Bar to contain the album title and artist
91 anchors.bottom: parent.bottom96 UbuntuShape {
92 color: styleMusic.common.black97 anchors {
93 height: units.gu(4)98 left: parent.left
94 width: parent.width99 right: parent.right
95 }100 bottom: parent.bottom
96 Rectangle { // Background so can see text in current state101 }
97 id: albumBg102
98 anchors.bottom: parent.bottom103 radius: "medium"
99 anchors.bottomMargin: units.gu(2)104 height: units.gu(5)
100 color: styleMusic.common.black105 color: styleMusic.common.black
101 height: units.gu(3)106
102 width: parent.width107 // Black rectangle to remove the curved corners at the top
103 }108 Rectangle {
104 Label {109 anchors { fill: parent; bottomMargin: units.gu(1) }
105 id: albumArtist110 color: styleMusic.common.black
106 objectName: "albums-albumartist"111 }
107 anchors.bottom: parent.bottom112
108 anchors.bottomMargin: units.gu(1)113 Column {
109 anchors.left: parent.left114 id: albumDataColumn
110 anchors.leftMargin: units.gu(.25)115 anchors {
111 anchors.right: parent.right116 verticalCenter: parent.verticalCenter
112 anchors.rightMargin: units.gu(.25)117 left: parent.left
113 horizontalAlignment: Text.AlignHCenter118 right: parent.right
114 color: styleMusic.nowPlaying.labelSecondaryColor119 margins: units.gu(1)
115 elide: Text.ElideRight120 }
116 text: artist121
117 fontSize: "x-small"122 Label {
118 }123 id: albumLabel
119 Label {124 text: album
120 id: albumLabel125 fontSize: "small"
121 anchors.bottom: parent.bottom126 width: parent.width
122 anchors.bottomMargin: units.gu(3)127 elide: Text.ElideRight
123 anchors.left: parent.left128 color: styleMusic.common.white
124 anchors.leftMargin: units.gu(.25)129 }
125 anchors.right: parent.right130
126 anchors.rightMargin: units.gu(.25)131 Label {
127 horizontalAlignment: Text.AlignHCenter132 id: albumArtist
128 color: styleMusic.common.white133 objectName: "albums-albumartist"
129 elide: Text.ElideRight134 text: artist
130 text: album135 width: parent.width
131 fontSize: "small"136 fontSize: "x-small"
137 elide: Text.ElideRight
138 color: styleMusic.nowPlaying.labelSecondaryColor
139 }
140 }
132 }141 }
133 }142 }
134143
135 MouseArea {144 MouseArea {
136 anchors.fill: parent145 anchors.fill: parent
137 onDoubleClicked: {
138 }
139 onPressAndHold: {
140 }
141 onClicked: {146 onClicked: {
142 albumTracksModel.filterAlbumTracks(album)147 albumTracksModel.filterAlbumTracks(album)
143 mainpage.artist = artist148 mainpage.artist = artist
@@ -156,112 +161,109 @@
156 id: albumSheet161 id: albumSheet
157 DefaultSheet {162 DefaultSheet {
158 id: sheet163 id: sheet
159 anchors.bottomMargin: units.gu(.5)164
160 doneButton: false165 doneButton: false
166 anchors.bottomMargin: units.gu(0.5)
161 contentsHeight: parent.height167 contentsHeight: parent.height
162 contentsWidth: parent.width168 contentsWidth: parent.width
163169
164 ListView {170 ListView {
171 id: albumtrackslist
172
165 clip: true173 clip: true
166 id: albumtrackslist174 anchors.fill: parent
167 width: parent.width175 anchors.margins: -units.gu(1)
168 anchors.top: parent.top
169 anchors.bottom: parent.bottom
170 model: albumTracksModel.model176 model: albumTracksModel.model
171 delegate: albumTracksDelegate177 delegate: albumTracksDelegate
178
179 onCountChanged: albumtrackslist.currentIndex = albumTracksModel.indexOf(currentFile)
180
172 header: ListItem.Standard {181 header: ListItem.Standard {
173 id: albumInfo182 id: albumInfo
183
174 width: parent.width184 width: parent.width
175 height: units.gu(20)185 height: units.gu(20)
186 showDivider: false
176187
177 UbuntuShape {188 UbuntuShape {
178 id: albumImage189 id: albumImage
179 anchors.left: parent.left190
180 anchors.top: parent.top191 anchors {
181 anchors.verticalCenter: parent.verticalCenter192 top: parent.top
182 anchors.margins: units.gu(1)193 bottom: parent.bottom
194 left: parent.left
195 margins: units.gu(2)
196 }
197
198 radius: "medium"
183 height: parent.height199 height: parent.height
184 width: height200 width: height
185 image: Image {201 image: Image {
186 source: Library.hasCover(mainpage.file) ? mainpage.cover : Qt.resolvedUrl("images/cover_default.png")202 source: Library.hasCover(mainpage.file) ? mainpage.cover : Qt.resolvedUrl("images/cover_default.png")
187 }203 }
188 }204 }
189 Label {205
190 id: albumArtist206 Column {
191 objectName: "albumsheet-albumartist"207 id: albumInfoColumn
192 wrapMode: Text.NoWrap208
193 maximumLineCount: 1209 anchors {
194 fontSize: "small"210 top: albumImage.top
195 anchors.left: albumImage.right211 left: albumImage.right
196 anchors.leftMargin: units.gu(1)212 leftMargin: units.gu(1)
197 anchors.top: parent.top213 }
198 anchors.topMargin: units.gu(1.5)214
199 anchors.right: parent.right215 Label {
200 anchors.rightMargin: units.gu(1.5)216 id: albumArtist
201 elide: Text.ElideRight217 objectName: "albumsheet-albumartist"
202 text: mainpage.artist218 fontSize: "small"
203 }219 text: mainpage.artist
204 Label {220 elide: Text.ElideRight
205 id: albumLabel221 }
206 wrapMode: Text.NoWrap222
207 maximumLineCount: 2223 Label {
208 fontSize: "medium"224 id: albumLabel
209 color: styleMusic.common.music225 text: mainpage.album
210 anchors.left: albumImage.right226 elide: Text.ElideRight
211 anchors.leftMargin: units.gu(1)227 color: styleMusic.common.music
212 anchors.top: albumArtist.bottom228 }
213 anchors.topMargin: units.gu(0.8)229 }
214 anchors.right: parent.right230
215 anchors.rightMargin: units.gu(1.5)
216 elide: Text.ElideRight
217 text: mainpage.album
218 }
219 Label {231 Label {
220 id: albumYear232 id: albumYear
221 wrapMode: Text.NoWrap233 anchors {
222 maximumLineCount: 1234 top: albumInfoColumn.bottom
235 left: albumInfoColumn.left
236 topMargin: units.gu(2)
237 }
223 fontSize: "x-small"238 fontSize: "x-small"
224 anchors.left: albumImage.right
225 anchors.leftMargin: units.gu(1)
226 anchors.top: albumLabel.bottom
227 anchors.topMargin: units.gu(2)
228 anchors.right: parent.right
229 anchors.rightMargin: units.gu(1.5)
230 elide: Text.ElideRight239 elide: Text.ElideRight
231 text: i18n.tr(mainpage.year + " | %1 song", mainpage.year + " | %1 songs", albumTracksModel.model.count).arg(albumTracksModel.model.count)240 text: i18n.tr(mainpage.year + " | %1 song", mainpage.year + " | %1 songs", albumTracksModel.model.count).arg(albumTracksModel.model.count)
232 }241 }
233 }242 }
234243
235 onCountChanged: {
236 albumtrackslist.currentIndex = albumTracksModel.indexOf(currentFile)
237 }
238
239 Component {244 Component {
240 id: albumTracksDelegate245 id: albumTracksDelegate
241246
242 ListItem.Standard {247 ListItem.Standard {
243 id: track248 id: track
244 objectName: "albumsheet-track"249 objectName: "albumsheet-track"
250
245 iconFrame: false251 iconFrame: false
246 progression: false252 progression: false
247 height: styleMusic.albums.itemHeight253 height: styleMusic.albums.itemHeight
248254
249 MouseArea {255 MouseArea {
250 anchors.fill: parent256 anchors.fill: parent
251 onDoubleClicked: {
252 }
253 onClicked: {257 onClicked: {
254 if (focus == false) {258 if (focus == false)
255 focus = true259 focus = true
256 }
257 trackClicked(albumTracksModel, index) // play track260 trackClicked(albumTracksModel, index) // play track
258 Library.addRecent(album, artist, cover, album, "album")261 Library.addRecent(album, artist, cover, album, "album")
259 mainView.hasRecent = true262 mainView.hasRecent = true
260 recentModel.filterRecent()263 recentModel.filterRecent()
261264
262 // TODO: This closes the SDK defined sheet265 // TODO: This closes the SDK defined sheet component. It should be able to close
263 // component. It should be able to close266 // albumSheet.
264 // albumSheet.
265 PopupUtils.close(sheet)267 PopupUtils.close(sheet)
266 }268 }
267 }269 }
@@ -269,17 +271,14 @@
269 Label {271 Label {
270 id: trackTitle272 id: trackTitle
271 objectName: "albumsheet-tracktitle"273 objectName: "albumsheet-tracktitle"
272 wrapMode: Text.NoWrap274 anchors {
273 maximumLineCount: 1275 top: parent.top
276 left: parent.left
277 right: expandItem.left
278 leftMargin: units.gu(2)
279 margins: units.gu(1)
280 }
274 fontSize: "medium"281 fontSize: "medium"
275 anchors.left: parent.left
276 anchors.leftMargin: units.gu(2)
277 anchors.top: parent.top
278 anchors.topMargin: units.gu(1)
279 anchors.bottom: parent.bottom
280 anchors.bottomMargin: units.gu(1)
281 anchors.right: expandItem.left
282 anchors.rightMargin: units.gu(1.5)
283 elide: Text.ElideRight282 elide: Text.ElideRight
284 text: model.title283 text: model.title
285 }284 }
@@ -287,48 +286,47 @@
287 Image {286 Image {
288 id: expandItem287 id: expandItem
289 objectName: "albumsheet-expanditem"288 objectName: "albumsheet-expanditem"
290 anchors.right: parent.right289
291 anchors.rightMargin: units.gu(2)290 anchors {
291 verticalCenter: trackTitle.verticalCenter
292 right: parent.right
293 rightMargin: units.gu(2)
294 }
292 source: expandable.visible ? "images/dropdown-menu-up.svg" : "images/dropdown-menu.svg"295 source: expandable.visible ? "images/dropdown-menu-up.svg" : "images/dropdown-menu.svg"
293 height: styleMusic.common.expandedItem296 height: styleMusic.common.expandedItem
294 width: styleMusic.common.expandedItem297 width: styleMusic.common.expandedItem
295 y: parent.y + (styleMusic.albums.itemHeight / 2) - (height / 2)298
299 MouseArea {
300 anchors.centerIn: parent
301 width: styleMusic.common.expandedItem * 3
302 height: styleMusic.common.expandedItem * 2
303 onClicked: {
304 if(expandable.visible) {
305 customdebug("clicked collapse")
306 expandable.visible = false
307 track.height = styleMusic.albums.itemHeight
308 }
309 else {
310 customdebug("clicked expand")
311 collapseExpand(-1); // collapse all others
312 expandable.visible = true
313 track.height = styleMusic.albums.expandedHeight
314 }
315 }
316 }
296 }317 }
297318
298 MouseArea {319 Item {
299 anchors.bottom: parent.bottom
300 anchors.right: parent.right
301 anchors.top: parent.top
302 width: styleMusic.common.expandedItem * 3
303 onClicked: {
304 if(expandable.visible) {
305 customdebug("clicked collapse")
306 expandable.visible = false
307 track.height = styleMusic.albums.itemHeight
308 }
309 else {
310 customdebug("clicked expand")
311 collapseExpand(-1); // collapse all others
312 expandable.visible = true
313 track.height = styleMusic.albums.expandedHeight
314 }
315 }
316 }
317
318 Rectangle {
319 id: expandable320 id: expandable
320 color: "transparent"321
322 visible: false
321 height: styleMusic.albums.expandHeight323 height: styleMusic.albums.expandHeight
322 visible: false324
325 Component.onCompleted: collapseExpand.connect(onCollapseExpand);
326
323 MouseArea {327 MouseArea {
324 anchors.fill: parent328 anchors.fill: parent
325 onClicked: {329 onClicked: customdebug("User pressed outside the playlist item and expanded items.")
326 customdebug("User pressed outside the playlist item and expanded items.")
327 }
328 }
329
330 Component.onCompleted: {
331 collapseExpand.connect(onCollapseExpand);
332 }330 }
333331
334 function onCollapseExpand(indexCol)332 function onCollapseExpand(indexCol)
@@ -341,108 +339,73 @@
341 }339 }
342 }340 }
343341
344 // background for expander342 // Background for expander
345 Rectangle {343 Rectangle {
346 id: expandedBackground344 id: expandedBackground
347 anchors.top: parent.top345
348 anchors.topMargin: styleMusic.albums.itemHeight346 anchors {
347 top: parent.top
348 topMargin: styleMusic.albums.itemHeight
349 }
350
351 opacity: 0.4
352 width: track.width
349 color: styleMusic.common.black353 color: styleMusic.common.black
350 height: styleMusic.albums.expandedHeight - styleMusic.albums.itemHeight354 height: styleMusic.albums.expandedHeight - styleMusic.albums.itemHeight
351 width: track.width355
352 opacity: 0.4356 Row {
353 }357 id: trackOptionsRow
354358
355 // add to playlist359 anchors {
356 Rectangle {360 verticalCenter: parent.verticalCenter
357 id: playlistRow361 left: parent.left
358 anchors.top: expandedBackground.top362 right: parent.right
359 anchors.left: parent.left363 leftMargin: styleMusic.albums.expandedLeftMargin
360 anchors.leftMargin: styleMusic.albums.expandedLeftMargin364 }
361 color: "transparent"365
362 height: expandedBackground.height366 spacing: styleMusic.albums.expandedLeftMargin
363 width: units.gu(15)367
364 Icon {368 ImageButton {
365 id: playlistTrack369 id: addToPlaylistButton
366 anchors.verticalCenter: parent.verticalCenter370
367 color: styleMusic.common.white371 icon.name: "add"
368 name: "add"372 icon.width: styleMusic.common.expandedItem
369 height: styleMusic.common.expandedItem373 label.text: i18n.tr("Add to playlist")
370 width: styleMusic.common.expandedItem374 label.anchors.verticalCenter: icon.verticalCenter
371 }375
372 Label {376 onClicked: {
373 anchors.left: playlistTrack.right377 expandable.visible = false
374 anchors.leftMargin: units.gu(0.5)378 track.height = styleMusic.albums.itemHeight
375 anchors.verticalCenter: parent.verticalCenter379 chosenArtist = artist
376 color: styleMusic.common.white380 chosenTitle = title
377 fontSize: "small"381 chosenTrack = file
378 width: parent.width - playlistTrack.width - units.gu(1)382 chosenAlbum = album
379 text: i18n.tr("Add to playlist")383 chosenCover = cover
380 wrapMode: Text.WordWrap384 chosenGenre = genre
381 maximumLineCount: 3385 chosenIndex = index
382 }386 console.debug("Debug: Add track to playlist")
383 MouseArea {387 PopupUtils.open(Qt.resolvedUrl("MusicaddtoPlaylist.qml"), mainView, { title: i18n.tr("Select playlist") })
384 anchors.fill: parent388 }
385 onClicked: {389 }
386 expandable.visible = false390
387 track.height = styleMusic.albums.itemHeight391 ImageButton {
388 chosenArtist = artist392 id: addToQueueButton
389 chosenTitle = title393 objectName: "albumsheet-queuetrack"
390 chosenTrack = file394
391 chosenAlbum = album395 image.source: Qt.resolvedUrl("images/queue.png")
392 chosenCover = cover396 image.width: styleMusic.common.expandedItem
393 chosenGenre = genre397 label.text: i18n.tr("Add to queue")
394 chosenIndex = index398 label.anchors.verticalCenter: image.verticalCenter
395 console.debug("Debug: Add track to playlist")399
396 PopupUtils.open(Qt.resolvedUrl("MusicaddtoPlaylist.qml"), mainView,400 onClicked: {
397 {401 expandable.visible = false
398 title: i18n.tr("Select playlist")402 track.height = styleMusic.albums.itemHeight
399 } )403 console.debug("Debug: Add track to queue: " + title)
400 }404 trackQueue.model.append({"title": title, "artist": artist, "file": file, "album": album, "cover": cover, "genre": genre})
401 }405 }
402 }406 }
403 // Queue407 }
404 Rectangle {408 }
405 id: queueRow
406 anchors.top: expandedBackground.top
407 anchors.left: playlistRow.left
408 anchors.leftMargin: units.gu(15)
409 color: "transparent"
410 height: expandedBackground.height
411 width: units.gu(15)
412 Image {
413 id: queueTrack
414 objectName: "albumsheet-queuetrack"
415 anchors.verticalCenter: parent.verticalCenter
416 source: "images/queue.png"
417 height: styleMusic.common.expandedItem
418 width: styleMusic.common.expandedItem
419 }
420 Label {
421 anchors.left: queueTrack.right
422 anchors.leftMargin: units.gu(0.5)
423 anchors.verticalCenter: parent.verticalCenter
424 color: styleMusic.common.white
425 fontSize: "small"
426 width: parent.width - queueTrack.width - units.gu(1)
427 text: i18n.tr("Add to queue")
428 wrapMode: Text.WordWrap
429 maximumLineCount: 3
430 }
431 MouseArea {
432 anchors.fill: parent
433 onClicked: {
434 expandable.visible = false
435 track.height = styleMusic.albums.itemHeight
436 console.debug("Debug: Add track to queue: " + title)
437 trackQueue.model.append({"title": title, "artist": artist, "file": file, "album": album, "cover": cover, "genre": genre})
438 }
439 }
440 }
441 }
442
443 onFocusChanged: {
444 }
445 Component.onCompleted: {
446 }409 }
447 }410 }
448 }411 }
@@ -450,5 +413,3 @@
450 }413 }
451 }414 }
452}415}
453
454
455416
=== modified file 'MusicArtists.qml'
--- MusicArtists.qml 2013-12-23 22:53:59 +0000
+++ MusicArtists.qml 2014-01-09 14:17:52 +0000
@@ -70,6 +70,7 @@
70 anchors.leftMargin: units.gu(4)70 anchors.leftMargin: units.gu(4)
71 anchors.top: parent.top71 anchors.top: parent.top
72 anchors.topMargin: units.gu(1)72 anchors.topMargin: units.gu(1)
73 radius: "medium"
73 width: styleMusic.common.albumSize74 width: styleMusic.common.albumSize
74 height: styleMusic.common.albumSize75 height: styleMusic.common.albumSize
75 image: Image {76 image: Image {
@@ -83,6 +84,7 @@
83 anchors.leftMargin: units.gu(3)84 anchors.leftMargin: units.gu(3)
84 anchors.top: parent.top85 anchors.top: parent.top
85 anchors.topMargin: units.gu(1)86 anchors.topMargin: units.gu(1)
87 radius: "medium"
86 width: styleMusic.common.albumSize88 width: styleMusic.common.albumSize
87 height: styleMusic.common.albumSize89 height: styleMusic.common.albumSize
88 image: Image {90 image: Image {
@@ -96,6 +98,7 @@
96 anchors.leftMargin: units.gu(2)98 anchors.leftMargin: units.gu(2)
97 anchors.top: parent.top99 anchors.top: parent.top
98 anchors.topMargin: units.gu(1)100 anchors.topMargin: units.gu(1)
101 radius: "medium"
99 width: styleMusic.common.albumSize102 width: styleMusic.common.albumSize
100 height: styleMusic.common.albumSize103 height: styleMusic.common.albumSize
101 image: Image {104 image: Image {
@@ -109,6 +112,7 @@
109 anchors.leftMargin: units.gu(1)112 anchors.leftMargin: units.gu(1)
110 anchors.top: parent.top113 anchors.top: parent.top
111 anchors.topMargin: units.gu(1)114 anchors.topMargin: units.gu(1)
115 radius: "medium"
112 width: styleMusic.common.albumSize116 width: styleMusic.common.albumSize
113 height: styleMusic.common.albumSize117 height: styleMusic.common.albumSize
114 image: Image {118 image: Image {
@@ -220,6 +224,7 @@
220 anchors.margins: units.gu(2)224 anchors.margins: units.gu(2)
221 height: parent.height225 height: parent.height
222 width: height226 width: height
227 radius: "medium"
223 image: Image {228 image: Image {
224 source: artisttrackslist.cover !== "" ? artisttrackslist.cover : "images/cover_default.png"229 source: artisttrackslist.cover !== "" ? artisttrackslist.cover : "images/cover_default.png"
225 }230 }
@@ -298,6 +303,7 @@
298 anchors.leftMargin: units.gu(2)303 anchors.leftMargin: units.gu(2)
299 anchors.top: parent.top304 anchors.top: parent.top
300 anchors.topMargin: units.gu(1)305 anchors.topMargin: units.gu(1)
306 radius: "medium"
301 width: styleMusic.common.albumSize307 width: styleMusic.common.albumSize
302 height: styleMusic.common.albumSize308 height: styleMusic.common.albumSize
303 image: Image {309 image: Image {
304310
=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml 2013-12-23 22:53:59 +0000
+++ MusicNowPlaying.qml 2014-01-09 14:17:52 +0000
@@ -528,6 +528,7 @@
528 anchors.left: parent.left528 anchors.left: parent.left
529 anchors.leftMargin: units.gu(1.5)529 anchors.leftMargin: units.gu(1.5)
530 anchors.top: parent.top530 anchors.top: parent.top
531 radius: "medium"
531 height: (queueListItem.state === "current" ? queuelist.currentHeight - units.gu(8) : queuelist.normalHeight) - units.gu(2)532 height: (queueListItem.state === "current" ? queuelist.currentHeight - units.gu(8) : queuelist.normalHeight) - units.gu(2)
532 width: height533 width: height
533 image: Image {534 image: Image {
534535
=== modified file 'MusicPlaylists.qml'
--- MusicPlaylists.qml 2014-01-09 00:43:35 +0000
+++ MusicPlaylists.qml 2014-01-09 14:17:52 +0000
@@ -492,6 +492,7 @@
492492
493 Label {493 Label {
494 id: playlistInfoCount494 id: playlistInfoCount
495
495 anchors {496 anchors {
496 top: playlistInfoLabel.bottom497 top: playlistInfoLabel.bottom
497 left: playlistInfoLabel.left498 left: playlistInfoLabel.left
@@ -499,7 +500,7 @@
499 topMargin: units.gu(1)500 topMargin: units.gu(1)
500 rightMargin: units.gu(1.5)501 rightMargin: units.gu(1.5)
501 }502 }
502 text: i18n.tr("%1 song", "%1 songs", playlist.count).arg(playlist.count)503 text: i18n.tr("%1 song", "%1 songs", playlistInfo.count).arg(playlistInfo.count)
503 color: styleMusic.common.white504 color: styleMusic.common.white
504 fontSize: "medium"505 fontSize: "medium"
505 elide: Text.ElideRight506 elide: Text.ElideRight
@@ -1022,6 +1023,7 @@
1022 anchors.leftMargin: units.gu(1)1023 anchors.leftMargin: units.gu(1)
1023 anchors.top: parent.top1024 anchors.top: parent.top
1024 anchors.verticalCenter: parent.verticalCenter1025 anchors.verticalCenter: parent.verticalCenter
1026 radius: "medium"
1025 width: styleMusic.common.albumSize1027 width: styleMusic.common.albumSize
1026 height: styleMusic.common.albumSize1028 height: styleMusic.common.albumSize
1027 image: Image {1029 image: Image {
@@ -1030,6 +1032,7 @@
1030 UbuntuShape { // Background so can see text in current state1032 UbuntuShape { // Background so can see text in current state
1031 id: trackBg1033 id: trackBg
1032 anchors.top: parent.top1034 anchors.top: parent.top
1035 radius: "medium"
1033 color: styleMusic.common.black1036 color: styleMusic.common.black
1034 width: styleMusic.common.albumSize1037 width: styleMusic.common.albumSize
1035 height: styleMusic.common.albumSize1038 height: styleMusic.common.albumSize
10361039
=== modified file 'MusicStart.qml'
--- MusicStart.qml 2013-12-19 14:39:27 +0000
+++ MusicStart.qml 2014-01-09 14:17:52 +0000
@@ -104,6 +104,7 @@
104 id: recentShape104 id: recentShape
105 height: recentItem.width105 height: recentItem.width
106 width: recentItem.width106 width: recentItem.width
107 radius: "medium"
107 image: Image {108 image: Image {
108 id: icon109 id: icon
109 fillMode: Image.Stretch110 fillMode: Image.Stretch
@@ -119,6 +120,7 @@
119 UbuntuShape { // Background so can see text in current state120 UbuntuShape { // Background so can see text in current state
120 id: albumBg2121 id: albumBg2
121 anchors.bottom: parent.bottom122 anchors.bottom: parent.bottom
123 radius: "medium"
122 color: styleMusic.common.black124 color: styleMusic.common.black
123 height: units.gu(4)125 height: units.gu(4)
124 width: parent.width126 width: parent.width
@@ -228,6 +230,7 @@
228 id: genreShape230 id: genreShape
229 height: genreItem.width231 height: genreItem.width
230 width: genreItem.width232 width: genreItem.width
233 radius: "medium"
231 image: Image {234 image: Image {
232 id: icon235 id: icon
233 fillMode: Image.Stretch236 fillMode: Image.Stretch
@@ -272,6 +275,7 @@
272 UbuntuShape { // Background so can see text in current state275 UbuntuShape { // Background so can see text in current state
273 id: genreBg2276 id: genreBg2
274 anchors.bottom: parent.bottom277 anchors.bottom: parent.bottom
278 radius: "medium"
275 color: styleMusic.common.black279 color: styleMusic.common.black
276 height: units.gu(4)280 height: units.gu(4)
277 width: parent.width281 width: parent.width
278282
=== modified file 'MusicTracks.qml'
--- MusicTracks.qml 2014-01-06 18:08:52 +0000
+++ MusicTracks.qml 2014-01-09 14:17:52 +0000
@@ -73,6 +73,7 @@
73 anchors.leftMargin: units.gu(2)73 anchors.leftMargin: units.gu(2)
74 anchors.top: parent.top74 anchors.top: parent.top
75 anchors.topMargin: units.gu(1)75 anchors.topMargin: units.gu(1)
76 radius: "medium"
76 width: styleMusic.common.albumSize77 width: styleMusic.common.albumSize
77 height: styleMusic.common.albumSize78 height: styleMusic.common.albumSize
78 image: Image {79 image: Image {
7980
=== added file 'common/ImageButton.qml'
--- common/ImageButton.qml 1970-01-01 00:00:00 +0000
+++ common/ImageButton.qml 2014-01-09 14:17:52 +0000
@@ -0,0 +1,63 @@
1/*
2 * Copyright (C) 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 General Public License version 3 as
6 * published by the Free Software Foundation.
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 General Public License for more details.
12 *
13 * You should have received a copy of the GNU General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 *
16 * Authored by: Nekhelesh Ramananthan <krnekhelesh@gmail.com>
17 */
18
19import QtQuick 2.0
20import Ubuntu.Components 0.1
21
22// Qml Item to draw a button with an image on its left/right
23AbstractButton {
24 id: imageButton
25
26 // Set the button label and image
27 property alias label: _label
28 property alias image: _image
29 property alias icon: _icon
30
31 // Property to mirror the button layout if necessary. Image on the left by default.
32 property bool mirrorLayout: false;
33
34 width: childrenRect.width;
35 height: childrenRect.height;
36
37 Row {
38 spacing: units.gu(1);
39 height: childrenRect.height;
40 LayoutMirroring.enabled: mirrorLayout
41
42 Icon {
43 id: _icon
44 name: ""
45 height: width
46 color: styleMusic.common.white
47 visible: name === "" ? false : true
48 }
49
50 Image {
51 id: _image
52 source: ""
53 height: width
54 visible: source === "" ? false : true
55 }
56
57 Label {
58 id: _label
59 fontSize: "small"
60 color: styleMusic.common.white
61 }
62 }
63}

Subscribers

People subscribed via source and target branches

to status/vote changes: