more brainstorming

data/qml/StationScene.qml

@@ -54,20 +54,28 @@ Rectangle {
             Grid {
                 anchors.fill: parent
                 anchors.margins: spacing
-                spacing: width * .1
+                spacing: width * .05
-                columns: 3
+                columns: 2
 
                 property int rowHeight: height / 2
 
                 Item {
                     height: parent.rowHeight
-                    width: parent.width / 2
+                    width: parent.width * 0.7
+                    Text {
+                        id: artistGridLabel
+                        text: "Select an artist..."
+                        anchors { left: parent.left; top: parent.top; right: parent.right }
+                        color: "white"
+                        font.bold: true
+                    }
+
                     GridView {
                         id: gridView
-                        anchors.fill: parent
+                        anchors { left: parent.left; top: artistGridLabel.bottom; topMargin: artistGridLabel.height; right: parent.right; bottom: parent.bottom }
                         model: dummyArtistModel
 
-                        cellWidth: gridView.width / 4 - 1 // -1 to make sure there is space for 4 items even with rounding error
+                        cellWidth: Math.min(gridView.width / 4 - 1, gridView.height / 2) // -1 to make sure there is space for 4 items even with rounding error
                         cellHeight: cellWidth
 
                         delegate: Item {
@@ -89,18 +97,18 @@ Rectangle {
                 }
                 Item {
                     height: parent.rowHeight
-                    width: orText.width
+                    width: parent.width * 0.25
                     Text {
                         id: orText
-                        anchors.centerIn: parent
+                        anchors { left: parent.left; right: parent.right;
-                        text: "or"
+                            bottom: artistInputField.top; bottomMargin: height }
+                        text: "...or enter a name:"
                         color: "white"
+                        font.bold: true
                     }
-                }
+
-                Item {
-                    height: parent.rowHeight
-                    width: parent.width / 4
                     InputField {
+                        id: artistInputField
                         anchors.centerIn: parent
                         width: parent.width
                         onAccepted: {
@@ -108,14 +116,32 @@ Rectangle {
                             stationListView.incrementCurrentIndex();
                         }
                     }
+
+                    RoundedButton {
+                        text: ">"
+                        height: orText.height * 3
+                        width: height
+                        anchors { horizontalCenter: artistInputField.horizontalCenter
+                            top: artistInputField.bottom; topMargin: orText.height }
+                        onClicked: artistInputField.accepted(artistInputField.text)
+                    }
+
                 }
 
                 Item {
                     height: parent.rowHeight
-                    width: parent.width / 2
+                    width: parent.width * 0.7
+                    Text {
+                        id: selectGenreText
+                        anchors { left: parent.left; right: parent.right; top: parent.top}
+                        text: "Select a genre..."
+                        color: "white"
+                        font.bold: true
+                    }
 
                     TagCloud {
                         anchors.fill: parent
+                        anchors.topMargin: selectGenreText.height * 2
                         model: styleModel//generator.styles()
                         opacity: echonestStation.configured ? 0 : 1
 
@@ -131,17 +157,16 @@ Rectangle {
                 }
                 Item {
                     height: parent.rowHeight
-                    width: orText.width
+                    width: parent.width * 0.25
                     Text {
-                        text: "or"
+                        text: "...or enter your style:"
                         color: "white"
-                        anchors.verticalCenter: parent.verticalCenter
+                        anchors { left: parent.left; right: parent.right;
+                            bottom: genreInputField.top; bottomMargin: height }
+                        font.bold: true
                     }
-                }
-                Item {
-                    height: parent.rowHeight
-                    width: parent.width / 4
                     InputField {
+                        id: genreInputField
                         anchors.centerIn: parent
                         width: parent.width
                         onAccepted: {
@@ -149,6 +174,16 @@ Rectangle {
                             stationListView.incrementCurrentIndex();
                         }
                     }
+
+                    RoundedButton {
+                        text: ">"
+                        height: orText.height * 3
+                        width: height
+                        anchors { horizontalCenter: genreInputField.horizontalCenter
+                            top: genreInputField.bottom; topMargin: orText.height }
+                        onClicked: genreInputField.accepted(genreInputField.text)
+                    }
+
                 }
             }
         }

data/qml/StationView.qml

@@ -11,6 +11,7 @@ Item {
     CoverFlip {
         id: coverView
         anchors.fill: parent
+        interactive: false
 
         backgroundColor: scene.color
 
@@ -59,55 +60,21 @@ Item {
             width: scene.width / 3
             spacing: titleText.height * 2
 
-
+            RoundedButton {
-            Rectangle {
+                text: "<"
-                border.width: 4
-                border.color: "white"
                 height: titleText.height * 3
                 width: height
-                radius: height / 2
+                onClicked: root.backClicked()
-                color: backbuttonMouseArea.containsMouse ? "#22ffffff" : "black"
-                Behavior on color {
-                    ColorAnimation { duration: 200 }
-                }
 
-                Text {
-                    anchors.centerIn: parent
-                    text: "<"
-                    color: "white"
-                    font.pixelSize: parent.height * .75
-                    font.bold: true
-                }
-                MouseArea {
-                    id: backbuttonMouseArea
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onClicked: root.backClicked()
-                }
             }
-            Rectangle {
+
-                border.width: 4
+            RoundedButton {
-                border.color: "white"
+                text: "+"
                 height: titleText.height * 3
                 width: height
-                radius: height / 2
+
-                color: addbuttonMouseArea.containsMouse ? "#22ffffff" : "black"
+                onClicked: print("TODO: save station")
-                Behavior on color {
+
-                    ColorAnimation { duration: 200 }
-                }
-                Text {
-                    anchors.centerIn: parent
-                    text: "+"
-                    color: "white"
-                    font.pixelSize: parent.height * .75
-                    font.bold: true
-                }
-                MouseArea {
-                    id: addbuttonMouseArea
-                    hoverEnabled: true
-                    anchors.fill: parent
-                    onClicked: root.backClicked()
-                }
             }
         }
     }

data/qml/tomahawkimports/RoundedButton.qml

@@ -0,0 +1,31 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+Rectangle {
+    border.width: 4
+    border.color: "white"
+    radius: height / 2
+    color: buttonMouseArea.containsMouse ? "#22ffffff" : "black"
+
+    property string text
+
+    signal clicked()
+
+    Behavior on color {
+        ColorAnimation { duration: 200 }
+    }
+
+    Text {
+        anchors.centerIn: parent
+        text: parent.text
+        color: "white"
+        font.pixelSize: parent.height * .75
+        font.bold: true
+    }
+    MouseArea {
+        id: buttonMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: parent.clicked()
+    }
+}

resources.qrc

@@ -172,5 +172,6 @@
         <file>data/qml/tomahawkimports/Button.qml</file>
         <file>data/qml/tomahawkimports/DoubleSlider.qml</file>
         <file>data/qml/CoverFlip.qml</file>
+        <file>data/qml/tomahawkimports/RoundedButton.qml</file>
     </qresource>
 </RCC>