Merge lp:~ahayzen/music-app/remix-add-card-view into lp:music-app/remix

[Andrew Hayzen]

* Add CardView and Card
* Implement in Albums tab

* Add CardView and Card
* Implement in Albums tab

A few rough edges and hard coded things but wanted an initial review.

[lp:~ahayzen/music-app/remix-add-card-view]

642. By Andrew Hayzen on 2014-09-28

* Cleanup old code

[Andrew Hayzen (ahayzen)]

I ran autopilot on a utopic VM against #642 and it passed.

$ autopilot3 run music_app
Loading tests from: /home/andy/Workspace/sdk/remix-add-card-view/tests/autopilot

Tests running...
<class 'Xlib.protocol.request.QueryExtension'>

Ran 18 tests in 289.682s
OK

[lp:~ahayzen/music-app/remix-add-card-view]

643. By Andrew Hayzen on 2014-09-28

* Remove unused imports

644. By Andrew Hayzen on 2014-09-28

* Further tidying

645. By Andrew Hayzen on 2014-09-28

* Tweak overlay opacity

[Victor Thompson (vthompson)]

Per the design spec, please 1) add more spacing before the album name and after the artist name, 2) verify that design agrees with the font sizes (look a little big), and 3) we need to verify if the card view is to be used for an Albums view.

review: Needs Fixing

[lp:~ahayzen/music-app/remix-add-card-view]

646. By Andrew Hayzen on 2014-09-30

* Change spacing for labels
* Change font sizes

647. By Andrew Hayzen on 2014-09-30

* Merge of /remix

[Andrew Hayzen (ahayzen)]

OK so I have fixed the label issues, verified the font size with design and also discussed the pages that will use CardView.

<ahayzen> jounih, for the Albums tab are we expecting to use the cardview?
<jounih> ahayzen: I think we could use the cardview for everything for now. Maybe some of the views would work better as a listview but we can start off with cards for everything
<jounih> what do you think?
<ahayzen> jounih, my understanding was the 'start' page would be cardview... the albums would be cards.... the artists and songs tabs make sense to be a list i think...and the playlists is up for debate
<jounih> ahayzen: playlists definitely cards - albums and playlists are very similar. OK to use listview for artists and songs - i’ll need to provide a design for that, i’ll do it now
<ahayzen> jounih, yep agreed thanks :)

After discussions with nik he recommended to use the Flow {} component to do the staggered grid, so I am going to investigate that and therefore blocking myself for this mp until a decision is made there.

review: Needs Fixing

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:647
http://91.189.93.70:8080/job/music-app-remix-ci/4/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/616
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/616/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/4

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

review: Approve (continuous-integration)

[lp:~ahayzen/music-app/remix-add-card-view]

648. By Andrew Hayzen on 2014-10-01

* Move to using Flow {}

649. By Andrew Hayzen on 2014-10-05

* Move to ColumnFlow {}

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:649
http://91.189.93.70:8080/job/music-app-remix-ci/28/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/702
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/702/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/28

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

review: Approve (continuous-integration)

[Andrew Hayzen (ahayzen)]

Unblocking myself as we have now moved to ColumnFlow {}, please rereview.

review: Abstain

[lp:~ahayzen/music-app/remix-add-card-view]

650. By Andrew Hayzen on 2014-10-05

* Merge of trunk

651. By Andrew Hayzen on 2014-10-05

* Add upstream location

652. By Andrew Hayzen on 2014-10-05

* Merge of trunk

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:650
http://91.189.93.70:8080/job/music-app-remix-ci/30/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/708
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/708/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/30

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

