Merge lp:~danielholm/music-app/settings-sheet into lp:music-app/trusty

[Daniel Holm]

New settings and now use Sheets instead.

Based on UX spec, move settings to a Sheet and add some new stuff. Most of the new stuff is disabled for the moment, since they won't fit inside the sheet.

Shuffle should be moved to the new toolbar, and I'm awainting answer on a bug report regarding the Sheet's size, which can not fill parent right now.
https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1224428

Andrew, can you help me with the setting regarding the "Snap to current song"? I've saved it in the settings DB and need to use it.

Also we need to change the color of the sheet later, but since there should be a new Sheet that we should use in the future, I thought we could wait untill then.

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

PASSED: Continuous integration, rev:105
http://91.189.93.70:8080/job/music-app-ci/42/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/music-app-precise-amd64-ci/42
    SUCCESS: http://91.189.93.70:8080/job/music-app-quantal-amd64-ci/42
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/42
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/42

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

I think there are currently some readability issues (white text on grey background). Could you also make the sheet full sized like the spec?

[Daniel Holm (danielholm)]

I was going to look up how to change the color, since I dont know how. Regarding the full size, see the bug report above. Resize is not yet possible.

[Victor Thompson (vthompson)]

Daniel,

You should be able to do the following to get full sized Sheets. Please cancel the bug.

victor@bigdaddy:~/Development/settings-sheet$ bzr diff
=== modified file 'MusicSettings.qml'
--- MusicSettings.qml 2013-09-15 09:33:20 +0000
+++ MusicSettings.qml 2013-09-15 15:54:13 +0000
@@ -27,6 +27,8 @@
 ComposerSheet {
     id: musicSettings
     title: i18n.tr("Settings")
+ contentsHeight: parent.height
+ contentsWidth: parent.width

     onCancelClicked: PopupUtils.close(musicSettings)
     onConfirmClicked: {

[Victor Thompson (vthompson)]

I think the implementation of "snap to song" can wait for another branch--it might be tricky. BUT, if it's possible I would like you to change the colors such that they are readable.

[lp:~danielholm/music-app/settings-sheet]

106. By Daniel Holm on 2013-09-15

Changed text color in settings.

107. By Daniel Holm on 2013-09-15

Merge with trunk.

[Victor Thompson (vthompson)]

Actually, Daniel I think the font issue is an SDK bug. Filemanager filed a bug that was fixed for Popovers that used white text because of the darker Suru colors. It might be best to file a bug similar to the Popover bug: Bug #1205094.

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

PASSED: Continuous integration, rev:107
http://91.189.93.70:8080/job/music-app-ci/45/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/music-app-precise-amd64-ci/45
    SUCCESS: http://91.189.93.70:8080/job/music-app-quantal-amd64-ci/45
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/45
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/45

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

review: Approve (continuous-integration)

[Daniel Holm (danielholm)]

The text color is now changed to coolGrey. The bug I was talking about is that Sheets cant fill the window.

[Victor Thompson (vthompson)]

Did you see my other comment? The Sheet not filling the parent is not a bug, use contentsHeight and contentsWidth. The Sheet not using the proper text color IS an SDK bug. We *should* be diligent and file said bug.

[Daniel Holm (danielholm)]

What?! ahah, it works! Thanks, mate. That really drove me crazy. So that bug is wrong..

Sure, that bug should probalby be filed.

[lp:~danielholm/music-app/settings-sheet]

108. By Daniel Holm on 2013-09-15

Sheet now fills parent.

[Daniel Holm (danielholm)]

Now fills window. I'll report that bug. But I don't think we should wait until a fix is released.

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

PASSED: Continuous integration, rev:108
http://91.189.93.70:8080/job/music-app-ci/48/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/music-app-precise-amd64-ci/48
    SUCCESS: http://91.189.93.70:8080/job/music-app-quantal-amd64-ci/48
    SUCCESS: http://91.189.93.70:8080/job/music-app-raring-amd64-ci/48
    SUCCESS: http://91.189.93.70:8080/job/music-app-saucy-amd64-ci/48

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

review: Approve (continuous-integration)

[Victor Thompson (vthompson)]

Ok, feel free to top approve when you think this is ready. You might want to 1) work around the font colors for the remaining items on the sheet and 2) document the SDK bug you file in the code that works around the bug.

