added a scrollbar

data/qml/stations/CreateByArtist.qml

@@ -15,7 +15,7 @@ Item {
 
     Column {
         id: upperColumn
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
         height: parent.height
         width: defaultFontHeight * 30
         anchors.bottomMargin: defaultFontHeight
@@ -48,6 +48,7 @@ Item {
         }
 
         ArtistView {
+            id: artistView
             height: parent.height - headerText.height - artistInputField.height - parent.spacing * 3
             width: parent.width
             model: artistChartsModel
@@ -58,5 +59,8 @@ Item {
                 createStation(artistChartsModel.itemFromIndex(index).artistName);
             }
         }
+        ScrollBar {
+            listView: artistView
+        }
     }
 }

data/qml/tomahawkimports/ScrollBar.qml

@@ -0,0 +1,66 @@
+import QtQuick 1.1
+
+Item {
+    id: scrollBar
+    width: defaultFontHeight / 2
+
+    // the ListView where to attach this scrollbar
+    property variant listView
+    // the orientation of the scrollbar
+    property variant orientation : Qt.Vertical
+
+    states: [
+        State {
+            name: "hidden"; when: !listView.moving
+            PropertyChanges { target: scrollBar; opacity: 0 }
+        },
+        State {
+            name: "visible"; when: listView.moving
+            PropertyChanges { target: scrollBar; opacity: 1 }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "hidden"
+            to: "visible"
+            NumberAnimation { properties: "opacity"; duration: 200 }
+        },
+        Transition {
+            from: "visible"
+            to: "hidden"
+            NumberAnimation { properties: "opacity"; duration: 2000 }
+        }
+    ]
+
+    anchors {
+        left: orientation == Qt.Vertical ? listView.right : listView.left
+        leftMargin: orientation == Qt.Vertical ? defaultFontHeight / 4 : 0
+        top: orientation == Qt.Vertical ? listView.top : listView.bottom
+        topMargin: orientation == Qt.Vertical ? 0 : defaultFontHeight / 4
+        bottom: orientation == Qt.Vertical ? listView.bottom : undefined
+        right: orientation == Qt.Vertical ? undefined : listView.right
+    }
+
+    // A light, semi-transparent background
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.2
+    }
+
+    // Size the bar to the required size, depending upon the orientation.
+    Rectangle {
+        property real position: orientation == Qt.Vertical ? (listView.contentY / listView.contentHeight) : (listView.contentX / listView.contentWidth)
+        property real pageSize: orientation == Qt.Vertical ? (listView.height / listView.contentHeight) : (listView.width / listView.contentWidth)
+
+        x: orientation == Qt.Vertical ? 1 : (position * (scrollBar.width-2) + 1)
+        y: orientation == Qt.Vertical ? (position * (scrollBar.height-2) + 1) : 1
+        width: orientation == Qt.Vertical ? (parent.width-2) : (pageSize * (scrollBar.width-2))
+        height: orientation == Qt.Vertical ? (pageSize * (scrollBar.height-2)) : (parent.height-2)
+        radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+        color: "white"
+        opacity: 0.2
+    }
+}

resources.qrc

@@ -181,5 +181,6 @@
         <file>data/qml/tomahawkimports/HeaderLabel.qml</file>
         <file>data/qml/stations/CreateByGenre.qml</file>
         <file>data/qml/tomahawkimports/TagCloud.qml</file>
+        <file>data/qml/tomahawkimports/ScrollBar.qml</file>
     </qresource>
 </RCC>