review: Approve (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:652
http://91.189.93.70:8080/job/music-app-remix-ci/31/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/710
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/710/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/31

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

See 1 inline comment. Also, I had tried to implement search with this feature and It seems that sometimes the first column would not start at the very top when it reEval's the layout (http://i.imgur.com/f79dNCL.png). I don't think this is critical to fix, but it might be worth looking into later.

review: Needs Information

[lp:~ahayzen/music-app/remix-add-card-view]

653. By Andrew Hayzen on 2014-10-06

* Fix so that when items are removed from the model there are no gaps

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:653
http://91.189.93.70:8080/job/music-app-remix-ci/42/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/732
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/732/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/42

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

LGTM! This is a very welcomed improvement!

review: Approve

=== modified file 'MusicAlbums.qml'
--- MusicAlbums.qml	2014-09-20 15:41:33 +0000
+++ MusicAlbums.qml	2014-10-06 19:09:48 +0000
@@ -19,37 +19,17 @@
 
 import QtQuick 2.3
 import Ubuntu.Components 1.1
-import Ubuntu.Components.Popups 1.0
 import Ubuntu.MediaScanner 0.1
-import Ubuntu.Thumbnailer 0.1
-import QtMultimedia 5.0
-import QtQuick.LocalStorage 2.0
-import QtGraphicalEffects 1.0
-import "settings.js" as Settings
-import "playlists.js" as Playlists
 import "common"
 
+
 MusicPage {
-    id: mainpage
+    id: albumsPage
     objectName: "albumsPage"
     title: i18n.tr("Albums")
 
-    // TODO: This ListView is empty and causes the header to get painted with the desired background color because the
-    //       page is now vertically flickable.
-    ListView {
-        anchors.fill: parent
-        anchors.bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight
-    }
-
-    GridView {
-        id: albumlist
-        anchors.fill: parent
-        anchors.leftMargin: units.gu(1)
-        anchors.top: parent.top
-        anchors.topMargin: mainView.header.height + units.gu(1)
-        anchors.bottomMargin: units.gu(1)
-        cellHeight: height/3
-        cellWidth: height/3
+    CardView {
+        id: albumCardView
         model: SortFilterModel {
             id: albumsModelFilter
             property alias rowCount: albumsModel.rowCount
@@ -60,106 +40,24 @@
             sort.property: "title"
             sort.order: Qt.AscendingOrder
         }
-
-        delegate: albumDelegate
-        flow: GridView.TopToBottom
-
-        Component {
-            id: albumDelegate
-            Item {
-                property string artist: model.artist
-                property string album: model.title
-                property var covers: [{art: model.art}]
-
-                id: albumItem
-                height: albumlist.cellHeight - units.gu(1)
-                objectName: "albumsPageGridItem" + index
-                width: albumlist.cellHeight - units.gu(1)
-                anchors.margins: units.gu(1)
-
-                CoverRow {
-                    id: albumShape
-                    anchors {
-                        top: parent.top
-                        left: parent.left
-                        verticalCenter: parent.verticalCenter
-                    }
-                    count: albumItem.covers.length
-                    size: albumItem.width
-                    covers: albumItem.covers
-                    spacing: units.gu(2)
-                }
-                Item {  // Background so can see text in current state
-                    id: albumBg
-                    anchors {
-                        bottom: parent.bottom
-                        left: parent.left
-                        right: parent.right
-                    }
-                    height: units.gu(6)
-                    clip: true
-                    UbuntuShape{
-                        anchors {
-                            bottom: parent.bottom
-                            left: parent.left
-                            right: parent.right
-                        }
-                        height: albumShape.height
-                        radius: "medium"
-                        color: styleMusic.common.black
-                        opacity: 0.6
-                    }
-                }
-                Label {
-                    id: albumArtist
-                    objectName: "albums-albumartist"
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: units.gu(1)
-                    anchors.left: parent.left
-                    anchors.leftMargin: units.gu(1)
-                    anchors.right: parent.right
-                    anchors.rightMargin: units.gu(1)
-                    color: styleMusic.common.white
-                    elide: Text.ElideRight
-                    text: model.artist
-                    fontSize: "x-small"
-                }
-                Label {
-                    id: albumLabel
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: units.gu(3)
-                    anchors.left: parent.left
-                    anchors.leftMargin: units.gu(1)
-                    anchors.right: parent.right
-                    anchors.rightMargin: units.gu(1)
-                    color: styleMusic.common.white
-                    elide: Text.ElideRight
-                    text: model.title
-                    fontSize: "small"
-                    font.weight: Font.DemiBold
-                }
-
-
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        songsPage.album = model.title;
-                        songsPage.covers = [{art: model.art}]
-                        songsPage.genre = undefined
-                        songsPage.isAlbum = true
-                        songsPage.line1 = model.artist
-                        songsPage.line2 = model.title
-                        songsPage.title = i18n.tr("Album")
-
-                        mainPageStack.push(songsPage)
-                    }
-
-                    // TODO: If http://pad.lv/1354753 is fixed to expose whether the Shape should appear pressed, update this as well.
-                    onPressedChanged: albumShape.pressed = pressed
-                }
+        delegate: Card {
+            id: albumCard
+            imageSource: model.art
+            objectName: "albumsPageGridItem" + index
+            primaryText: model.title
+            secondaryText: model.artist
+
+            onClicked: {
+                songsPage.album = model.title;
+                songsPage.covers = [{art: model.art}]
+                songsPage.genre = undefined
+                songsPage.isAlbum = true
+                songsPage.line1 = model.artist
+                songsPage.line2 = model.title
+                songsPage.title = i18n.tr("Album")
+
+                mainPageStack.push(songsPage)
             }
         }
     }
 }
-
-

=== added file 'common/Card.qml'
--- common/Card.qml	1970-01-01 00:00:00 +0000
+++ common/Card.qml	2014-10-06 19:09:48 +0000
@@ -0,0 +1,157 @@
+/*
+ * Copyright (C) 2014
+ *      Andrew Hayzen <[e-mail]>
+ *
+ * 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.3
+import Ubuntu.Components 1.1
+
+
+Rectangle {
+    id: card
+    color: "transparent"
+    height: cardColumn.childrenRect.height + 2 * bg.anchors.margins
+
+    property alias imageSource: image.source
+    property alias primaryText: primaryLabel.text
+    property alias secondaryText: secondaryLabel.text
+
+    signal clicked(var mouse)
+    signal pressAndHold(var mouse)
+
+    /* Animations */
+    Behavior on height {
+        UbuntuNumberAnimation {
+
+        }
+    }
+
+    Behavior on width {
+        UbuntuNumberAnimation {
+
+        }
+    }
+
+    Behavior on x {
+        UbuntuNumberAnimation {
+
+        }
+    }
+
+    Behavior on y {
+        UbuntuNumberAnimation {
+
+        }
+    }
+
+    /* Background for card */
+    Rectangle {
+        id: bg
+        anchors {
+            fill: parent
+            margins: units.gu(1)
+        }
+        color: "#2c2c34"
+    }
+
+    /* Column containing image and labels */
+    Column {
+        id: cardColumn
+        anchors {
+            fill: bg
+        }
+        spacing: units.gu(0.5)
+
+        Image {
+            id: image
+            height: parent.width
+            width: parent.width
+
+            onStatusChanged: {
+                if (status === Image.Error) {
+                    source = Qt.resolvedUrl("../images/[e-mail]")
+                }
+            }
+        }
+
+        Rectangle {
+            color: "transparent"
+            height: units.gu(1)
+            width: units.gu(1)
+        }
+
+        Label {
+            id: primaryLabel
+            anchors {
+                left: parent.left
+                leftMargin: units.gu(1)
+                right: parent.right
+                rightMargin: units.gu(1)
+            }
+            color: "#FFF"
+            elide: Text.ElideRight
+            fontSize: "small"
+            opacity: 1.0
+            wrapMode: Text.WordWrap
+        }
+
+        Label {
+            id: secondaryLabel
+            anchors {
+                left: parent.left
+                leftMargin: units.gu(1)
+                right: parent.right
+                rightMargin: units.gu(1)
+            }
+            color: "#FFF"
+            elide: Text.ElideRight
+            fontSize: "small"
+            opacity: 0.4
+            wrapMode: Text.WordWrap
+        }
+
+        Rectangle {
+            color: "transparent"
+            height: units.gu(1.5)
+            width: units.gu(1)
+        }
+    }
+
+    /* Overlay for when card is pressed */
+    Rectangle {
+        id: overlay
+        anchors {
+            fill: bg
+        }
+        color: "#000"
+        opacity: 0
+
+        Behavior on opacity {
+            UbuntuNumberAnimation {
+
+            }
+        }
+    }
+
+    /* Capture mouse events */
+    MouseArea {
+        anchors {
+            fill: parent
+        }
+        onClicked: card.clicked(mouse)
+        onPressAndHold: card.pressAndHold(mouse)
+        onPressedChanged: overlay.opacity = pressed ? 0.3 : 0
+    }
+}

=== added file 'common/CardView.qml'
--- common/CardView.qml	1970-01-01 00:00:00 +0000
+++ common/CardView.qml	2014-10-06 19:09:48 +0000
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2014
+ *      Andrew Hayzen <[e-mail]>
+ *
+ * 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.3
+import Ubuntu.Components 1.1
+
+
+Flickable {
+    anchors {
+        fill: parent
+        margins: units.gu(1)
+    }
+
+    // dont use flow.contentHeight as it is inaccurate due to height of labels
+    // changing as they load
+    contentHeight: flow.childrenRect.height
+    contentWidth: width
+
+    property alias delegate: flow.delegate
+    property alias model: flow.model
+
+    ColumnFlow {
+        id: flow
+        columns: parseInt(width / units.gu(15))
+        width: parent.width
+    }
+}

=== added file 'common/ColumnFlow.qml'
--- common/ColumnFlow.qml	1970-01-01 00:00:00 +0000
+++ common/ColumnFlow.qml	2014-10-06 19:09:48 +0000
@@ -0,0 +1,159 @@
+/*
+ * Copyright (C) 2014
+ *      Andrew Hayzen <[e-mail]>
+ *      Michael Spencer <[e-mail]>
+ *
+ * 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/>.
+ *
+ * Upstream location:
+ * https://github.com/iBeliever/ubuntu-ui-extras/blob/master/ColumnFlow.qml
+ */
+
+import QtQuick 2.3
+
+
+Item {
+    id: columnFlow
+    property int columns: 1
+    property bool repeaterCompleted: false
+    property alias model: repeater.model
+    property alias delegate: repeater.delegate
+    property int contentHeight: 0
+
+    onColumnsChanged: reEvalColumns()
+    onModelChanged: reEvalColumns()
+    onWidthChanged: updateWidths()
+
+    function updateWidths() {
+        if (repeaterCompleted) {
+            var count = 0
+
+            //add the first <column> elements
+            for (var i = 0; count < columns && i < columnFlow.children.length; i++) {
+                //print(i, count)
+                if (!columnFlow.children[i] || String(columnFlow.children[i]).indexOf("QQuickRepeater") == 0)
+                        //|| !columnFlow.children[i].visible)  // CUSTOM - view is invisible at start
+                    continue
+
+                columnFlow.children[i].width = width / columns
+
+                count++
+            }
+        }
+    }
+
+    function reEvalColumns() {
+        if (columnFlow.repeaterCompleted === false)
+            return
+
+        if (columns === 0) {
+            contentHeight = 0
+            return
+        }
+
+        var i, j
+        var columnHeights = new Array(columns);
+        var lastItem = new Array(columns)
+        var lastI = -1
+        var count = 0
+
+        //add the first <column> elements
+        for (i = 0; count < columns && i < columnFlow.children.length; i++) {
+            // CUSTOM - ignore if has just been removed
+            if (i === repeater.removeHintIndex && columnFlow.children[i] === repeater.removeHintItem) {
+                continue
+            }
+
+            if (!columnFlow.children[i] || String(columnFlow.children[i]).indexOf("QQuickRepeater") == 0)
+                    //|| !columnFlow.children[i].visible)  // CUSTOM - view is invisible at start
+                continue
+
+            lastItem[count] = i
+
+            columnHeights[count] = columnFlow.children[i].height
+            columnFlow.children[i].anchors.top = columnFlow.top
+            columnFlow.children[i].anchors.left = (lastI === -1 ? columnFlow.left : columnFlow.children[lastI].right)
+            columnFlow.children[i].anchors.right = undefined
+            columnFlow.children[i].width = columnFlow.width / columns
+
+            lastI = i
+            count++
+        }
+
+        //add the other elements
+        for (i = i; i < columnFlow.children.length; i++) {
+            var highestHeight = Number.MAX_VALUE
+            var newColumn = 0
+
+            // CUSTOM - ignore if has just been removed
+            if (i === repeater.removeHintIndex && columnFlow.children[i] === repeater.removeHintItem) {
+                continue
+            }
+
+            if (!columnFlow.children[i] || String(columnFlow.children[i]).indexOf("QQuickRepeater") == 0)
+                    //|| !columnFlow.children[i].visible)  // CUSTOM - view is invisible at start
+                continue
+
+            // find the shortest column
+            for (j = 0; j < columns; j++) {
+                if (columnHeights[j] !== null && columnHeights[j] < highestHeight) {
+                    newColumn = j
+                    highestHeight = columnHeights[j]
+                }
+            }
+
+            // add the element to the shortest column
+            columnFlow.children[i].anchors.top = columnFlow.children[lastItem[newColumn]].bottom
+            columnFlow.children[i].anchors.left = columnFlow.children[lastItem[newColumn]].left
+            columnFlow.children[i].anchors.right = columnFlow.children[lastItem[newColumn]].right
+
+            lastItem[newColumn] = i
+            columnHeights[newColumn] += columnFlow.children[i].height
+        }
+
+        var cHeight = 0
+
+        for (i = 0; i < columnHeights.length; i++) {
+            if (columnHeights[i])
+                cHeight = Math.max(cHeight, columnHeights[i])
+        }
+
+        contentHeight = cHeight
+        updateWidths()
+    }
+
+    Repeater {
+        id: repeater
+        model: columnFlow.model
+        Component.onCompleted: {
+            columnFlow.repeaterCompleted = true
+            columnFlow.reEvalColumns()
+        }
+
+        // Provide a hint of the removed item
+        property int removeHintIndex: -1  // CUSTOM
+        property var removeHintItem  // CUSTOM
+
+        onItemAdded: columnFlow.reEvalColumns()  // CUSTOM - ms2 models are live
+        onItemRemoved: {
+            removeHintIndex = index
+            removeHintItem = item
+
+            columnFlow.reEvalColumns()  // CUSTOM - ms2 models are live
+
+            // Set back to null to allow freeing of memory
+            removeHintIndex = -1
+            removeHintItem = undefined
+        }
+    }
+}