diff --git a/data/qml/StationScene.qml b/data/qml/StationScene.qml
index 96567e3e4..30bcf58b5 100644
--- a/data/qml/StationScene.qml
+++ b/data/qml/StationScene.qml
@@ -54,20 +54,28 @@ Rectangle {
Grid {
anchors.fill: parent
anchors.margins: spacing
- spacing: width * .1
- columns: 3
+ spacing: width * .05
+ 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
- text: "or"
+ anchors { left: parent.left; right: parent.right;
+ 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)
+ }
+
}
}
}
diff --git a/data/qml/StationView.qml b/data/qml/StationView.qml
index 5db40e91e..1b71267ad 100644
--- a/data/qml/StationView.qml
+++ b/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
-
- Rectangle {
- border.width: 4
- border.color: "white"
+ RoundedButton {
+ text: "<"
height: titleText.height * 3
width: height
- radius: height / 2
- color: backbuttonMouseArea.containsMouse ? "#22ffffff" : "black"
- Behavior on color {
- ColorAnimation { duration: 200 }
- }
+ onClicked: root.backClicked()
- 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
- border.color: "white"
+
+ RoundedButton {
+ text: "+"
height: titleText.height * 3
width: height
- radius: height / 2
- color: addbuttonMouseArea.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: addbuttonMouseArea
- hoverEnabled: true
- anchors.fill: parent
- onClicked: root.backClicked()
- }
+
+ onClicked: print("TODO: save station")
+
}
}
}
diff --git a/data/qml/tomahawkimports/RoundedButton.qml b/data/qml/tomahawkimports/RoundedButton.qml
new file mode 100644
index 000000000..2d5db43a4
--- /dev/null
+++ b/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()
+ }
+}
diff --git a/resources.qrc b/resources.qrc
index 3364a7fb3..e4ddf0fa4 100644
--- a/resources.qrc
+++ b/resources.qrc
@@ -172,5 +172,6 @@
data/qml/tomahawkimports/Button.qml
data/qml/tomahawkimports/DoubleSlider.qml
data/qml/CoverFlip.qml
+ data/qml/tomahawkimports/RoundedButton.qml