From 24962c4ddcfcca6d4d263c17cea574cfb8dd8c6f Mon Sep 17 00:00:00 2001
From: Ivan Frade <ivan.frade@nokia.com>
Date: Fri, 1 Apr 2011 12:17:22 +0300
Subject: [PATCH] ui: First QML files for the UI

---
 ui/AlbumList.qml          |   52 +++++++++++++++++++++++++++++++++++++++++++++
 ui/Albums.qml             |   13 ++++++++++++
 ui/FancyButton.qml        |   41 +++++++++++++++++++++++++++++++++++
 ui/images/button-blue.png |  Bin 0 -> 1565 bytes
 ui/images/button-red.png  |  Bin 0 -> 1586 bytes
 ui/main.qml               |   51 ++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 157 insertions(+)
 create mode 100644 ui/AlbumList.qml
 create mode 100644 ui/Albums.qml
 create mode 100644 ui/FancyButton.qml
 create mode 100644 ui/images/button-blue.png
 create mode 100644 ui/images/button-red.png
 create mode 100644 ui/main.qml

diff --git a/ui/AlbumList.qml b/ui/AlbumList.qml
new file mode 100644
index 0000000..aae9fa4
--- /dev/null
+++ b/ui/AlbumList.qml
@@ -0,0 +1,52 @@
+import Qt 4.7
+
+ListView {
+    id: albumListView
+    anchors.fill: parent
+
+    delegate: Component {
+          Rectangle {
+              width: albumListView.width
+              height: 60
+              color: ((index % 2 == 0) ? "#222":"#111")
+              
+              Image {
+                 id: cover
+                 source: model.album.album_art || "images/button-blue.png"
+                 width: 50
+                 height: 50
+                 anchors.left: parent.left
+                 anchors.top: parent.top
+                 anchors.leftMargin: (parent.height - width)/2
+                 anchors.topMargin: (parent.height - height)/2
+              }              
+
+
+              Text {
+                 id:title
+                 text:model.album.title
+                 color: "white"
+                 font.bold: true
+                 anchors.top: parent.top
+                 anchors.left: cover.right
+                 anchors.right: parent.right
+                 anchors.bottom: parent.verticalCenter
+                 verticalAlignment: Text.AlignBottom
+                 anchors.leftMargin: 10
+              }
+
+              Text {
+                 id:artist
+                 text:model.album.artist
+                 color: "#aaa"
+                 anchors.top: title.bottom
+                 anchors.left: cover.right
+                 anchors.right: parent.right
+                 anchors.bottom: parent.bottom
+                 verticalAlignment: Text.AlignTop
+                 anchors.leftMargin: 10
+              }
+          }
+    }
+
+}
diff --git a/ui/Albums.qml b/ui/Albums.qml
new file mode 100644
index 0000000..708d947
--- /dev/null
+++ b/ui/Albums.qml
@@ -0,0 +1,13 @@
+import Qt 4.7
+
+/* Just a main to show the list of albums */
+Rectangle {
+     id:screen
+     width: 800
+     height: 480
+     color: "black"
+
+     AlbumList {
+        model: albumModel
+     }
+}
diff --git a/ui/FancyButton.qml b/ui/FancyButton.qml
new file mode 100644
index 0000000..8ef309e
--- /dev/null
+++ b/ui/FancyButton.qml
@@ -0,0 +1,41 @@
+import Qt 4.7
+
+Item {
+
+   id: fancyItem
+
+   property alias source: internalImage.source
+   property alias caption: captionItem.text
+
+   signal clicked;
+
+   width: 80
+   height: 100
+
+   Image {
+      id: internalImage
+      anchors.fill: parent
+      width: parent.width; height: parent.height - captionItem.height
+   }
+
+   Text {
+      id: captionItem
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.top: internalImage.bottom
+
+      color: "white"
+      font.pointSize: 24
+   }
+
+   MouseArea {
+         id: mouseArea
+         anchors.fill: parent
+         onClicked: { fancyItem.clicked () }
+   }
+
+   states: State {
+         name: "pressed"; when: mouseArea.pressed == true
+         PropertyChanges { target: fancyItem; opacity: .4 }
+   }
+
+}
diff --git a/ui/images/button-blue.png b/ui/images/button-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f92de32d0fbce073b5161bc54b1b31a42f4dfd0
GIT binary patch
literal 1565
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
P00000NkvXXu0mjfvD)Jf

literal 0
HcmV?d00001

diff --git a/ui/images/button-red.png b/ui/images/button-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..3b335891aea798c5fadf4c3d61c74ca7ad79ed8d
GIT binary patch
literal 1586
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

literal 0
HcmV?d00001

diff --git a/ui/main.qml b/ui/main.qml
new file mode 100644
index 0000000..8444352
--- /dev/null
+++ b/ui/main.qml
@@ -0,0 +1,51 @@
+import Qt 4.7
+
+Rectangle {
+    id: screen
+    width: 800
+    height: 480
+    color: "black"
+    state: "in_initPage"
+     
+    Row {
+        id: initPage
+
+        anchors.horizontalCenter : screen.horizontalCenter
+        anchors.verticalCenter: screen.verticalCenter
+        spacing: screen.width / 4
+
+        FancyButton {
+           source: "images/button-blue.png"
+           caption: "Edit metadata"
+        }
+
+        FancyButton {
+           source: "images/button-red.png"
+           caption: "Album art"
+           onClicked: {
+              screen.state = "in_albumsPage"
+           }
+        }
+    }
+
+    AlbumList {
+        id: albumsPage
+        model: albumModel
+    }
+
+    states: [
+       State {
+           name: "in_initPage"
+           PropertyChanges {target: initPage; visible: true; interactive: true}
+           PropertyChanges {target: albumsPage; visible: false; interactive: false}
+       },
+
+       State {
+           name: "in_albumsPage"
+           PropertyChanges {target: initPage; visible: false; interactive: false}
+           PropertyChanges {target: albumsPage; visible: true; interactive: true}
+       }
+    ]
+
+
+}
-- 
1.7.9.5