ui: First QML files for the UI

diff --git a/ui/AlbumList.qml b/ui/AlbumList.qml
new file mode 100644 (file)
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 (file)
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 (file)
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 (file)
index 0000000..5f92de3
Binary files /dev/null and b/ui/images/button-blue.png differ

diff --git a/ui/images/button-red.png b/ui/images/button-red.png
new file mode 100644 (file)
index 0000000..3b33589
Binary files /dev/null and b/ui/images/button-red.png differ

diff --git a/ui/main.qml b/ui/main.qml
new file mode 100644 (file)
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}
+       }
+    ]
+
+
+}