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 <[email protected]>
  *      Nekhelesh Ramananthan <[email protected]>
  *      Victor Thompson <[email protected]>
@@ -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/[email protected]")
+                }
+            }
+
+            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 <[email protected]>
- *      Nekhelesh Ramananthan <[email protected]>
- *      Victor Thompson <[email protected]>
- *
- * 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/[email protected]")
-            }
-        }
-        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 <[email protected]>
  *      Daniel Holm <[email protected]>
  *      Victor Thompson <[email protected]>
@@ -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 <[email protected]>
  *      Daniel Holm <[email protected]>
  *      Victor Thompson <[email protected]>
@@ -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 <[email protected]>
  *      Daniel Holm <[email protected]>
  *      Victor Thompson <[email protected]>
@@ -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

-- 
Mailing list: https://launchpad.net/~ubuntu-touch-coreapps-reviewers
Post to     : [email protected]
Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps-reviewers
More help   : https://help.launchpad.net/ListHelp

Reply via email to