split the station creation into two steps

data/qml/StationCreator.qml

@@ -4,42 +4,81 @@ import "tomahawkimports"
 
 Item {
     id: stationCreator
+    state: "artist"
 
-    property int spacing: width  * .05
+    property int spacing: width / 10
 
-    Flickable {
+    signal back()
-        id: flickArea
+    signal next()
-        width: parent.width - stationCreator.spacing
-        anchors.fill: parent
-        anchors.margins: stationCreator.spacing
-        contentHeight: stationCreator.height
-        contentWidth: width
-        clip: true
-        interactive: false
 
-        Behavior on contentY {
+    Loader {
-            NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
+        id: loader
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: previousButton.top
+            margins: parent.spacing
+        }
+    }
+
+    RoundedButton {
+        id: previousButton
+        text: "<"
+        height: spacing
+        width: height
+        anchors {
+            left: parent.left
+            bottom: parent.bottom;
+            margins: stationCreator.spacing
+        }
+        onClicked: stationCreator.back()
+    }
+
+    RoundedButton {
+        id: nextButton
+        text: ">"
+        height: spacing
+        width: height
+        anchors {
+            right: parent.right
+            bottom: parent.bottom
+            margins: stationCreator.spacing
+        }
+        onClicked: {
+            loader.item.createStation()
+            stationCreator.next()
+        }
+    }
+
+    states: [
+        State {
+            name: "artist"
+            PropertyChanges { target: loader; sourceComponent: createByArtist }
+        },
+        State {
+            name: "genre"
+            PropertyChanges { target: loader; sourceComponent: createByGenre }
+        },
+        State {
+            name: "year"
+            PropertyChanges { target: loader; sourceComponent: createByYear }
         }
 
-        function moveDown() {
+    ]
-            contentY = contentY + mainGrid.rowHeight + mainGrid.spacing
-        }
 
-        function moveUp() {
+    Component {
-            contentY = contentY - mainGrid.rowHeight - mainGrid.spacing
+        id: createByArtist
-        }
 
-        Grid {
+        Row {
-            id: mainGrid
+            function createStation() {
-            width: parent.width
+                rootView.startStationFromArtist(artistInputField.text)
+            }
+
+            anchors.fill: parent
             spacing: stationCreator.spacing
-            columns: 2
-            height: rowHeight * 3 + spacing * 2
-
-            property int rowHeight: flickArea.height / 2
-
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.7
                 Text {
                     id: artistGridLabel
@@ -68,14 +107,15 @@ Item {
 
                             onClicked: {
                                 rootView.startStationFromArtist(modelData);
-                                stationListView.incrementCurrentIndex();
+                                stationCreator.next()
                             }
                         }
                     }
                 }
+
             }
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.25
                 Text {
                     id: orText
@@ -92,23 +132,26 @@ Item {
                     width: parent.width
                     onAccepted: {
                         rootView.startStationFromArtist(text)
-                        stationListView.incrementCurrentIndex();
+                        stationCreator.next()
                     }
                 }
 
-                RoundedButton {
+            }
-                    text: ">"
+        }
-                    height: orText.height * 3
+    }
-                    width: height
-                    anchors { horizontalCenter: artistInputField.horizontalCenter
-                        top: artistInputField.bottom; topMargin: orText.height }
-                    onClicked: artistInputField.accepted(artistInputField.text)
-                }
 
+
+    Component {
+        id: createByGenre
+        Row {
+            function createStation() {
+                rootView.startStationFromGenre(genreInputField.text)
             }
 
+            anchors.fill: parent
+            spacing: stationCreator.spacing
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.7
                 Text {
                     id: selectGenreText
@@ -125,7 +168,7 @@ Item {
 
                     onTagClicked: {
                         rootView.startStationFromGenre(item)
-                        stationListView.incrementCurrentIndex();
+                        stationCreator.next()
                     }
 
                     Behavior on opacity {
@@ -134,9 +177,10 @@ Item {
                 }
             }
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.25
                 Text {
+                    id: orText
                     text: "...or enter your style:"
                     color: "white"
                     anchors { left: parent.left; right: parent.right;
@@ -149,33 +193,21 @@ Item {
                     width: parent.width
                     onAccepted: {
                         rootView.startStationFromGenre(text)
-                        stationListView.incrementCurrentIndex();
+                        stationCreator.next()
                     }
                 }
 
-                RoundedButton {
-                    text: ">"
-                    height: orText.height * 3
-                    width: height
-                    anchors { horizontalCenter: genreInputField.horizontalCenter
-                        top: genreInputField.bottom; topMargin: orText.height }
-                    onClicked: genreInputField.accepted(genreInputField.text)
-                }
-
             }
+        }
+    }
+    Component {
+        id: createByYear
 
-
+        Row {
-
+            anchors.fill: parent
-
-
-
-
-
-
-
 
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.7
                 Text {
                     id: selectYearText
@@ -193,7 +225,7 @@ Item {
 
                     function decadeClicked(decade) {
                         rootView.startStationFromYear(decade)
-                        stationListView.incrementCurrentIndex();
+                        stationCreator.next()
                     }
 
                     Text { text: "60s"; font.pointSize: 20; color: "white"; MouseArea{ anchors.fill: parent; onClicked: yearsRow.decadeClicked(parent.text)}}
@@ -204,9 +236,10 @@ Item {
                 }
             }
             Item {
-                height: parent.rowHeight
+                height: parent.height
                 width: parent.width * 0.25
                 Text {
+                    id: orText
                     text: "...or specify a year:"
                     color: "white"
                     anchors { left: parent.left; right: parent.right;
@@ -219,51 +252,10 @@ Item {
                     width: parent.width
                     onAccepted: {
                         rootView.startStationFromYear(text)
-                        stationListView.incrementCurrentIndex();
+                        stationCreator.next()
                     }
                 }
-
-                RoundedButton {
-                    text: ">"
-                    height: orText.height * 3
-                    width: height
-                    anchors { horizontalCenter: yearInputField.horizontalCenter
-                        top: yearInputField.bottom; topMargin: orText.height }
-                    onClicked: yearInputField.accepted(yearInputField.text)
-                }
-
             }
-
-        }
-    }
-
-
-    RoundedButton {
-        anchors {
-            top: parent.top
-            horizontalCenter: parent.horizontalCenter
-        }
-        height: orText.height * 3
-        width: height * 3
-        text: "^"
-        onClicked: flickArea.moveUp()
-        opacity: flickArea.contentY > 0 ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation { duration: 200 }
-        }
-    }
-    RoundedButton {
-        anchors {
-            bottom: parent.bottom
-            horizontalCenter: parent.horizontalCenter
-        }
-        height: orText.height * 3
-        width: height * 3
-        text: "v"
-        onClicked: flickArea.moveDown()
-        opacity: flickArea.contentY < mainGrid.rowHeight ? 1 : 0
-        Behavior on opacity {
-            NumberAnimation { duration: 200 }
         }
     }
 }

data/qml/StationCreatorPage1.qml

@@ -0,0 +1,51 @@
+import QtQuick 1.1
+import tomahawk 1.0
+import "tomahawkimports"
+
+
+Item {
+    id: root
+    property alias model: gridView.model
+    property int spacing: 10
+
+    signal itemClicked(int index)
+
+    GridView {
+        id: gridView
+        anchors.centerIn: parent
+        width: root.width * 9 / 10
+        height: cellHeight
+
+        cellWidth: (width - 1) / 3
+        cellHeight: cellWidth * 10 / 16
+
+        delegate: Image {
+            width: gridView.cellWidth - root.spacing
+            height: gridView.cellHeight - root.spacing
+            source: image
+
+            Rectangle {
+                id: textBackground
+                anchors {
+                    left: parent.left
+                    bottom: parent.bottom
+                    right: parent.right
+                }
+                height: parent.height / 5
+                color: "black"
+                opacity: .5
+
+            }
+            Text {
+                anchors.centerIn: textBackground
+                text: label
+                color: "white"
+                font.bold: true
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.itemClicked(index)
+            }
+        }
+    }
+}

data/qml/StationScene.qml

@@ -8,6 +8,13 @@ Rectangle {
     anchors.fill: parent
     state: "list"
 
+    ListModel {
+        id: modeModel
+        ListElement { label: "By Artist"; image: "../images/artist-placeholder-grid.png"; creatorState: "artist" }
+        ListElement { label: "By Genre"; image: "../images/album-placeholder-grid.png"; creatorState: "genre" }
+        ListElement { label: "By Year"; image: "image://albumart/foobar"; creatorState: "year" }
+    }
+
     ListModel {
         id: styleModel
         ListElement { modelData: "acoustic" }
@@ -47,17 +54,32 @@ Rectangle {
     VisualItemModel {
         id: stationVisualModel
 
-
+        StationCreatorPage1 {
-        StationCreator {
             height: scene.height
             width: scene.width
+            model: modeModel
+
+            onItemClicked: {
+                stationCreator.state = modeModel.get(index).creatorState
+                stationListView.incrementCurrentIndex()
+            }
+        }
+
+        StationCreator {
+            id: stationCreator
+            height: scene.height
+            width: scene.width
+
+            onBack: stationListView.decrementCurrentIndex()
+
+            onNext: stationListView.incrementCurrentIndex()
         }
 
         StationView {
             coverSize: Math.min(scene.height, scene.width) / 2
             height: scene.height
             width: scene.width
-            visible: stationListView.currentIndex == 1
+//            visible: stationListView.currentIndex == 1
 
             onBackClicked: stationListView.decrementCurrentIndex()
         }