Improve loader example

Use system palette and icons.

5 files changed, 49 insertions, 17 deletions

diff --git a/examples/declarative/loader/Browser.qml b/examples/declarative/loader/Browser.qml
index 280273b..aec373b 100644
--- a/examples/declarative/loader/Browser.qml
+++ b/examples/declarative/loader/Browser.qml
@@ -2,6 +2,7 @@ Rect {
     id: Root
     width: parent.width
     height: parent.height
+    color: activePalette.base
     FolderListModel {
         id: folders
         nameFilters: [ "*.qml" ]
@@ -13,12 +14,26 @@ Rect {
         Rect {
             id: Wrapper
             width: Root.width
-            height: NameText.height
+            height: 32
+            color: activePalette.base
+            Rect {
+                id: Highlight; visible: false
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { id: t1; position: 0.0; color: activePalette.highlight }
+                    GradientStop { id: t2; position: 1.0; color: activePalette.lighter(activePalette.highlight) }
+                }
+            }
+            Item {
+                width: 32; height: 32
+                Image { source: "images/fileopen.png"; anchors.centeredIn: parent; visible: folders.isFolder(index)}
+            }
             Text {
                 id: NameText
-                text: fileName
-                font.bold: true
-                font.size: 12
+                anchors.fill: parent; vAlign: "AlignVCenter"
+                text: fileName; anchors.leftMargin: 32
+                font.size: 10
+                color: activePalette.windowText
             }
             MouseRegion {
                 id: Mouse
@@ -35,7 +50,8 @@ Rect {
                 State {
                     name: "pressed"
                     when: Mouse.pressed
-                    SetProperties { target: Wrapper; color: "#bbbbbb" }
+                    SetProperties { target: Highlight; visible: true }
+                    SetProperties { target: NameText; color: activePalette.highlightedText }
                 }
             ]
         }
@@ -48,19 +64,8 @@ Rect {
         }
     }
 
-    Rect {
-        id: UpButton
-        width: 30
-        height: UpText.height
-        color: "grey"
-        MouseRegion { anchors.fill: parent; onClicked: folders.folder = up(folders.folder) }
-        Text { id: UpText; text: "Up" }
-    }
-
-    Text { anchors.left: UpButton.right; text: folders.folder }
-
     ListView {
-        anchors.top: UpButton.bottom
+        anchors.top: TitleBar.bottom
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
@@ -68,4 +73,27 @@ Rect {
         delegate: FolderDelegate
         clip: true
     }
+
+    Rect {
+        id: TitleBar
+        width: parent.width
+        height: 32
+        color: activePalette.button; pen.color: activePalette.mid
+
+        Rect {
+            id: UpButton
+            width: 30
+            height: TitleBar.height
+            pen.color: activePalette.mid; color: "transparent"
+            MouseRegion { anchors.fill: parent; onClicked: folders.folder = up(folders.folder) }
+            Image { anchors.centeredIn: parent; source: "images/up.png" }
+        }
+
+        Text {
+            anchors.left: UpButton.right; anchors.right: parent.right; height: parent.height
+            anchors.leftMargin: 4; anchors.rightMargin: 4
+            text: folders.folder; color: activePalette.buttonText
+            elide: "ElideLeft"; hAlign: "AlignRight"; vAlign: "AlignVCenter"
+        }
+    }
 }
diff --git a/examples/declarative/loader/images/fileopen.png b/examples/declarative/loader/images/fileopen.png
new file mode 100644
index 0000000..4aaf149
--- /dev/null
+++ b/examples/declarative/loader/images/fileopen.png
diff --git a/examples/declarative/loader/images/up.png b/examples/declarative/loader/images/up.png
new file mode 100644
index 0000000..b05f802
--- /dev/null
+++ b/examples/declarative/loader/images/up.png
diff --git a/examples/declarative/loader/loader.qrc b/examples/declarative/loader/loader.qrc
index 1f0925f..bdbcd5c 100644
--- a/examples/declarative/loader/loader.qrc
+++ b/examples/declarative/loader/loader.qrc
@@ -2,5 +2,7 @@
     <qresource prefix="/">
         <file>loader.qml</file>
         <file>Browser.qml</file>
+        <file>images/fileopen.png</file>
+        <file>images/up.png</file>
     </qresource>
 </RCC>
diff --git a/examples/declarative/loader/main.cpp b/examples/declarative/loader/main.cpp
index 23125ce..aa86f8f 100644
--- a/examples/declarative/loader/main.cpp
+++ b/examples/declarative/loader/main.cpp
@@ -5,6 +5,7 @@
 #include <QmlContext>
 #include <QmlComponent>
 #include <qfxview.h>
+#include "qmlpalette.h"
 
 QFxView *canvas = 0;
 
@@ -61,6 +62,7 @@ int main(int argc, char *argv[])
     canvas = new QFxView;
     QmlContext *ctxt = canvas->rootContext();
     ctxt->setContextProperty("qmlLauncher", launcher);
+    ctxt->setContextProperty("activePalette", new QmlPalette);
     canvas->setUrl(QUrl("qrc:/loader.qml"));
     canvas->execute();
     canvas->show();