review: Approve

[Daniel Holm (danielholm)]

Lovely, thanks.

=== modified file 'LoginLastFM.qml'
--- LoginLastFM.qml	2013-07-28 22:18:52 +0000
+++ LoginLastFM.qml	2013-09-15 20:50:07 +0000
@@ -29,15 +29,22 @@
 import "scrobble.js" as Scrobble
 
 // LastFM login dialog
-Dialog {
+DefaultSheet {
     id: lastfmroot
     anchors.fill: parent
 
+    onDoneClicked: PopupUtils.close(lastfmroot)
+
     // Dialog data
     title: i18n.tr("LastFM")
-    text: i18n.tr("Login to be able to scrobble.")
-
-    Row {
+
+    Column {
+        spacing: units.gu(2)
+
+        Label {
+            text: i18n.tr("Login to be able to scrobble.")
+        }
+
         // Username field
         TextField {
                 id: usernameField
@@ -45,11 +52,9 @@
                 hasClearButton: true
                 placeholderText: i18n.tr("Username")
                 text: lastfmusername
-                width: units.gu(30)
+                width: units.gu(48)
         }
-    }
 
-    Row {
         // add password field
         TextField {
             id: passField
@@ -58,81 +63,32 @@
             placeholderText: i18n.tr("Password")
             text: lastfmpassword
             echoMode: TextInput.Password
-            width: units.gu(30)
+            width: units.gu(48)
         }
-    }
 
-    Row {
         // indicate progress of login
         ActivityIndicator {
             id: activity
+            visible: false
         }
 
         // item to present login result
         ListItem.Standard {
             id: loginstatetext
-        }
-
-        // Model to send the data
-        XmlListModel {
-            id: lastfmlogin
-            query: "/"
-
-            function rpcRequest(request,handler) {
-                console.debug("Debug: Starting to send user credentials")
-                var http = new XMLHttpRequest()
-
-                http.open("POST",Scrobble.scrobble_url,true)
-                http.setRequestHeader("User-Agent", "Music-App/"+appVersion)
-                http.setRequestHeader("Content-type", "text/xml")
-                http.setRequestHeader("Content-length", request.length)
-                http.setRequestHeader("Connection", "close")
-                http.onreadystatechange = function() {
-                    if(http.readyState == 4 && http.status == 200) {
-                        console.debug("Debug: XmlRpc::rpcRequest.onreadystatechange()")
-                        handler(http.responseText)
-                    }
-                }
-                http.send(request)
-            }
-
-            function callHandler(response) {
-                xml = response
-            }
-
-            function call(cmd,params) {
-                console.debug("Debug: XmlRpc.call(",cmd,params,")")
-                var request = ""
-                request += "<?xml version='1.0'?>"
-                request += "<methodCall>"
-                request += "<methodName>" + cmd + "</methodName>"
-                request += "<params>"
-                for (var i=0; i<params.length; i++) {
-                request += "<param><value>"
-                if (typeof(params[i])=="string") {
-                    request += "<string>" + params[i] + "</string>"
-                }
-                if (typeof(params[i])=="number") {
-                    request += "<int>" + params[i] + "</int>"
-                }
-                request += "</value></param>"
-                }
-                request += "</params>"
-                request += "</methodCall>"
-                rpcRequest(request,callHandler)
-            }
-        }
-    }
-
-    // Login button
-    Row {
+            visible: false
+        }
+
+        // Login button
         Button {
             id: loginButton
-            width: units.gu(30)
-            text: "Login"
-            color: "#c94212"
+            width: units.gu(48)
+            text: i18n.tr("Login")
+            enabled: false
+
             onClicked: {
+                activity.visible = true
                 activity.running = !activity.running // change the activity indicator state
+                loginstatetext.visible = true
                 loginstatetext.text = i18n.tr("Trying to login...")
                 Settings.initialize()
                 console.debug("Debug: Login to LastFM clicked.")
@@ -140,12 +96,23 @@
                 Settings.setSetting("lastfmusername", usernameField.text) // save lastfm username
                 Settings.setSetting("lastfmpassword", passField.text) // save lastfm password (should be passed by ha hash function)
                 lastfmusername = Settings.getSetting("lastfmusername") // get username again
-                lastfmpassword = Settings.getSetting("lastfmpassword") // get password again
+                lastfmpassword = Settings.getSetting("lastfmpassword") // get password again, for use during the rest of the session
                 if (usernameField.text.length > 0 && passField.text.length > 0) { // make sure something is acually inputed
-                    console.debug("Debug: Sending credentials to authentication function")
-                    var signature = Scrobble.authenticate(usernameField.text, passField.text); // pass the data to authenticate
-                    //lastfmlogin.model
-                    //lastfmlogin.construct()
+                    console.debug("Debug: Sending credentials to authentication function");
+                    var answer = Scrobble.authenticate(usernameField.text, passField.text) // pass credentials to login function
+
+                    // Print result to user
+                    if (answer == "ok") {
+                        loginstatetext.text = i18n.tr("Login Successful")
+                        activity.running = !activity.running // change the activity indicator state
+                        //loginButton.text = "Log out" // later
+                        Settings.setSetting("lastfmsessionkey",Scrobble.session_key)
+                    }
+                    else {
+                        loginstatetext.text = i18n.tr("Login Failed")
+                        activity.running = !activity.running // change the activity indicator state
+                    }
+
                 }
                 else {
                     loginstatetext.text = i18n.tr("You forgot to set your username and/or password")
@@ -153,19 +120,4 @@
             }
         }
     }
-
-    // cancel Button
-    Row {
-        Button {
-            id: cancelButton
-            width: units.gu(30)
-            text: i18n.tr("Close")
-            onClicked: {
-                PopupUtils.close(lastfmroot)
-            }
-        }
-    }
 }
-
-
-

=== modified file 'MusicAlbums.qml'
--- MusicAlbums.qml	2013-09-01 17:50:24 +0000
+++ MusicAlbums.qml	2013-09-15 20:50:07 +0000
@@ -31,6 +31,10 @@
     id: pageStack
     anchors.fill: parent
 
+    MusicSettings {
+        id: musicSettings
+    }
+
     Page {
         id: mainpage
         title: i18n.tr("Albums")

=== modified file 'MusicArtists.qml'
--- MusicArtists.qml	2013-09-01 17:50:24 +0000
+++ MusicArtists.qml	2013-09-15 20:50:07 +0000
@@ -31,6 +31,10 @@
     id: pageStack
     anchors.fill: parent
 
+    MusicSettings {
+        id: musicSettings
+    }
+
     Page {
         id: mainpage
         title: i18n.tr("Artists")

=== modified file 'MusicPlaylists.qml'
--- MusicPlaylists.qml	2013-09-02 21:39:46 +0000
+++ MusicPlaylists.qml	2013-09-15 20:50:07 +0000
@@ -165,6 +165,10 @@
         playlist.forEach(addtoPlaylistModel) // send each item on playlist array to the model to show it
     }
 
+    MusicSettings {
+        id: musicSettings
+    }
+
     // page for the playlists
     Page {
         id: listspage
@@ -247,7 +251,7 @@
                 text: i18n.tr("Settings")
 
                 onTriggered: {
-                    console.debug('Debug: Show settings')
+                    console.debug('Debug: Show settings from Playlists')
                     PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
                                     {
                                         title: i18n.tr("Settings")

=== modified file 'MusicSettings.qml'
--- MusicSettings.qml	2013-07-28 22:18:52 +0000
+++ MusicSettings.qml	2013-09-15 20:50:07 +0000
@@ -1,6 +1,7 @@
 /*
- * Copyright (C) 2013 Victor Thompson <[e-mail]>
+ * Copyright (C) 2013 Andrew Hayzen <[e-mail]>
  *                    Daniel Holm <[e-mail]>
+ *                    Victor Thompson <[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
@@ -22,133 +23,182 @@
 import QtQuick.LocalStorage 2.0
 import "settings.js" as Settings
 import "scrobble.js" as Scrobble
-import "playlists.js" as Playlists
-import "meta-database.js" as Library
-
-Dialog {
-    id: root
-
-//    Row {
-//        spacing: units.gu(2)
-//        Button {
-//            id: selectdirectory
-//            text: i18n.tr("Select Music folder")
-//            width: units.gu(30)
-//            color: "#c94212"
-//            onClicked: {
-//                folderScannerModel.nameFilters = [""]
-//                console.debug('Debug: Show settings')
-//                pageStack.push(Qt.resolvedUrl("LibraryLoader.qml"))
-//                PopupUtils.close(root)
-//            }
-//        }
-//    }
-
-    // Shuffle or not
-    Row {
-        spacing: units.gu(2)
-        Label {
-            text: i18n.tr("Shuffle")
-            width: units.gu(20)
-            color: "white"
-        }
-        Switch {
-            id: shuffleSwitch
-            checked: Settings.getSetting("shuffle") === "1"
-        }
-    }
-
-    // lastfm
-    Row {
-        spacing: units.gu(2)
-        Label {
-            text: i18n.tr("Scrobble to Last.FM")
-            width: units.gu(20)
-            color: "white"
-        }
-        Switch {
-            id: scrobbleSwitch
-            checked: Settings.getSetting("scrobble") === "1"
-        }
-    }
-
-    Row {
-        spacing: units.gu(2)
-        Button {
-            id: lastfmLogin
-            text: i18n.tr("Login to last.fm")
-            width: units.gu(30)
-            color: "#c94212"
-            enabled: Settings.getSetting("scrobble") === "1" // only if scrobble is activated.
+
+ComposerSheet {
+    id: musicSettings
+    title: i18n.tr("Settings")
+    contentsHeight: parent.height;
+
+    onCancelClicked: PopupUtils.close(musicSettings)
+    onConfirmClicked: {
+        PopupUtils.close(musicSettings)
+        console.debug("Debug: Save settings")
+        Settings.initialize()
+
+        // Equaliser
+        // ACTIVATE IN 1.+ Settings.setSetting("eqialiser",equaliser.index)
+
+        // snap track
+        Settings.setSetting("snaptrack",snapSwitch.checked)
+
+        // ACCOUNTS
+        // Last.fm
+
+        // MUSIC STREAMING
+        // Ubuntu one
+        /* READY THIS LATER IN 1.+
+        if (ubuntuaccount === activated) {
+            Settings.setSetting("wifiswitch",wifiSwitch.checked)
+        }*/
+
+
+        // MOVE TO TOOLBAR
+        Settings.setSetting("shuffle", shuffleSwitch.checked) // save shuffle state
+
+        // -- random = shuffleSwitch.checked // set shuffle state variable
+        //console.debug("Debug: Shuffle: "+ shuffleSwitch.checked)
+
+        // MOVE TO scrobble Settings.setSetting("scrobble", scrobbleSwitch.checked) // save shuffle state
+        //scrobble = scrobbleSwitch.checked // set scrobble state variable
+        //console.debug("Debug: Scrobble: "+ scrobbleSwitch.checked)
+    }
+
+    Column {
+        spacing: units.gu(2)
+
+        // Activate in 1.+
+        ListItem.ItemSelector {
+            id: equaliser
+            enabled: false
+            text: i18n.tr("Equaliser")
+            model: [i18n.tr("Accoustic"),
+                  i18n.tr("Classical"),
+                  i18n.tr("Electronic"),
+                  i18n.tr("Flat"),
+                  i18n.tr("Hip Hop"),
+                  i18n.tr("Jazz"),
+                  i18n.tr("Metal"),
+                  i18n.tr("Pop"),
+                  i18n.tr("Rock"),
+                  i18n.tr("Custom")]
+            onDelegateClicked: {
+                customdebug("Value changed to "+index)
+                //equaliserChange(index)
+            }
+        }
+
+        // Snap to current track
+        Row {
+            spacing: units.gu(2)
+            Label {
+                text: i18n.tr("Snap to current song \nwhen opening toolbar")
+                color: styleMusic.musicSettings.labelColor
+                width: units.gu(35)
+            }
+            Switch {
+                id: snapSwitch
+                checked: Settings.getSetting("snaptrack") === "1"
+            }
+        }
+
+        // Shuffle or not
+        // MOVE THIS TO NEW TOOLBAR
+        Row {
+            spacing: units.gu(2)
+            Label {
+                text: i18n.tr("Shuffle")
+                color: styleMusic.musicSettings.labelColor
+                width: units.gu(35)
+            }
+            Switch {
+                id: shuffleSwitch
+                checked: Settings.getSetting("shuffle") === "1"
+            }
+        }
+
+        // Accounts
+        Label {
+            text: i18n.tr("Accounts")
+            color: styleMusic.musicSettings.labelColor
+        }
+
+        // lastfm
+        ListItem.Subtitled {
+            id: lasftfmProg
+            text: i18n.tr("Last.fm")
+            subText: i18n.tr("Login to scrobble and \nimport playlists")
+            progression: true
+            enabled: false
             onClicked: {
                 PopupUtils.open(Qt.resolvedUrl("LoginLastFM.qml"), mainView,
                                 {
                                     title: i18n.tr("Last.fm")
                                 } )
-            }
-        }
-    }
-
-    // import playlists from lastfm
-    Row {
-        spacing: units.gu(2)
+                PopupUtils.close(musicSettings)
+            }
+        }
+
+        // Music Streaming
+        // Activate in 1.+
+        Label {
+            text: i18n.tr("Music Streaming")
+            color: styleMusic.musicSettings.labelColor
+        }
+
+        Column {
+            ListItem.Subtitled {
+                id: musicStreamProg
+                text: i18n.tr("Ubuntu One")
+                subText: i18n.tr("Sign in to stream your cloud music")
+                enabled: false
+                progression: true
+                onClicked: {
+                    customdebug("I'm Ron Burgendy...?")
+                }
+            }
+
+            Row {
+                spacing: units.gu(20)
+                Label {
+                    text: i18n.tr("Stream only on Wi-Fi")
+                    color: styleMusic.musicSettings.labelColor
+                    enabled: false // check if account is connected
+                }
+                Switch {
+                    id: wifiSwitch
+                    checked: Settings.getSetting("wifiswitch") === "1"
+                    enabled: false // check if account is connected
+                }
+            }
+        }
+
+        /* MOVE THIS STUFF
+        // import playlists from lastfm
+        Row {
+            spacing: units.gu(2)
+            Button {
+                id: lastfmPlaylists
+                text: i18n.tr("Import playlists from last.fm")
+                width: units.gu(30)
+                color: "#c94212"
+                enabled: Settings.getSetting("scrobble") === "1" // only if scrobble is activated.
+                onClicked: {
+                    console.debug("Debug: import playlists from last.fm")
+                    Scrobble.getPlaylists(Settings.getSetting("lastfmusername"))
+                }
+            }
+        } */
+
+        // developer button - KILLS YOUR CAT!
         Button {
-            id: lastfmPlaylists
-            text: i18n.tr("Import playlists from last.fm")
-            width: units.gu(30)
-            color: "#c94212"
-            enabled: Settings.getSetting("scrobble") === "1" // only if scrobble is activated.
+            text: i18n.tr("Clean everything!")
+            color: "red"
+            visible: false
             onClicked: {
-                console.debug("Debug: import playlists from last.fm")
-                Scrobble.getPlaylists(Settings.getSetting("lastfmusername"))
+                Settings.reset()
+                Library.reset()
+                Playlists.reset()
             }
         }
     }
-
-    // headphones
-    Row {
-        spacing: units.gu(2)
-        Label {
-            text: i18n.tr("Pause when when headphones are un-plugged.")
-            width: units.gu(20)
-            wrapMode: "WordWrap"
-            color: "white"
-        }
-        Switch {
-            checked: true
-            enabled: false
-        }
-    }
-
-    // developer button
-    /*Button {
-        text: i18n.tr("Clean everything!")
-        color: "red"
-        onClicked: {
-            Settings.reset()
-            Library.reset()
-            Playlists.reset()
-        }
-    }*/
-
-    Button {
-        text: i18n.tr("Close")
-        onClicked: {
-            PopupUtils.close(root)
-            console.debug("Debug: Close settings")
-            // push infront the tracks again
-            // set new music dir
-            Settings.initialize()
-            //Settings.setSetting("currentfolder", musicDirField.text) // save music dir
-            Settings.setSetting("shuffle", shuffleSwitch.checked) // save shuffle state
-            Settings.setSetting("scrobble", scrobbleSwitch.checked) // save shuffle state
-            random = shuffleSwitch.checked // set shuffle state variable
-            scrobble = scrobbleSwitch.checked // set scrobble state variable
-            // set function to set and load tracks in new map directly, whithout need of restart
-            // disable fpr now (testing) console.debug("Debug: Set new music dir to: "+musicDirField.text)
-            console.debug("Debug: Shuffle: "+ shuffleSwitch.checked)
-            console.debug("Debug: Scrobble: "+ scrobbleSwitch.checked)
-        }
-    }
-
 }

=== modified file 'MusicStart.qml'
--- MusicStart.qml	2013-08-30 17:21:05 +0000
+++ MusicStart.qml	2013-09-15 20:50:07 +0000
@@ -28,97 +28,104 @@
 import "meta-database.js" as Library
 import "playlists.js" as Playlists
 
-
-Page {
-    id: mainpage
-
-    tools: ToolbarItems {
-        // Settings dialog
-        ToolbarButton {
-            objectName: "settingsaction"
-            iconSource: Qt.resolvedUrl("images/settings.png")
-            text: i18n.tr("Settings")
-
-            onTriggered: {
-                console.debug('Debug: Show settings')
-                PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
-                                {
-                                    title: i18n.tr("Settings")
-                                } )
-            }
-        }
-    }
-
-    title: i18n.tr("Music")
-
-    ListItem.Standard {
-        id: recentlyPlayed
-        text: "Recently Played"
-    }
-
-    ListView {
-        id: recentlist
-        width: parent.width
-        anchors.top: recentlyPlayed.bottom
-        //anchors.bottom: genres.top
-        spacing: units.gu(2)
-        height: units.gu(13)
-        // TODO: Update when view counts are collected
-        model: albumModel.model
-        delegate: recentDelegate
-        orientation: ListView.Horizontal
-
-        Component {
-            id: recentDelegate
-            Item {
-                id: recentItem
-                height: units.gu(13)
-                width: units.gu(13)
-                UbuntuShape {
-                    id: recentShape
-                    height: recentItem.width
-                    width: recentItem.width
-                    image: Image {
-                        id: icon
-                        fillMode: Image.Stretch
-                        property string artist: model.artist
-                        property string album: model.album
-                        property string title: model.title
-                        property string cover: model.cover
-                        property string length: model.length
-                        property string file: model.file
-                        property string year: model.year
-                        source: cover === "" ? Qt.resolvedUrl("images/cover_default.png") : "image://cover-art-full/"+file
-                    }
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        recentAlbumTracksModel.filterAlbumTracks(album)
-                        trackQueue.model.clear()
-                        addQueueFromModel(recentAlbumTracksModel)
-                        currentModel = recentAlbumTracksModel
-                        currentQuery = recentAlbumTracksModel.query
-                        currentParam = recentAlbumTracksModel.param
-                        var file = trackQueue.model.get(0).file
-                        currentIndex = trackQueue.indexOf(file)
-                        queueChanged = true
-                        player.stop()
-                        player.source = Qt.resolvedUrl(file)
-                        player.play()
-                        nowPlaying.visible = true
-                    }
-                }
-            }
-        }
-    }
-
-    ListItem.Standard {
-        id: genres
-        anchors.top: recentlist.bottom
-        text: "Genres"
-    }
-
-    // TODO: add music genres. frequency of play? most tracks?
-
+PageStack {
+    id: pageStack
+
+    MusicSettings {
+        id: musicSettings
+    }
+
+    Page {
+        id: mainpage
+
+        tools: ToolbarItems {
+            // Settings dialog
+            ToolbarButton {
+                objectName: "settingsaction"
+                iconSource: Qt.resolvedUrl("images/settings.png")
+                text: i18n.tr("Settings")
+
+                onTriggered: {
+                    console.debug('Debug: Show settings from start page')
+                    PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
+                                    {
+                                        title: i18n.tr("Settings")
+                                    } )
+                }
+            }
+        }
+
+        title: i18n.tr("Music")
+
+        ListItem.Standard {
+            id: recentlyPlayed
+            text: "Recently Played"
+        }
+
+        ListView {
+            id: recentlist
+            width: parent.width
+            anchors.top: recentlyPlayed.bottom
+            //anchors.bottom: genres.top
+            spacing: units.gu(2)
+            height: units.gu(13)
+            // TODO: Update when view counts are collected
+            model: albumModel.model
+            delegate: recentDelegate
+            orientation: ListView.Horizontal
+
+            Component {
+                id: recentDelegate
+                Item {
+                    id: recentItem
+                    height: units.gu(13)
+                    width: units.gu(13)
+                    UbuntuShape {
+                        id: recentShape
+                        height: recentItem.width
+                        width: recentItem.width
+                        image: Image {
+                            id: icon
+                            fillMode: Image.Stretch
+                            property string artist: model.artist
+                            property string album: model.album
+                            property string title: model.title
+                            property string cover: model.cover
+                            property string length: model.length
+                            property string file: model.file
+                            property string year: model.year
+                            source: cover === "" ? Qt.resolvedUrl("images/cover_default.png") : "image://cover-art-full/"+file
+                        }
+                    }
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            recentAlbumTracksModel.filterAlbumTracks(album)
+                            trackQueue.model.clear()
+                            addQueueFromModel(recentAlbumTracksModel)
+                            currentModel = recentAlbumTracksModel
+                            currentQuery = recentAlbumTracksModel.query
+                            currentParam = recentAlbumTracksModel.param
+                            var file = trackQueue.model.get(0).file
+                            currentIndex = trackQueue.indexOf(file)
+                            queueChanged = true
+                            player.stop()
+                            player.source = Qt.resolvedUrl(file)
+                            player.play()
+                            nowPlaying.visible = true
+                        }
+                    }
+                }
+            }
+        }
+
+        ListItem.Standard {
+            id: genres
+            anchors.top: recentlist.bottom
+            text: "Genres"
+        }
+
+        // TODO: add music genres. frequency of play? most tracks?
+
+    }
 }

