From 1046b495b6541bc90607d3fd77ca5e00d3142fdf Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Mon, 26 Nov 2012 00:26:57 +0100 Subject: [PATCH] more brainstorming --- data/qml/StationScene.qml | 75 ++++++++++++++++------ data/qml/StationView.qml | 53 +++------------ data/qml/tomahawkimports/RoundedButton.qml | 31 +++++++++ resources.qrc | 1 + 4 files changed, 97 insertions(+), 63 deletions(-) create mode 100644 data/qml/tomahawkimports/RoundedButton.qml 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