summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorYann Bodson <yann.bodson@nokia.com>2010-03-03 05:05:36 (GMT)
committerYann Bodson <yann.bodson@nokia.com>2010-03-03 05:05:36 (GMT)
commit982ea31d6743da63fdcd5b32c14d54d84ab9714a (patch)
treea8d18537fc3e418994e80b8b90d848979b302487 /examples
parenta2c2a287e6c405200ef990f3dddae9d229aac722 (diff)
parent4e5cf3f0936ed921973e451e23414059e1a9fc6b (diff)
downloadQt-982ea31d6743da63fdcd5b32c14d54d84ab9714a.zip
Qt-982ea31d6743da63fdcd5b32c14d54d84ab9714a.tar.gz
Qt-982ea31d6743da63fdcd5b32c14d54d84ab9714a.tar.bz2
Merge branch 'master' into 4.7
Diffstat (limited to 'examples')
-rw-r--r--examples/declarative/colorbrowser/colorbrowser.qml101
-rw-r--r--examples/declarative/colorbrowser/dummydata/ColorsModel.qml96
-rw-r--r--examples/declarative/colorbrowser/qml/ColorDelegate.qml114
-rw-r--r--examples/declarative/colorbrowser/qml/box-shadow.pngbin0 -> 871 bytes
-rw-r--r--examples/declarative/colorbrowser/qml/box.pngbin0 -> 765 bytes
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
Binary files differ
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
Binary files differ