ubuntu-touch-coreapps-reviewers team mailing list archive
-
ubuntu-touch-coreapps-reviewers team
-
Mailing list archive
-
Message #07028
[Merge] lp:~ahayzen/music-app/fix-1526274-use-layouts into lp:music-app
Andrew Hayzen has proposed merging lp:~ahayzen/music-app/fix-1526274-use-layouts into lp:music-app.
Commit message:
* Use ListItemLayout for listitems to improve performance and match design guidelines
Requested reviews:
Music App Developers (music-app-dev)
For more details, see:
https://code.launchpad.net/~ahayzen/music-app/fix-1526274-use-layouts/+merge/281757
* Use ListItemLayout for listitems to improve performance and match design guidelines
Only issue with this is it changes the height of some of the listitems to be larger. This is because the ListItemLayout matches the 'design guidelines', we can reduce the vertical padding but should be approval from design first :-)
--
Your team Music App Developers is requested to review the proposed merge of lp:~ahayzen/music-app/fix-1526274-use-layouts into lp:music-app.
=== modified file 'app/components/Delegates/MusicListItem.qml'
--- app/components/Delegates/MusicListItem.qml 2015-10-29 23:02:17 +0000
+++ app/components/Delegates/MusicListItem.qml 2016-01-06 15:08:47 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013, 2014, 2015
+ * Copyright (C) 2013, 2014, 2015, 2016
* Andrew Hayzen <ahayzen@xxxxxxxxx>
* Nekhelesh Ramananthan <krnekhelesh@xxxxxxxxx>
* Victor Thompson <victor.thompson@xxxxxxxxx>
@@ -23,17 +23,20 @@
ListItem {
color: styleMusic.mainView.backgroundColor
+ height: listItemLayout.height
highlightColor: Qt.lighter(color, 1.2)
// Store the currentColor so that actions can bind to it
property var currentColor: highlighted ? highlightColor : color
- property alias column: musicRow.column
- property alias imageSource: musicRow.imageSource
+ property alias imageSource: image.imageSource
property bool multiselectable: false
property bool reorderable: false
+ property alias subtitle: listItemLayout.subtitle
+ property alias title: listItemLayout.title
+
signal itemClicked()
onClicked: {
@@ -58,27 +61,45 @@
visible: false
}
- MusicRow {
- id: musicRow
- anchors {
- fill: parent
- // When not in selectMode we want a margin between the Image and the left edge
- // when in selectMode the checkbox has its own margin so we don't want a double margin
- leftMargin: selectMode ? 0 : units.gu(2)
- rightMargin: selectMode ? 0 : units.gu(2)
- }
-
- // Animate margin changes so it isn't noticible
- Behavior on anchors.leftMargin {
- NumberAnimation {
-
- }
- }
-
- Behavior on anchors.rightMargin {
- NumberAnimation {
-
- }
+ ListItemLayout {
+ id: listItemLayout
+ subtitle.color: styleMusic.common.subtitle
+ subtitle.wrapMode: Text.WrapAnywhere
+ title.color: styleMusic.common.music
+ title.wrapMode: Text.WrapAnywhere
+
+ Image {
+ id: image
+ anchors {
+ verticalCenter: parent.verticalCenter
+ }
+ asynchronous: true
+ fillMode: Image.PreserveAspectCrop
+ height: width
+ SlotsLayout.position: SlotsLayout.Leading
+ source: {
+ if (imageSource !== undefined && imageSource !== "") {
+ if (imageSource.art !== undefined) {
+ imageSource.art
+ } else {
+ "image://albumart/artist=" + imageSource.author + "&album=" + imageSource.album
+ }
+ } else {
+ ""
+ }
+ }
+ sourceSize.height: height
+ sourceSize.width: width
+ width: units.gu(6)
+ visible: imageSource !== undefined
+
+ onStatusChanged: {
+ if (status === Image.Error) {
+ source = Qt.resolvedUrl("../graphics/music-app-cover@xxxxxx")
+ }
+ }
+
+ property var imageSource
}
}
}
=== removed file 'app/components/MusicRow.qml'
--- app/components/MusicRow.qml 2015-10-18 18:16:05 +0000
+++ app/components/MusicRow.qml 1970-01-01 00:00:00 +0000
@@ -1,79 +0,0 @@
-/*
- * Copyright (C) 2013, 2014, 2015
- * Andrew Hayzen <ahayzen@xxxxxxxxx>
- * Nekhelesh Ramananthan <krnekhelesh@xxxxxxxxx>
- * Victor Thompson <victor.thompson@xxxxxxxxx>
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.4
-import Ubuntu.Components 1.3
-
-
-Row {
- height: units.gu(7)
-
- property alias column: columnComponent.sourceComponent
- property real coverSize: styleMusic.common.albumSize
- property var imageSource
-
- spacing: units.gu(2)
-
- Image {
- id: image
- anchors {
- verticalCenter: parent.verticalCenter
- }
- asynchronous: true
- fillMode: Image.PreserveAspectCrop
- height: width
- source: imageSource !== undefined && imageSource !== ""
- ? (imageSource.art !== undefined
- ? imageSource.art
- : "image://albumart/artist=" + imageSource.author + "&album=" + imageSource.album)
- : ""
- sourceSize.height: height
- sourceSize.width: width
- width: units.gu(6)
-
- onStatusChanged: {
- if (status === Image.Error) {
- source = Qt.resolvedUrl("../graphics/music-app-cover@xxxxxx")
- }
- }
- visible: imageSource !== undefined
- }
-
- Loader {
- id: columnComponent
- anchors {
- verticalCenter: parent.verticalCenter
- }
- width: imageSource === undefined ? parent.width - parent.spacing
- : parent.width - image.width - parent.spacing
-
- onSourceComponentChanged: {
- for (var i=0; i < item.children.length; i++) {
- item.children[i].elide = Text.ElideRight
- item.children[i].height = units.gu(2)
- item.children[i].maximumLineCount = 1
- item.children[i].wrapMode = Text.NoWrap
- item.children[i].verticalAlignment = Text.AlignVCenter
-
- // binds to width so it is updated when screen size changes
- item.children[i].width = Qt.binding(function () { return width; })
- }
- }
- }
-}
=== modified file 'app/components/Queue.qml'
--- app/components/Queue.qml 2015-10-18 18:16:05 +0000
+++ app/components/Queue.qml 2016-01-06 15:08:47 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013, 2014, 2015
+ * Copyright (C) 2013, 2014, 2015, 2016
* Andrew Hayzen <ahayzen@xxxxxxxxx>
* Daniel Holm <d.holmen@xxxxxxxxx>
* Victor Thompson <victor.thompson@xxxxxxxxx>
@@ -42,23 +42,6 @@
delegate: MusicListItem {
id: queueListItem
color: player.currentIndex === index ? "#2c2c34" : styleMusic.mainView.backgroundColor
- column: Column {
- Label {
- id: trackTitle
- color: player.currentIndex === index ? UbuntuColors.blue : styleMusic.common.music
- fontSize: "small"
- objectName: "titleLabel"
- text: model.title
- }
-
- Label {
- id: trackArtist
- color: styleMusic.common.subtitle
- fontSize: "x-small"
- objectName: "artistLabel"
- text: model.author
- }
- }
leadingActions: ListItemActions {
actions: [
Remove {
@@ -69,6 +52,11 @@
multiselectable: true
objectName: "nowPlayingListItem" + index
reorderable: true
+ title.color: player.currentIndex === index ? UbuntuColors.blue : styleMusic.common.music
+ title.text: model.title
+ title.objectName: "titleLabel"
+ subtitle.text: model.author
+ subtitle.objectName: "artistLabel"
trailingActions: ListItemActions {
actions: [
AddToPlaylist {
=== modified file 'app/ui/Songs.qml'
--- app/ui/Songs.qml 2015-10-18 18:16:05 +0000
+++ app/ui/Songs.qml 2016-01-06 15:08:47 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013, 2014, 2015
+ * Copyright (C) 2013, 2014, 2015, 2016
* Andrew Hayzen <ahayzen@xxxxxxxxx>
* Daniel Holm <d.holmen@xxxxxxxxx>
* Victor Thompson <victor.thompson@xxxxxxxxx>
@@ -93,25 +93,11 @@
delegate: MusicListItem {
id: track
objectName: "tracksPageListItem" + index
- column: Column {
- Label {
- id: trackTitle
- color: styleMusic.common.music
- fontSize: "small"
- objectName: "tracktitle"
- text: model.title
- }
-
- Label {
- id: trackArtist
- color: styleMusic.common.subtitle
- fontSize: "x-small"
- text: model.author
- }
- }
- height: units.gu(7)
imageSource: {"art": model.art}
multiselectable: true
+ title.text: model.title
+ title.objectName: "tracktitle"
+ subtitle.text: model.author
trailingActions: AddToQueueAndPlaylist {
}
=== modified file 'app/ui/SongsView.qml'
--- app/ui/SongsView.qml 2015-10-28 01:05:33 +0000
+++ app/ui/SongsView.qml 2016-01-06 15:08:47 +0000
@@ -1,5 +1,5 @@
/*
- * Copyright (C) 2013, 2014, 2015
+ * Copyright (C) 2013, 2014, 2015, 2016
* Andrew Hayzen <ahayzen@xxxxxxxxx>
* Daniel Holm <d.holmen@xxxxxxxxx>
* Victor Thompson <victor.thompson@xxxxxxxxx>
@@ -297,27 +297,13 @@
delegate: MusicListItem {
id: track
objectName: "songsPageListItem" + index
- column: Column {
- Label {
- id: trackTitle
- color: styleMusic.common.music
- fontSize: "small"
- objectName: "songspage-tracktitle"
- text: model.title
- }
-
- Label {
- id: trackArtist
- color: styleMusic.common.subtitle
- fontSize: "x-small"
- text: model.author
- }
- }
- height: units.gu(6)
leadingActions: songStackPage.line1 === i18n.tr("Playlist")
? playlistRemoveAction.item : null
multiselectable: true
reorderable: songStackPage.line1 === i18n.tr("Playlist")
+ title.text: model.title
+ title.objectName: "songspage-tracktitle"
+ subtitle.text: model.author
trailingActions: AddToQueueAndPlaylist {
}
=== modified file 'debian/changelog'
--- debian/changelog 2015-12-23 02:07:46 +0000
+++ debian/changelog 2016-01-06 15:08:47 +0000
@@ -2,6 +2,7 @@
[ Andrew Hayzen ]
* Release 2.2ubuntu2 and start on 2.3
+ * Use ListItemLayout for listitems to improve performance and match design guidelines (LP: #1526247).
[ Ken VanDine ]
* Install the content-hub json file in the correct place for peer registry
References
