change artist selection to according to design mockup

data/qml/stations/CreateByArtist.qml

@@ -15,15 +15,39 @@ Item {
 
     Column {
         id: upperColumn
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: parent.height
-        width: defaultFontHeight * 30
-        anchors.bottomMargin: defaultFontHeight
+        anchors.fill: parent
+        anchors.margins: defaultFontHeight
         spacing: defaultFontHeight
 
         HeaderLabel {
             id: headerText
-            text: "Enter or pick an artist"
+            text: "Pick one of your top artists,"
+        }
+
+        Item {
+            height: parent.height - headerText.height*2 - artistInputField.height - parent.spacing * 3
+            width: parent.width
+            ArtistView {
+                id: artistView
+                height: parent.height
+                width: parent.width
+                model: artistChartsModel
+                clip: true
+                cellWidth: defaultFontHeight * 12
+                cellHeight: defaultFontHeight * 12
+                spacing: defaultFontHeight / 2
+
+                onItemClicked: {
+                    createStation(artistChartsModel.itemFromIndex(index).artistName);
+                }
+            }
+            ScrollBar {
+                listView: artistView
+            }
+        }
+
+        HeaderLabel {
+            text: "Or enter an artist name"
         }
 
         Row {
@@ -40,30 +64,10 @@ Item {
 
             PushButton {
                 id: createFromInputButton
-                text: "Go!"
+                text: "Create station"
                 enabled: artistInputField.text.length > 2
                 onClicked: createStation(artistInputField.text)
             }
         }
-
-        Item {
-            height: parent.height - headerText.height - artistInputField.height - parent.spacing * 3
-            width: parent.width
-            ArtistView {
-                id: artistView
-                height: parent.height
-                width: parent.width
-                model: artistChartsModel
-                clip: true
-                delegateHeight: defaultFontHeight * 6
-
-                onItemClicked: {
-                    createStation(artistChartsModel.itemFromIndex(index).artistName);
-                }
-            }
-            ScrollBar {
-                listView: artistView
-            }
-        }
     }
 }

data/qml/tomahawkimports/ArtistView.qml

@@ -1,16 +1,14 @@
 import QtQuick 1.1
 import tomahawk 1.0
 
-ListView {
+GridView {
     id: root
-
-    property int delegateHeight: defaultFontHeight * 3
-
     signal itemClicked(int index)
+    property int spacing
 
     delegate: Item {
-        width: parent.width
-        height: root.delegateHeight
+        width: root.cellWidth - root.spacing / 2
+        height: root.cellHeight - root.spacing / 2
 
         Rectangle {
             id: background
@@ -41,24 +39,13 @@ ListView {
             ]
         }
 
-        Row {
-            anchors.fill: parent
-            spacing: defaultFontHeight
-
-            CoverImage {
-                id: coverImage
-                height: parent.height
-                width: height
-                showLabels: false
-                artworkId: model.coverID
-            }
-            Text {
-                text: model.artistName
-                color: "white"
-                anchors.verticalCenter: parent.verticalCenter
-                width: parent.width - coverImage.width - parent.spacing
-                elide: Text.ElideRight
-            }
+        CoverImage {
+            id: coverImage
+            height: parent.height
+            width: height
+            showLabels: true
+            artworkId: model.coverID
+            artistName: model.artistName
         }
 
         MouseArea {