From 3f7f1df61f9f0a6ba545d6ed3ad12cf45d58728d Mon Sep 17 00:00:00 2001
From: Michael Zanetti <mzanetti@kde.org>
Date: Sun, 2 Dec 2012 21:32:12 +0100
Subject: [PATCH] increase delegate size and add hover effect

---
 data/qml/stations/CreateByArtist.qml    |  5 ++--
 data/qml/tomahawkimports/ArtistView.qml | 31 +++++++++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/data/qml/stations/CreateByArtist.qml b/data/qml/stations/CreateByArtist.qml
index 1457ab502..2631a02a4 100644
--- a/data/qml/stations/CreateByArtist.qml
+++ b/data/qml/stations/CreateByArtist.qml
@@ -32,7 +32,7 @@ Item {
         }
 
         Row {
-            width: defaultFontHeight * 15
+            width: defaultFontHeight * 30
             height: artistInputField.height
             spacing: defaultFontHeight
 
@@ -50,9 +50,10 @@ Item {
 
         ArtistView {
             height: parent.height - headerText.height - artistInputField.height
-            width: defaultFontHeight * 15
+            width: defaultFontHeight * 30
             model: artistChartsModel
             clip: true
+            delegateHeight: defaultFontHeight * 6
 
             onItemClicked: {
                 mainView.startStationFromArtist(artistChartsModel.itemFromIndex(index).artistName)
diff --git a/data/qml/tomahawkimports/ArtistView.qml b/data/qml/tomahawkimports/ArtistView.qml
index 1262cb937..a35c9b428 100644
--- a/data/qml/tomahawkimports/ArtistView.qml
+++ b/data/qml/tomahawkimports/ArtistView.qml
@@ -4,19 +4,41 @@ import tomahawk 1.0
 ListView {
     id: root
 
+    property int delegateHeight: defaultFontHeight * 3
+
     signal itemClicked(int index)
 
     delegate: Item {
         width: parent.width
-        height: defaultFontHeight * 3
+        height: root.delegateHeight
 
         Rectangle {
+            id: background
             anchors.fill: parent
             radius: defaultFontHeight / 2
+            opacity: 0.5
             gradient: Gradient {
                 GradientStop { position: 0.0; color: "#00FFFFFF" }
-                GradientStop { position: 1.0; color: "#55FFFFFF" }
+                GradientStop { position: 1.0; color: "#AAFFFFFF" }
             }
+
+            states: [
+                State {
+                    name: "hovered"; when: mouseArea.containsMouse
+                    PropertyChanges { target: background; opacity: 1 }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    from: "*"; to: "hovered"
+                    NumberAnimation { properties: "opacity"; duration: 100 }
+                },
+                Transition {
+                    from: "hovered"; to: "*"
+                    NumberAnimation { properties: "opacity"; duration: 600 }
+                }
+            ]
         }
 
         Row {
@@ -24,6 +46,7 @@ ListView {
             spacing: defaultFontHeight
 
             CoverImage {
+                id: coverImage
                 height: parent.height
                 width: height
                 showLabels: false
@@ -33,12 +56,16 @@ ListView {
                 text: model.artistName
                 color: "white"
                 anchors.verticalCenter: parent.verticalCenter
+                width: parent.width - coverImage.width - parent.spacing
+                elide: Text.ElideRight
             }
         }
 
         MouseArea {
+            id: mouseArea
             anchors.fill: parent
             onClicked: root.itemClicked(index)
+            hoverEnabled: true
         }
     }
 }