=== modified file 'MusicTracks.qml'
--- MusicTracks.qml	2013-09-11 12:22:52 +0000
+++ MusicTracks.qml	2013-09-15 20:50:07 +0000
@@ -32,6 +32,10 @@
     id: pageStack
     anchors.fill: parent
 
+    MusicSettings {
+        id: musicSettings
+    }
+
     Page {
         id: mainpage
 
@@ -43,7 +47,7 @@
                 text: i18n.tr("Settings")
 
                 onTriggered: {
-                    console.debug('Debug: Show settings')
+                    console.debug('Debug: Show settings from tracks')
                     PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
                                     {
                                         title: i18n.tr("Settings")

=== modified file 'Style.qml'
--- Style.qml	2013-09-02 22:53:45 +0000
+++ Style.qml	2013-09-15 20:50:07 +0000
@@ -73,4 +73,8 @@
         property color progressForegroundColor: UbuntuColors.orange;
         property color progressHandleColor: common.white;
     }
+
+    property QtObject musicSettings: QtObject {
+        property color labelColor: UbuntuColors.coolGrey;
+    }
 }

=== modified file 'music-app.qml'
--- music-app.qml	2013-09-11 23:35:44 +0000
+++ music-app.qml	2013-09-15 20:50:07 +0000
@@ -1,6 +1,7 @@
 /*
- * Copyright (C) 2013 Victor Thompson <[e-mail]>
+ * Copyright (C) 2013 Andrew Hayzen <[e-mail]>
  *                    Daniel Holm <[e-mail]>
+ *                    Victor Thompson <[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
@@ -74,10 +75,7 @@
         keywords: i18n.tr("Music Settings")
         onTriggered: {
             customdebug('Show settings')
-            PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
-                            {
-                                title: i18n.tr("Settings")
-                            } )
+            musicSettings.visible = true
         }
     }
     Action {
@@ -1026,7 +1024,6 @@
     MusicaddtoPlaylist {
         id: addtoPlaylist
     }
-
     // Converts an duration in ms to a formated string ("minutes:seconds")
     function __durationToString(duration) {
         var minutes = Math.floor((duration/1000) / 60);