QML: Add title bar and close/back button

diff --git a/ui/TitleBar.qml b/ui/TitleBar.qml
new file mode 100644 (file)
index 0000000..f411c07
--- /dev/null
+++ b/ui/TitleBar.qml
@@ -0,0 +1,43 @@
+import Qt 4.7
+
+Rectangle {
+         id: titleBar
+         height: 40
+         anchors.top: parent.top
+         anchors.left: parent.left
+         anchors.right: parent.right
+
+         property string closeOrBack : "close"
+         signal back
+
+         // This makes it appear always on top
+         z: 2
+
+         color: parent.color
+         opacity: .5
+
+         Text { 
+              text: "This is the title"  
+              color: "white" 
+              anchors.fill: parent
+         }
+
+         Image {
+             id: backIcon
+             source: ( titleBar.closeOrBack == "close" ? "images/close.png" : "images/back.png")
+
+             fillMode: Image.PreserveAspectFit
+
+             anchors.right: parent.right
+             height: parent.height
+         }
+
+         MouseArea {
+             anchors.fill : backIcon
+             onClicked: {
+                 titleBar.back ()
+             }
+         }
+
+}
+

diff --git a/ui/main.qml b/ui/main.qml
index 5e9d599..9ecc5b3 100644 (file)
--- a/ui/main.qml
+++ b/ui/main.qml
@@ -7,6 +7,27 @@ Rectangle {
     color: "black"
     state: "in_initPage"
     //state: "in_albumsPage"
+
+    TitleBar {
+       closeOrBack: ( screen.state == "in_initPage" ? "close" : "back")
+       onBack: {
+          switch (screen.state) {
+            case "in_initPage":
+               Qt.quit()
+               break
+            case "in_albumsPage":
+               screen.state = "in_initPage"
+               break
+            case "in_alternativesPage":
+               screen.state = "in_albumsPage"
+               break
+            default:
+               console.log ("WFT")        
+          }
+       }    
+
+    }
+
      
     Intro {
        id: initPage