add colorbrowser qml example

This example shows how to use qml packages to animate between pathview, gridview and listview.

5 files changed, 311 insertions, 0 deletions

diff --git a/examples/declarative/colorbrowser/colorbrowser.qml b/examples/declarative/colorbrowser/colorbrowser.qml
new file mode 100644
index 0000000..ebd49c6
--- /dev/null
+++ b/examples/declarative/colorbrowser/colorbrowser.qml
@@ -0,0 +1,101 @@
+import Qt 4.6
+import 'qml'
+
+Rectangle {
+    id: mainWindow
+    width: 800; height: 480; color: '#454545'
+
+    VisualDataModel { id: colorsVisualModel; delegate: colorsDelegate; model: ColorsModel }
+
+    Component {
+        id: colorsDelegate
+        Package {
+
+            Item {
+                Package.name: 'grid'
+                GridView {
+                    id: gridView; model: visualModel.parts.grid; width: mainWindow.width; height: mainWindow.height
+                    cellWidth: 160; cellHeight: 160; interactive: false
+                    onCurrentIndexChanged: listView.positionViewAtIndex(currentIndex)
+                }
+            }
+
+            Item {
+                Package.name: 'fullscreen'
+                ListView {
+                    id: listView; model: visualModel.parts.list; orientation: Qt.Horizontal
+                    width: mainWindow.width; height: mainWindow.height; interactive: false
+                    onCurrentIndexChanged: gridView.positionViewAtIndex(currentIndex)
+                    highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem
+                }
+            }
+
+            Item {
+                Package.name: 'stack'
+                id: wrapper
+                width: 260; height: 240
+
+                VisualDataModel { id: visualModel; model: colors; delegate: ColorDelegate {} }
+
+                PathView {
+                    id: pathView; model: visualModel.parts.stack; anchors.centerIn: parent
+                    pathItemCount: 3
+                    path: Path {
+                        PathAttribute { name: 'z'; value: 9999.0 }
+                        PathLine { x: 1; y: 1 }
+                        PathAttribute { name: 'z'; value: 0.0 }
+                    }
+                }
+
+                Item {
+                    anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 20
+                    width: albumTitle.width + 20 ; height: albumTitle.height + 4
+                    Text { id: albumTitle; text: name; color: 'white'; font.bold: true; anchors.centerIn: parent }
+                }
+
+                MouseRegion { anchors.fill: parent; onClicked: wrapper.state = 'inGrid' }
+
+                states: [
+                State {
+                    name: 'inGrid'
+                    PropertyChanges { target: gridView; interactive: true }
+                    PropertyChanges { target: shade; opacity: 1 }
+                },
+                State {
+                    name: 'fullscreen'; extend: 'inGrid'
+                    PropertyChanges { target: gridView; interactive: false }
+                    PropertyChanges { target: listView; interactive: true }
+                    PropertyChanges { target: infobox; opacity: 1 }
+                }
+                ]
+
+                transitions: [
+                    Transition {
+                        from: ''; to: 'inGrid'; reversible: true
+                        NumberAnimation { target: shade; properties: 'opacity'; duration: 300 }
+                    },
+                    Transition {
+                        from: 'inGrid'; to: 'fullscreen'; reversible: true
+                        SequentialAnimation {
+                            PauseAnimation { duration: 300 }
+                            NumberAnimation { target: infobox; properties: 'opacity'; duration: 300 }
+                        }
+                    }
+                ]
+            }
+        }
+    }
+
+    GridView { width: parent.width; height: parent.height; cellWidth: 260; cellHeight: 240; model: colorsVisualModel.parts.stack }
+    Rectangle { id: shade; color: '#454545'; width: parent.width; height: parent.height; opacity: 0 }
+    ListView { anchors.fill: parent; model: colorsVisualModel.parts.grid; interactive: false }
+    ListView { anchors.fill: parent; model: colorsVisualModel.parts.fullscreen; interactive: false }
+    Item { id: foreground; anchors.fill: parent }
+
+    Column {
+        id: infobox; opacity: 0
+        anchors { left: parent.left; leftMargin: 20; bottom: parent.bottom; bottomMargin: 20 }
+        Text { id: infoColorName; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 18 }
+        Text { id: infoColorHex; color: '#eeeeee'; style: Text.Outline; styleColor: '#222222'; font.pointSize: 14 }
+    }
+}
diff --git a/examples/declarative/colorbrowser/dummydata/ColorsModel.qml b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml
new file mode 100644
index 0000000..eefbcfe
--- /dev/null
+++ b/examples/declarative/colorbrowser/dummydata/ColorsModel.qml
@@ -0,0 +1,96 @@
+import Qt 4.6
+
+ListModel {
+    id: colorsModel
+
+    ListElement {
+        name: "Reds"
+        colors: [
+            ListElement { name: "Fire Brick"; hex: "#B22222" },
+            ListElement { name: "Fire Brick 1"; hex: "#FF3030" },
+            ListElement { name: "Fire Brick 2"; hex: "#EE2C2C" },
+            ListElement { name: "Fire Brick 3"; hex: "#CD2626" },
+            ListElement { name: "Fire Brick 4"; hex: "#8B1A1A" },
+            ListElement { name: "Red"; hex: "#FF0000" },
+            ListElement { name: "Red 2"; hex: "#EE0000" },
+            ListElement { name: "Red 3"; hex: "#CD0000" },
+            ListElement { name: "Red 4"; hex: "#8B0000" },
+            ListElement { name: "Tomato"; hex: "#FF6347" },
+            ListElement { name: "Tomato 2"; hex: "#EE5C42" },
+            ListElement { name: "Tomato 3"; hex: "#CD4F39" },
+            ListElement { name: "Tomato 4"; hex: "#8B3626" },
+            ListElement { name: "Orange Red"; hex: "#FF4500" },
+            ListElement { name: "Orange Red 2"; hex: "#EE4000" },
+            ListElement { name: "Orange Red 3"; hex: "#CD3700" },
+            ListElement { name: "Orange Red 4"; hex: "#8B2500" },
+            ListElement { name: "Indian Red 2"; hex: "#EE6363" },
+            ListElement { name: "Indian Red 3"; hex: "#CD5555" },
+            ListElement { name: "Indian Red 4"; hex: "#8B3A3A" },
+            ListElement { name: "Brown"; hex: "#A52A2A" },
+            ListElement { name: "Brown 1"; hex: "#FF4040" },
+            ListElement { name: "Brown 2"; hex: "#EE3B3B" },
+            ListElement { name: "Brown 3"; hex: "#CD3333" },
+            ListElement { name: "Brown 4"; hex: "#8B2323" }
+        ]
+    }
+    ListElement {
+        name: "Greens"
+        colors: [
+            ListElement { name: "Green"; hex: "#008000" },
+            ListElement { name: "Green 2"; hex: "#00EE00" },
+            ListElement { name: "Green 3"; hex: "#00CD00" },
+            ListElement { name: "Green 4"; hex: "#008B00" },
+            ListElement { name: "Dark Green"; hex: "#006400" },
+            ListElement { name: "Sap Green"; hex: "#308014" },
+            ListElement { name: "Medium Spring Green"; hex: "#00FA9A" },
+            ListElement { name: "Spring Green"; hex: "#00FF7F" },
+            ListElement { name: "Spring Green 1"; hex: "#00EE76" },
+            ListElement { name: "Spring Green 2"; hex: "#00CD66" },
+            ListElement { name: "Spring Green 3"; hex: "#008B45" },
+            ListElement { name: "Medium Sea Green"; hex: "#3CB371" },
+            ListElement { name: "Sea Green 1"; hex: "#54FF9F" },
+            ListElement { name: "Sea Green 2"; hex: "#4EEE94" },
+            ListElement { name: "Sea Green 3"; hex: "#43CD80" },
+            ListElement { name: "Sea Green 4"; hex: "#2E8B57" },
+            ListElement { name: "Emerald Green"; hex: "#00C957" },
+            ListElement { name: "Mint"; hex: "#BDFCC9" },
+            ListElement { name: "Cobalt Green"; hex: "#3D9140" },
+            ListElement { name: "Dark Sea Green"; hex: "#8FBC8F" },
+            ListElement { name: "Dark Sea Green 1"; hex: "#C1FFC1" },
+            ListElement { name: "Dark Sea Green 2"; hex: "#B4EEB4" },
+            ListElement { name: "Dark Sea Green 3"; hex: "#9BCD9B" },
+            ListElement { name: "Dark Sea Green 4"; hex: "#698B69" },
+            ListElement { name: "Lime Green"; hex: "#00FF00" }
+        ]
+    }
+    ListElement {
+        name: "Blues"
+        colors: [
+            ListElement { name: "Dark Slate Blue"; hex: "#483D8B" },
+            ListElement { name: "Light Slate Blue"; hex: "#8470FF" },
+            ListElement { name: "Medium Slate Blue"; hex: "#7B68EE" },
+            ListElement { name: "Slate Blue"; hex: "#6A5ACD" },
+            ListElement { name: "Blue"; hex: "#0000FF" },
+            ListElement { name: "Midnight Blue"; hex: "#191970" },
+            ListElement { name: "Cobalt"; hex: "#3D59AB" },
+            ListElement { name: "Royal Blue"; hex: "#4169E1" },
+            ListElement { name: "Corn Flower Blue"; hex: "#6495ED" },
+            ListElement { name: "Light Steel Blue"; hex: "#B0C4DE" },
+            ListElement { name: "Light Steel Blue 1"; hex: "#CAE1FF" },
+            ListElement { name: "Light Steel Blue 2"; hex: "#BCD2EE" },
+            ListElement { name: "Light Steel Blue 3"; hex: "#A2B5CD" },
+            ListElement { name: "Dodger Blue"; hex: "#1E90FF" },
+            ListElement { name: "Dodger Blue 2"; hex: "#1C86EE" },
+            ListElement { name: "Dodger Blue 3"; hex: "#1874CD" },
+            ListElement { name: "Dodger Blue 4"; hex: "#104E8B" },
+            ListElement { name: "Steel Blue"; hex: "#4682B4" },
+            ListElement { name: "Light Sky Blue"; hex: "#87CEFA" },
+            ListElement { name: "Sky Blue"; hex: "#87CEEB" },
+            ListElement { name: "Peacock"; hex: "#33A1C9" },
+            ListElement { name: "Light Blue"; hex: "#ADD8E6" },
+            ListElement { name: "Powder Blue"; hex: "#B0E0E6" },
+            ListElement { name: "Cadet Blue"; hex: "#5F9EA0" },
+            ListElement { name: "Cyan"; hex: "#00FFFF" }
+        ]
+    }
+}
diff --git a/examples/declarative/colorbrowser/qml/ColorDelegate.qml b/examples/declarative/colorbrowser/qml/ColorDelegate.qml
new file mode 100644
index 0000000..605e45b
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/ColorDelegate.qml
@@ -0,0 +1,114 @@
+import Qt 4.6
+
+Package {
+    Item { id: stack; Package.name: 'stack'; width: 110; height: 110; z: stack.PathView.z }
+    Item { id: list; Package.name: 'list'; width: mainWindow.width + 4; height: 110 }
+    Item { id: grid; Package.name: 'grid'; width: 110; height: 110 }
+
+    Item {
+        id: delegate
+
+        property double randomAngle: Math.random() * (2 * 8 + 1) - 8
+        property bool open: false
+
+        width: 110; height: 110; z: stack.PathView.z
+
+        Image { x: -6; y: -5; source: 'box-shadow.png'; smooth: true;  }
+        Rectangle { color: hex; anchors.fill: parent; smooth: true }
+        Image { id: box; source: 'box.png'; smooth: true; anchors.fill: parent }
+
+        Binding {
+            target: infoColorName; property: 'text'
+            value: name; when: delegate.open && list.ListView.isCurrentItem
+        }
+
+        Binding {
+            target: infoColorHex; property: 'text'
+            value: hex; when: delegate.open && list.ListView.isCurrentItem
+        }
+
+        MouseRegion {
+            anchors.fill: parent
+            acceptedButtons: Qt.RightButton | Qt.LeftButton
+            onClicked: {
+                if (wrapper.state == 'inGrid' && mouse.button == Qt.RightButton) {
+                    wrapper.state = ''
+                } else if (wrapper.state == 'inGrid') {
+                    grid.GridView.view.currentIndex = index;
+                    wrapper.state = 'fullscreen'
+                } else {
+                    grid.GridView.view.currentIndex = index;
+                    wrapper.state = 'inGrid'
+                }
+            }
+        }
+
+        states: [
+        State {
+            name: 'stacked'; when: wrapper.state == ''
+            ParentChange { target: delegate; parent: stack; x: 0; y: 0; rotation: delegate.randomAngle }
+            PropertyChanges { target: delegate; visible: stack.PathView.onPath ? 1.0 : 0.0 }
+        },
+        State {
+            name: 'inGrid'; when: wrapper.state == 'inGrid'
+            ParentChange { target: delegate; parent: grid; x: 24; y: 24 }
+            PropertyChanges { target: delegate; open: true }
+        },
+        State {
+            name: 'fullscreen'; when: wrapper.state == 'fullscreen'
+            ParentChange { target: delegate; parent: list; x: 0; y: 0; width: mainWindow.width; height: mainWindow.height }
+            PropertyChanges { target: box; opacity: 0 }
+            PropertyChanges { target: delegate; open: true }
+        }
+        ]
+
+        transitions: [
+        Transition {
+            from: 'stacked'; to: 'inGrid'
+            SequentialAnimation {
+                PauseAnimation { duration: 20 * index }
+                ParentAnimation {
+                    target: delegate; via: foreground
+                    NumberAnimation { targets: delegate; properties: 'x,y,width,height,rotation'; duration: 600; easing.type: 'OutBack' }
+                }
+            }
+        },
+        Transition {
+            from: 'inGrid'; to: 'stacked'
+            ParentAnimation {
+                target: delegate; via: foreground
+                NumberAnimation { properties: 'x,y,width,height,rotation'; duration: 300; easing.type: 'InOutQuad' }
+            }
+        },
+        Transition {
+            from: 'inGrid'; to: 'fullscreen'
+            SequentialAnimation {
+                PauseAnimation { duration: grid.GridView.isCurrentItem ? 0 : 300 }
+                ParentAnimation {
+                    target: delegate; via: foreground
+                    NumberAnimation {
+                        properties: 'x,y,width,height,opacity'
+                        duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad'
+                    }
+                }
+            }
+        },
+        Transition {
+            from: 'fullscreen'; to: 'inGrid'
+            SequentialAnimation {
+                PauseAnimation { duration: grid.GridView.isCurrentItem ? 3 : 0 }
+                ParallelAnimation {
+                    ParentAnimation {
+                        target: delegate; via: foreground
+                        NumberAnimation {
+                            properties: 'x,y,width,height'
+                            duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad'
+                        }
+                    }
+                    NumberAnimation { properties: 'opacity'; duration: grid.GridView.isCurrentItem ? 300 : 1; easing.type: 'InOutQuad' }
+                }
+            }
+        }
+        ]
+    }
+}
diff --git a/examples/declarative/colorbrowser/qml/box-shadow.png b/examples/declarative/colorbrowser/qml/box-shadow.png
new file mode 100644
index 0000000..3281a37
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/box-shadow.png
diff --git a/examples/declarative/colorbrowser/qml/box.png b/examples/declarative/colorbrowser/qml/box.png
new file mode 100644
index 0000000..86538aa
--- /dev/null
+++ b/examples/declarative/colorbrowser/qml/box.png