added a completion list to InputField, use it for all genres input field

data/qml/stations/CreateByGenre.qml

@@ -53,10 +53,12 @@ Item {
             height: parent.height * 0.2
             spacing: defaultFontHeight * 0.5
             anchors.horizontalCenter: parent.horizontalCenter
+            z: 2
 
             InputField {
                 id: genreInputField
                 width: parent.width - createFromInputButton.width - parent.spacing
+                completionModel: allGenres
 
                 onAccepted: createStation(text);
             }
@@ -81,7 +83,7 @@ Item {
             TagCloud {
                 anchors.fill: parent
                 anchors.margins: parent.width / 6
-                model: styleModel
+                model: allGenres
 
                 onTagClicked: {
                     root.createStation(tag);

data/qml/tomahawkimports/InputField.qml

@@ -13,6 +13,7 @@ Rectangle {
     property bool showSearchIcon: false
     property string text: ""
     property string placeholderText: ""
+    property variant completionModel
 
     property int spacing: defaultFontHeight * 0.2
     signal accepted( string text )
@@ -54,7 +55,15 @@ Rectangle {
             font.pointSize: defaultFontSize
 
             onAccepted: root.accepted( text );
-            onTextChanged: root.text = text;
+            onTextChanged: {
+                root.text = text;
+                realCompletionListModel.clear();
+                for (var i in completionModel) {
+                    if (completionModel[i].indexOf(text) == 0) {
+                        realCompletionListModel.append({modelData: completionModel[i]})
+                    }
+                }
+            }
         }
         Text {
             width: parent.width
@@ -91,4 +100,63 @@ Rectangle {
         anchors.margins: root.radius * 0.1
         clip: true
     }
+
+    Rectangle {
+        anchors {
+            top: parent.bottom
+            left: parent.left
+            right: parent.right
+        }
+        height: Math.min(completionListView.count, 10) * completionListView.delegateHeight
+        color: "white"
+        ListView {
+            id: completionListView
+            anchors.fill: parent
+            anchors.rightMargin: scrollBar.width + scrollBar.margin
+            clip: true
+            model: ListModel {
+                id: realCompletionListModel
+            }
+
+            property int delegateHeight: defaultFontHeight * 1.25
+            delegate: Rectangle {
+                height: completionListView.delegateHeight
+                color: delegateMouseArea.containsMouse ? "lightblue" : "transparent"
+                width: parent.width
+                Text {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                        margins: defaultFontHeight / 4
+                    }
+                    text: modelData
+                }
+                MouseArea {
+                    id: delegateMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: {
+                        textInput.text = modelData
+                        realCompletionListModel.clear();
+                    }
+                }
+            }
+        }
+        ScrollBar {
+            id: scrollBar
+            listView: completionListView
+            color: "black"
+            margin: 0
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        anchors.margins: -99999999
+        z: -1
+        enabled: completionListView.count > 0
+        onClicked: {
+            realCompletionListModel.clear();
+        }
+    }
 }

data/qml/tomahawkimports/ScrollBar.qml

@@ -11,6 +11,8 @@ Item {
 
     property int margin: defaultFontHeight * 0.25
 
+    property color color: "white"
+
     states: [
         State {
             name: "hidden"; when: !listView.moving
@@ -48,7 +50,7 @@ Item {
         id: background
         anchors.fill: parent
         radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
-        color: "white"
+        color: scrollBar.color
         opacity: 0.2
         clip: true
         // Size the bar to the required size, depending upon the orientation.
@@ -61,7 +63,7 @@ Item {
             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"
+            color: scrollBar.color
             opacity: 1
         }
     }

src/libtomahawk/playlist/dynamic/widgets/DynamicQmlWidget.cpp

@@ -15,6 +15,7 @@
 #include "widgets/DeclarativeCoverArtProvider.h"
 #include "utils/TomahawkUtilsGui.h"
 #include "utils/Logger.h"
+#include "utils/TomahawkCache.h"
 
 #include <QUrl>
 #include <QSize>
@@ -61,6 +62,8 @@ DynamicQmlWidget::DynamicQmlWidget( const dynplaylist_ptr& playlist, QWidget* pa
     } else {
         // TODO: only load if needed, i.e. the user clicks on start station by artist
         loadArtistCharts();
+
+        rootContext()->setContextProperty("allGenres", TomahawkUtils::Cache::instance()->getData( "EchonesGenerator", "genres"));
     }
 }