- make the station stuff adapt to high DPIs

- more work on the config dialog

data/qml/StationConfig.qml

@@ -1,5 +1,6 @@
 import QtQuick 1.1
 import tomahawk 1.0
+import "tomahawkimports"
 
 Item {
     id: fineTuneView
@@ -9,45 +10,53 @@ Item {
     signal done();
 
     Grid {
-        anchors.fill: parent
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
         anchors.margins: 50
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: scene.width / 2
+        spacing: 50
+        columns: 2
+
         Text {
             color: fineTuneView.textColor
-            text: "Name"
+            text: "Name:"
 
         }
-        TextInput {
-            id: stationName
-            width: 200
+        InputField {
             text: echonestStation.name
-            //onTextChanged: echonestStation.
+
+            onAccepted: {
+                print("text changed!!!")
+                echonestStation.name = text;
+            }
+        }
+
+        Text {
+            text: "Tempo:"
+            color: "white"
+        }
+        DoubleSlider {
+            width: 500
+        }
+
+        Text {
+            text: "Hotness:"
+            color: "white"
+        }
+        DoubleSlider {
+            width: 500
         }
     }
 
-    Rectangle {
+
+    Button {
         id: configureButton
+        onClicked: fineTuneView.done();
+        text: "configure"
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 20
         anchors.horizontalCenter: parent.horizontalCenter
-        color: "gray"
-        height: 20
-        width: 150
-        radius: 10
-        //opacity: 0
-
-        Text {
-            anchors.centerIn: parent
-            text: "configure"
-            color: "white"
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                fineTuneView.done();
-            }
-        }
     }
 
-
 }

data/qml/StationScene.qml

@@ -28,7 +28,7 @@ Rectangle {
         }
 
         StationView {
-            coverSize: 250
+            coverSize: Math.min(scene.height, scene.width) / 2
             height: scene.height
             width: scene.width
 

data/qml/StationView.qml

@@ -1,5 +1,6 @@
 import QtQuick 1.1
 import tomahawk 1.0
+import "tomahawkimports"
 
 Item {
     id: root
@@ -84,14 +85,14 @@ Item {
             anchors { left: parent.left; top: parent.top; right: parent.right }
             Text {
                 color: "white"
-                font.pixelSize: 16
+                font.pointSize: 12
                 width: parent.width
                 elide: Text.ElideRight
                 text: "Station:"
             }
             Text {
                 color: "white"
-                font.pixelSize: 24
+                font.pointSize: 14
                 font.bold: true
                 width: parent.width
                 elide: Text.ElideRight
@@ -108,16 +109,16 @@ Item {
 
             Text {
                 color: "white"
-                font.pixelSize: 16
+                font.pointSize: 12
                 width: parent.width
                 elide: Text.ElideRight
                 text: "Now Playing:"
                 visible: currentlyPlayedIndex !== -1
             }
             Rectangle {
-                height: 64
-                width: parent.width
-                radius: 32
+                height: image.height + image.height / 5
+                width: image.width + startPlayingText.width * 1.2
+                radius: height / 2
                 border.width: 2
                 border.color: "white"
                 color: startPlayingMouseArea.containsMouse ? "blue" : "gray"
@@ -131,12 +132,13 @@ Item {
                 }
 
                 Text {
+                    id: startPlayingText
                     color: "white"
-                    font.pixelSize: 24
+                    font.pointSize: 20
                     anchors.left: image.right
-                    anchors.margins: 10
+                    anchors.margins: height / 5
                     anchors.verticalCenter: parent.verticalCenter
-                    width: parent.width - 30 - image.width
+                    //width: parent.width - 30 - image.width
                     elide: Text.ElideRight
                     text: "Start playing"
                 }
@@ -150,21 +152,21 @@ Item {
 
             Text {
                 color: "white"
-                font.pixelSize: 24
+                font.pointSize: 16
                 width: parent.width
                 elide: Text.ElideRight
                 text: coverView.model.itemFromIndex( currentlyPlayedIndex ).name
             }
             Text {
                 color: "white"
-                font.pixelSize: 20
+                font.pointSize: 14
                 width: parent.width
                 elide: Text.ElideRight
                 text: coverView.model.itemFromIndex( currentlyPlayedIndex ).artistName
             }
             Text {
                 color: "white"
-                font.pixelSize: 20
+                font.pointSize: 14
                 width: parent.width
                 elide: Text.ElideRight
                 text: coverView.model.itemFromIndex( currentlyPlayedIndex ).albumName
@@ -172,29 +174,13 @@ Item {
         }
     }
 
-    Rectangle {
+    Button {
         id: configureButton
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 20
         anchors.horizontalCenter: parent.horizontalCenter
-        color: "gray"
-        height: 20
-        width: 150
-        radius: 10
-        //opacity: 0
-
-        Text {
-            anchors.centerIn: parent
-            text: "configure"
-            color: "white"
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                root.configure();
-            }
-        }
+        text: "configure"
+        onClicked: root.configure();
     }
 
 }

data/qml/tomahawkimports/Button.qml

@@ -0,0 +1,29 @@
+import QtQuick 1.1
+
+Rectangle {
+    id: root
+    color:  buttonMouseArea.containsMouse ? "blue" : "gray"
+    border.width: 2
+    border.color: "white"
+    radius: height/2
+    height: buttonText.height * 1.2
+    width: buttonText.width * 1.5
+
+    property alias text: buttonText.text
+    property color textColor: "white"
+
+    signal clicked()
+
+    Text {
+        id: buttonText
+        anchors.centerIn: parent
+        color: root.textColor
+    }
+
+    MouseArea {
+        id: buttonMouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: root.clicked();
+    }
+}

data/qml/tomahawkimports/DoubleSlider.qml

@@ -0,0 +1,36 @@
+import QtQuick 1.1
+
+Item {
+    width: 500
+    height: 10
+
+    property int min: 0
+    property int max: 100
+
+    property int lowerSliderPos: 25
+    property int upperSliderPos: 75
+
+    Rectangle {
+        id: lowerSlider
+        height: parent.height
+        width: height
+        anchors.top: parent.top
+        x: 10
+    }
+
+    Rectangle {
+        id: upperSlider
+        height: parent.height
+        width: height
+        anchors.top: parent.top
+        x: 50
+    }
+
+    Rectangle {
+        height: 4
+        color: "white"
+        radius: height / 2
+        width: parent.width
+        anchors.centerIn: parent
+    }
+}

data/qml/tomahawkimports/InputField.qml

@@ -0,0 +1,23 @@
+import QtQuick 1.1
+
+Rectangle {
+    id: root
+    color: "white"
+    border.color: "black"
+    border.width: 2
+
+    height: textInput.height + 4
+    width: 300
+
+    property alias text: textInput.text
+
+    signal accepted( string text )
+
+    TextInput {
+        id: textInput
+        width: parent.width
+        anchors.centerIn: parent
+
+        onAccepted: root.accepted( text );
+    }
+}