some more work on saving stations

data/qml/StationView.qml

@@ -2,6 +2,7 @@ import QtQuick 1.1
 import tomahawk 1.0
 import "tomahawkimports"
 import "stations"
+
 Rectangle {
     id: scene
     color: "black"
@@ -22,7 +23,7 @@ Rectangle {
         subtitle: generator.summary
         showSearchField: false
         showBackButton: stationListView.currentIndex > 0
-        showNextButton: mainView.configured
+        showNextButton: mainView.configured && stationListView.currentIndex > 0
         nextButtonText: "Save"
         backButtonText: "Back"
 
@@ -41,7 +42,7 @@ Rectangle {
         // In our case the next button is the save button
         onNextPressed: {
             inputBubble.opacity = 1
-            saveNameInput.forceActiveFocus();
+            inputBubble.forceActiveFocus();
         }
     }
 
@@ -137,55 +138,25 @@ Rectangle {
         onModelChanged: print("ccccccccccccc", mainView.configured)
     }
 
-        Rectangle {
-            id: inputBubble
-            color: "black"
-            border.width: 2
-            border.color: "white"
-            height: defaultFontHeight * 3
-            width: height * 6
-            radius: defaultFontHeight / 2
-            anchors.top: header.bottom
-            anchors.right: parent.right
-            anchors.rightMargin: defaultFontHeight / 2
-            anchors.topMargin: -defaultFontHeight / 2
-            z: 2
-            opacity: 0
-            Behavior on opacity {
-                NumberAnimation { duration: 200 }
-            }
-
-            Row {
-                anchors.centerIn: parent
-                width: parent.width - defaultFontHeight
-                spacing: defaultFontHeight / 2
-
-                function saveStation(name) {
-                    mainView.title = name
-                    inputBubble.opacity = 0
-                    header.showNextButton = false
-                    header.backButtonText = "Configure"
-                }
-
-                Text {
-                    id: nameText
-                    color: "white"
-                    text: "Name:"
-                    anchors.verticalCenter: parent.verticalCenter
-                }
-                InputField {
-                    id: saveNameInput
-                    width: parent.width - nameText.width - saveOkButton.width - parent.spacing * 2
-                    placeholderText: "Station"
-                    onAccepted: parent.saveStation(text);
-                }
-                PushButton {
-                    id: saveOkButton
-                    text: "OK"
-                    onClicked: parent.saveStation(saveNameInput.text)
-                }
-            }
+    InputBubble {
+        id: inputBubble
+        text: "Station name:"
+        width: defaultFontHeight * 18
+        anchors.top: header.bottom
+        anchors.right: parent.right
+        anchors.rightMargin: defaultFontHeight / 2
+        anchors.topMargin: -defaultFontHeight / 2
+        z: 2
+        opacity: 0
 
+        onAccepted: {
+            mainView.title = inputBubble.inputText
+            inputBubble.opacity = 0
+            header.showNextButton = false
+            header.showBackButton = false
+            inputBubble.opacity = 0
         }
 
+        onRejected: inputBubble.opacity = 0
+    }
 }

data/qml/tomahawkimports/Button.qml

@@ -2,28 +2,43 @@ 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
+    height: contentRow.height + defaultFontHeight / 2
+    width: contentRow.width + defaultFontHeight / 2
 
     property alias text: buttonText.text
-    property color textColor: "white"
+    property alias imageSource: image.source
+    property bool enabled: true
+
+    color: "transparent"
+    border.width: defaultFontHeight / 16
+    border.color: buttonMouseArea.containsMouse ? "lightblue" : "transparent"
+    radius: defaultFontHeight / 4
 
     signal clicked()
 
-    Text {
-        id: buttonText
+    Row {
+        id: contentRow
+        spacing: defaultFontHeight / 4
+        width: childrenRect.width
+        height: childrenRect.height
         anchors.centerIn: parent
-        color: root.textColor
+        Image {
+            id: image
+            height: defaultFontHeight
+            width: source.length == 0 ? 0 : height
+        }
+
+        Text {
+            id: buttonText
+            color: root.enabled ? "black" : "grey"
+        }
     }
 
     MouseArea {
         id: buttonMouseArea
         anchors.fill: parent
-        hoverEnabled: true
+        hoverEnabled: root.enabled
+        enabled: root.enabled
         onClicked: root.clicked();
     }
 }

data/qml/tomahawkimports/InputBubble.qml

@@ -0,0 +1,104 @@
+import QtQuick 1.1
+import tomahawk 1.0
+
+FocusScope {
+    id: root
+
+    property alias text: messageText.text
+    property alias inputText: inputField.text
+
+    property real arrowPosition: 1
+
+    height: contentColumn.height + defaultFontHeight * 2
+
+    signal accepted()
+    signal rejected()
+
+    onFocusChanged: {
+        if (focus) {
+            inputField.forceActiveFocus()
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        anchors.margins: -999999999
+        hoverEnabled: root.opacity > 0
+        enabled: root.opacity > 0
+    }
+
+    Item {
+        id: backgroundItem
+        anchors.fill: parent
+        opacity: 0.9
+        Rectangle {
+            id: arrowRect
+            height: defaultFontHeight / 1.8
+            width: height
+            rotation: 45
+            color: "black"
+            anchors.top: backgroundItem.top
+            x: defaultFontHeight - arrowRect.width/2 + (root.width - defaultFontHeight*2) * arrowPosition
+        }
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            color: "white"
+            border.color: "black"
+            border.width: defaultFontHeight / 8
+            radius: defaultFontHeight / 2
+            anchors.topMargin: defaultFontHeight / 4
+        }
+        Rectangle {
+            height: defaultFontHeight / 2
+            width: height
+            rotation: 45
+            color: "white"
+            anchors.centerIn: arrowRect
+        }
+    }
+
+    Column {
+        id: contentColumn
+        width: parent.width - defaultFontHeight
+        height: childrenRect.height
+        anchors.centerIn: parent
+        anchors.verticalCenterOffset: defaultFontHeight / 4
+        spacing: defaultFontHeight / 2
+
+        Row {
+            width: parent.width
+            height: childrenRect.height
+            spacing: defaultFontHeight / 2
+            Text {
+                id: messageText
+                wrapMode: Text.WordWrap
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            InputField {
+                id: inputField
+                width: parent.width - x
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+        Row {
+            height: childrenRect.height
+            anchors.right: parent.right
+            spacing: defaultFontHeight
+            Button {
+                text: "OK"
+                imageSource: "qrc:///data/images/ok.svg"
+                enabled: inputField.text.length > 0
+                onClicked: root.accepted()
+            }
+            Button {
+                text: "Cancel"
+                imageSource: "qrc:///data/images/cancel.svg"
+                onClicked: {
+                    inputField.text = ""
+                    root.rejected()
+                }
+            }
+        }
+    }
+}

resources.qrc

@@ -102,6 +102,7 @@
         <file>data/qml/tomahawkimports/PushButton.qml</file>
         <file>data/qml/tomahawkimports/CoverFlip.qml</file>
         <file>data/qml/tomahawkimports/BusyIndicator.qml</file>
+        <file>data/qml/tomahawkimports/InputBubble.qml</file>
         <file>data/qml/StationView.qml</file>
         <file>data/qml/stations/StationItem.qml</file>
         <file>data/qml/stations/StationCreatorPage1.qml</file>