ubuntu-touch-coreapps-reviewers team mailing list archive

[Victor Thompson <victor.thompson@xxxxxxxxx>]

Victor Thompson has proposed merging lp:~vthompson/music-app/refactor-fix-1436771 into lp:music-app/refactor.

Commit message:
Make SongsView and ArtistView adaptive

Requested reviews:
  Music App Developers (music-app-dev)
Related bugs:
  Bug #1436771 in Ubuntu Music App: "Some views not taking advantage of available screen space"
  https://bugs.launchpad.net/music-app/+bug/1436771

For more details, see:
https://code.launchpad.net/~vthompson/music-app/refactor-fix-1436771/+merge/254522

Make SongsView and ArtistView adaptive. This allows for more space for the header element in the SongsView and ArtistView to expand up until the width of the view is 60 GU--after which it does not expand. 60 GU seemed to be a nice number and even allows the Nexus 7 not to be seemingly over stretched.

Now on Nexus 7: http://i.imgur.com/DHQtlsq.png
Before on Nexus 7: http://i.imgur.com/pfSb1D0.png
-- 
Your team Music App Developers is requested to review the proposed merge of lp:~vthompson/music-app/refactor-fix-1436771 into lp:music-app/refactor.

=== modified file 'app/components/BlurredHeader.qml'
--- app/components/BlurredHeader.qml	2014-11-11 19:24:09 +0000
+++ app/components/BlurredHeader.qml	2015-03-30 00:02:28 +0000
@@ -21,7 +21,6 @@
 import Ubuntu.Components.ListItems 1.0 as ListItem
 
 ListItem.Standard {
-    id: albumInfo
     width: parent.width
 
     property alias bottomColumn: bottomColumnLoader.sourceComponent
@@ -44,7 +43,7 @@
             top: parent.top
             topMargin: units.gu(3)
         }
-        size: units.gu(18)
+        size: parent.width > units.gu(60) ? units.gu(27.5) : (parent.width - units.gu(5)) / 2
     }
 
     Loader {
@@ -59,11 +58,12 @@
     Loader {
         id: bottomColumnLoader
         anchors {
-            left: coversImage.left
+            left: parent.width > units.gu(60) ? coversImage.right : coversImage.left
+            leftMargin: parent.width > units.gu(60) ? units.gu(2) : units.gu(0)
             right: parent.right
-            rightMargin: units.gu(2)
-            top: coversImage.bottom
-            topMargin: units.gu(1)
+            rightMargin: parent.width > units.gu(60) ? units.gu(0) : units.gu(2)
+            top: parent.width > units.gu(60) ? coversImage.top : coversImage.bottom
+            topMargin: parent.width > units.gu(60) ? units.gu(0) : units.gu(1)
         }
     }
 }

=== modified file 'app/ui/ArtistView.qml'
--- app/ui/ArtistView.qml	2015-02-16 20:27:40 +0000
+++ app/ui/ArtistView.qml	2015-03-30 00:02:28 +0000
@@ -52,20 +52,24 @@
             };
         }
         header: BlurredHeader {
+            id: blurredHeader
             rightColumn: Column {
                 spacing: units.gu(2)
                 ShuffleButton {
                     model: songArtistModel
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                 }
                 QueueAllButton {
                     model: songArtistModel
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                 }
                 PlayAllButton {
                     model: songArtistModel
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                 }
             }
             coverSources: artistViewPage.covers
-            height: units.gu(30)
+            height: blurredHeader.width > units.gu(60) ? units.gu(33.5) : ((blurredHeader.width - units.gu(5)) / 2) + units.gu(12)
             bottomColumn: Column {
                 Label {
                     id: artistLabel

=== modified file 'app/ui/SongsView.qml'
--- app/ui/SongsView.qml	2015-03-24 23:57:29 +0000
+++ app/ui/SongsView.qml	2015-03-30 00:02:28 +0000
@@ -191,10 +191,12 @@
         objectName: "songspage-listview"
         width: parent.width
         header: BlurredHeader {
+            id: blurredHeader
             rightColumn: Column {
                 spacing: units.gu(2)
                 ShuffleButton {
                     model: albumtrackslist.model
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                     onClicked: {
                         if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
                             Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
@@ -209,9 +211,11 @@
                 }
                 QueueAllButton {
                     model: albumtrackslist.model
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                 }
                 PlayAllButton {
                     model: albumtrackslist.model
+                    width: blurredHeader.width > units.gu(60) ? units.gu(23.5) : (blurredHeader.width - units.gu(13)) / 2
                     onClicked: {
                         if (isAlbum && songStackPage.line1 !== i18n.tr("Genre")) {
                             Library.addRecent(albumtrackslist.model.get(0, albumtrackslist.model.RoleModelData).album, "album")
@@ -225,10 +229,12 @@
                     }
                 }
             }
+            property int baseHeight: header.width > units.gu(60) ? units.gu(33.5) : ((header.width - units.gu(5)) / 2) + units.gu(12)
             coverSources: songStackPage.covers
             height: songStackPage.line1 !== i18n.tr("Playlist") &&
-                    songStackPage.line1 !== i18n.tr("Genre") ?
-                        units.gu(33) : units.gu(30)
+                    songStackPage.line1 !== i18n.tr("Genre") &&
+                    header.width <= units.gu(60) ?
+                        baseHeight + units.gu(3) : baseHeight
             bottomColumn: Column {
                 Label {
                     id: albumLabel