Improve utility of QMLViewer

Adds a startup animation for all platforms, and adds support for file
associated and drag and drop on Mac OS X

QTBUG-12496

6 files changed, 298 insertions, 0 deletions

diff --git a/tools/qml/browser/Browser.qml b/tools/qml/browser/Browser.qml
new file mode 100644
index 0000000..ff2bb47
--- /dev/null
+++ b/tools/qml/browser/Browser.qml
@@ -0,0 +1,284 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights.  These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import Qt 4.7
+import Qt.labs.folderlistmodel 1.0
+
+Rectangle {
+    id: root
+    property bool keyPressed: false
+    property variant folders: folders1
+    property variant view: view1
+    width: 320
+    height: 480
+    color: palette.window
+
+    FolderListModel {
+        id: folders1
+        nameFilters: [ "*.qml" ]
+        folder: qmlViewerFolder
+    }
+    FolderListModel {
+        id: folders2
+        nameFilters: [ "*.qml" ]
+        folder: qmlViewerFolder
+    }
+
+    SystemPalette { id: palette }
+
+    function down(path) {
+        if (folders == folders1) {
+            view = view2
+            folders = folders2;
+            view1.state = "exitLeft";
+        } else {
+            view = view1
+            folders = folders1;
+            view2.state = "exitLeft";
+        }
+        view.x = root.width;
+        view.state = "current";
+        view.focus = true;
+        folders.folder = path;
+    }
+    function up() {
+        var path = folders.parentFolder;
+        if (folders == folders1) {
+            view = view2
+            folders = folders2;
+            view1.state = "exitRight";
+        } else {
+            view = view1
+            folders = folders1;
+            view2.state = "exitRight";
+        }
+        view.x = -root.width;
+        view.state = "current";
+        view.focus = true;
+        folders.folder = path;
+    }
+
+    Component {
+        id: folderDelegate
+        Rectangle {
+            id: wrapper
+            function launch() {
+                if (folders.isFolder(index)) {
+                    down(filePath);
+                } else {
+                    qmlViewer.launch(filePath);
+                }
+            }
+            width: root.width
+            height: 52
+            color: "transparent"
+            Rectangle {
+                id: highlight; visible: false
+                anchors.fill: parent
+                gradient: Gradient {
+                    GradientStop { id: t1; position: 0.0; color: palette.highlight }
+                    GradientStop { id: t2; position: 1.0; color: Qt.lighter(palette.highlight) }
+                }
+            }
+            Item {
+                width: 48; height: 48
+                Image { source: "images/folder.png"; anchors.centerIn: parent; visible: folders.isFolder(index)}
+            }
+            Text {
+                id: nameText
+                anchors.fill: parent; verticalAlignment: Text.AlignVCenter
+                text: fileName
+                anchors.leftMargin: 54
+                font.pixelSize: 32
+                color: (wrapper.ListView.isCurrentItem && root.keyPressed) ? palette.highlightedText : palette.windowText
+                elide: Text.ElideRight
+            }
+            MouseArea {
+                id: mouseRegion
+                anchors.fill: parent
+                onClicked: { if (folders == wrapper.ListView.view.model) launch() }
+            }
+            states: [
+                State {
+                    name: "pressed"
+                    when: mouseRegion.pressed
+                    PropertyChanges { target: highlight; visible: true }
+                    PropertyChanges { target: nameText; color: palette.highlightedText }
+                }
+            ]
+        }
+    }
+
+    ListView {
+        id: view1
+        anchors.top: titleBar.bottom
+        anchors.bottom: parent.bottom
+        x: 0
+        width: parent.width
+        model: folders1
+        delegate: folderDelegate
+        highlight: Rectangle { color: palette.highlight; visible: root.keyPressed && view1.count != 0 }
+        highlightMoveSpeed: 1000
+        pressDelay: 100
+        focus: true
+        state: "current"
+        states: [
+            State {
+                name: "current"
+                PropertyChanges { target: view1; x: 0 }
+            },
+            State {
+                name: "exitLeft"
+                PropertyChanges { target: view1; x: -root.width }
+            },
+            State {
+                name: "exitRight"
+                PropertyChanges { target: view1; x: root.width }
+            }
+        ]
+        transitions: [
+            Transition {
+                to: "current"
+                SequentialAnimation {
+                    NumberAnimation { properties: "x"; duration: 250 }
+                }
+            },
+            Transition {
+                NumberAnimation { properties: "x"; duration: 250 }
+                NumberAnimation { properties: "x"; duration: 250 }
+            }
+        ]
+        Keys.onPressed: { root.keyPressed = true; }
+    }
+
+    ListView {
+        id: view2
+        anchors.top: titleBar.bottom
+        anchors.bottom: parent.bottom
+        x: parent.width
+        width: parent.width
+        model: folders2
+        delegate: folderDelegate
+        highlight: Rectangle { color: palette.highlight; visible: root.keyPressed && view2.count != 0 }
+        highlightMoveSpeed: 1000
+        pressDelay: 100
+        states: [
+            State {
+                name: "current"
+                PropertyChanges { target: view2; x: 0 }
+            },
+            State {
+                name: "exitLeft"
+                PropertyChanges { target: view2; x: -root.width }
+            },
+            State {
+                name: "exitRight"
+                PropertyChanges { target: view2; x: root.width }
+            }
+        ]
+        transitions: [
+            Transition {
+                to: "current"
+                SequentialAnimation {
+                    NumberAnimation { properties: "x"; duration: 250 }
+                }
+            },
+            Transition {
+                NumberAnimation { properties: "x"; duration: 250 }
+            }
+        ]
+        Keys.onPressed: { root.keyPressed = true; }
+    }
+
+    Keys.onPressed: {
+        root.keyPressed = true;
+        if (event.key == Qt.Key_Return || event.key == Qt.Key_Select || event.key == Qt.Key_Right) {
+            view.currentItem.launch();
+            event.accepted = true;
+        } else if (event.key == Qt.Key_Left) {
+            up();
+        }
+    }
+
+    BorderImage {
+        source: "images/titlebar.sci";
+        width: parent.width;
+        height: 52
+        y: -7
+        id: titleBar
+
+        Rectangle {
+            id: upButton
+            width: 48
+            height: titleBar.height - 7
+            color: "transparent"
+
+            Image { anchors.centerIn: parent; source: "images/up.png" }
+            MouseArea { id: upRegion; anchors.centerIn: parent
+                width: 56
+                height: 56
+                onClicked: if (folders.parentFolder != "") up()
+            }
+            states: [
+                State {
+                    name: "pressed"
+                    when: upRegion.pressed
+                    PropertyChanges { target: upButton; color: palette.highlight }
+                }
+            ]
+        }
+        Rectangle {
+            color: "gray"
+            x: 48
+            width: 1
+            height: 44
+        }
+
+        Text {
+            anchors.left: upButton.right; anchors.right: parent.right; height: parent.height
+            anchors.leftMargin: 4; anchors.rightMargin: 4
+            text: folders.folder
+            color: "white"
+            elide: Text.ElideLeft; horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignVCenter
+            font.pixelSize: 32
+        }
+    }
+}
diff --git a/tools/qml/browser/browser.qrc b/tools/qml/browser/browser.qrc
new file mode 100644
index 0000000..9c688e7
--- /dev/null
+++ b/tools/qml/browser/browser.qrc
@@ -0,0 +1,9 @@
+<RCC>
+    <qresource prefix="/browser">
+        <file>Browser.qml</file>
+        <file>images/up.png</file>
+        <file>images/folder.png</file>
+        <file>images/titlebar.sci</file>
+        <file>images/titlebar.png</file>
+    </qresource>
+</RCC>
diff --git a/tools/qml/browser/images/folder.png b/tools/qml/browser/images/folder.png
new file mode 100644
index 0000000..e53e2ad
--- /dev/null
+++ b/tools/qml/browser/images/folder.png
diff --git a/tools/qml/browser/images/titlebar.png b/tools/qml/browser/images/titlebar.png
new file mode 100644
index 0000000..51c9008
--- /dev/null
+++ b/tools/qml/browser/images/titlebar.png
diff --git a/tools/qml/browser/images/titlebar.sci b/tools/qml/browser/images/titlebar.sci
new file mode 100644
index 0000000..0418d94
--- /dev/null
+++ b/tools/qml/browser/images/titlebar.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 12
+border.bottom: 12
+border.right: 10
+source: titlebar.png
diff --git a/tools/qml/browser/images/up.png b/tools/qml/browser/images/up.png
new file mode 100644
index 0000000..b05f802
--- /dev/null
+++ b/tools/qml/browser/images/up.png