Update drag and drop examples to new guidelines

Change-Id: Ib09a50015eaf7e79f21ade5df3cbd3b58b89c83d
Reviewed-by: Andrew den Exter <andrew.den-exter@nokia.com>

9 files changed, 157 insertions, 27 deletions

diff --git a/examples/qtquick/draganddrop/draganddrop.pro b/examples/qtquick/draganddrop/draganddrop.pro
new file mode 100644
index 0000000000..f937039ca2
--- /dev/null
+++ b/examples/qtquick/draganddrop/draganddrop.pro
@@ -0,0 +1,10 @@
+TEMPLATE = app
+
+QT += quick declarative
+SOURCES += main.cpp
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/draganddrop
+qml.files = draganddrop.qml tiles views
+qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/draganddrop
+INSTALLS += target qml
+
diff --git a/examples/qtquick/draganddrop/draganddrop.qml b/examples/qtquick/draganddrop/draganddrop.qml
new file mode 100644
index 0000000000..88e6d5e021
--- /dev/null
+++ b/examples/qtquick/draganddrop/draganddrop.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import "../../shared" as Examples
+
+/*!
+    \title QtQuick Examples - Drag and Drop
+    \example qtquick/draganddrop
+    \brief This is a collection of QML drag and drop examples
+    \image qml-draganddrop-example.png
+
+    This is a collection of small QML examples relating to drag and drop functionality.
+
+    Tiles adds drag and drog to simple rectangles, which you can drag into a specific grid.
+
+    GridView adds drag and drog to a GridView, allowing you to reorder the list.
+*/
+
+Item {
+    height: 480
+    width: 320
+    Examples.LauncherList {
+        id: ll
+        anchors.fill: parent
+        Component.onCompleted: {
+            addExample("Tiles", "",  Qt.resolvedUrl("tiles/tiles.qml"));
+            addExample("GridView", "", Qt.resolvedUrl("views/gridview.qml"));
+        }
+    }
+}
diff --git a/examples/qtquick/draganddrop/dragtarget.qmlproject b/examples/qtquick/draganddrop/draganddrop.qmlproject
index 2bb4016996..b8b15c3444 100644
--- a/examples/qtquick/draganddrop/dragtarget.qmlproject
+++ b/examples/qtquick/draganddrop/draganddrop.qmlproject
@@ -1,7 +1,9 @@
 import QmlProject 1.0
 
 Project {
+    mainFile: "draganddrop.qml"
     /* Include .qml, .js, and image files from current directory and subdirectories */
+
     QmlFiles {
         directory: "."
     }
diff --git a/examples/qtquick/draganddrop/main.cpp b/examples/qtquick/draganddrop/main.cpp
new file mode 100644
index 0000000000..0d74fbfe2e
--- /dev/null
+++ b/examples/qtquick/draganddrop/main.cpp
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "../../shared/shared.h"
+DECLARATIVE_EXAMPLE_MAIN(draganddrop)
diff --git a/examples/qtquick/draganddrop/tiles/DragTile.qml b/examples/qtquick/draganddrop/tiles/DragTile.qml
index 2813fa8caf..1f4a8c2bea 100644
--- a/examples/qtquick/draganddrop/tiles/DragTile.qml
+++ b/examples/qtquick/draganddrop/tiles/DragTile.qml
@@ -44,12 +44,12 @@ Item {
     id: root
     property string colorKey
 
-    width: 100; height: 100
+    width: 64; height: 64
 
     MouseArea {
         id: mouseArea
 
-        width: 100; height: 100
+        width: 64; height: 64
         anchors.centerIn: parent
 
         drag.target: tile
@@ -59,20 +59,21 @@ Item {
         Rectangle {
             id: tile
 
-            width: 100; height: 100
+            width: 64; height: 64
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
 
-            anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter
             color: colorKey
 
             Drag.keys: [ colorKey ]
             Drag.active: mouseArea.drag.active
-            Drag.hotSpot.x: 50
-            Drag.hotSpot.y: 50
+            Drag.hotSpot.x: 32
+            Drag.hotSpot.y: 32
 
             Text {
                 anchors.fill: parent
                 color: "white"
-                font.pixelSize: 90
+                font.pixelSize: 48
                 text: modelData + 1
                 horizontalAlignment:Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
diff --git a/examples/qtquick/draganddrop/tiles/DropTile.qml b/examples/qtquick/draganddrop/tiles/DropTile.qml
index e8566f04cc..98fedeb775 100644
--- a/examples/qtquick/draganddrop/tiles/DropTile.qml
+++ b/examples/qtquick/draganddrop/tiles/DropTile.qml
@@ -46,7 +46,7 @@ DropArea {
     property string colorKey
     property alias dropProxy: dragTarget
 
-    width: 100; height: 100
+    width: 64; height: 64
     keys: [ colorKey ]
 
     Rectangle {
diff --git a/examples/qtquick/draganddrop/tiles/tiles.qml b/examples/qtquick/draganddrop/tiles/tiles.qml
index 31c87f8244..0b5647bc2b 100644
--- a/examples/qtquick/draganddrop/tiles/tiles.qml
+++ b/examples/qtquick/draganddrop/tiles/tiles.qml
@@ -43,8 +43,8 @@ import QtQuick 2.0
 Rectangle {
     id: root
 
-    width: 620
-    height: 410
+    width: 320
+    height: 480
 
     color: "black"
 
@@ -53,8 +53,8 @@ Rectangle {
 
         anchors.left: redSource.right; anchors.top: parent.top;
         anchors.margins: 5
-        width: 300
-        height: 300
+        width: 64*3
+        height: 64*3
         opacity: 0.5
         columns: 3
 
@@ -67,8 +67,8 @@ Rectangle {
     Grid {
         anchors.right: blueSource.left; anchors.bottom: parent.bottom;
         anchors.margins: 5
-        width: 300
-        height: 300
+        width: 64*3
+        height: 64*3
 
         opacity: 0.5
 
@@ -85,8 +85,8 @@ Rectangle {
 
         anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
         anchors.margins: 5
-        width: 100
-        spacing: -60
+        width: 64
+        spacing: -16
 
         Repeater {
             model: 9
@@ -98,8 +98,8 @@ Rectangle {
 
         anchors.right: parent.right; anchors.top: parent.top; anchors.bottom: parent.bottom
         anchors.margins: 5
-        width: 100
-        spacing: -60
+        width: 64
+        spacing: -16
 
         Repeater {
             model: 9
diff --git a/examples/qtquick/draganddrop/views/gridview.qml b/examples/qtquick/draganddrop/views/gridview.qml
index 375f3d2824..04d8dee463 100644
--- a/examples/qtquick/draganddrop/views/gridview.qml
+++ b/examples/qtquick/draganddrop/views/gridview.qml
@@ -42,8 +42,8 @@ import QtQuick 2.0
 
 GridView {
     id: root
-    width: 360; height: 360
-    cellWidth: 90; cellHeight: 90
+    width: 320; height: 480
+    cellWidth: 80; cellHeight: 80
 
     model: VisualDataModel {
         id: visualModel
@@ -61,10 +61,18 @@ GridView {
             ListElement { color: "aquamarine" }
             ListElement { color: "indigo" }
             ListElement { color: "black" }
-            ListElement { color: "chartreuse" }
+            ListElement { color: "lightsteelblue" }
             ListElement { color: "violet" }
             ListElement { color: "grey" }
             ListElement { color: "springgreen" }
+            ListElement { color: "salmon" }
+            ListElement { color: "blanchedalmond" }
+            ListElement { color: "forestgreen" }
+            ListElement { color: "pink" }
+            ListElement { color: "navy" }
+            ListElement { color: "goldenrod" }
+            ListElement { color: "crimson" }
+            ListElement { color: "teal" }
         }
 
         delegate: MouseArea {
@@ -72,12 +80,12 @@ GridView {
 
             property int visualIndex: VisualDataModel.itemsIndex
 
-            width: 90; height: 90
+            width: 80; height: 80
             drag.target: icon
 
             Rectangle {
                 id: icon
-                width: 80; height: 80
+                width: 72; height: 72
                 anchors {
                     horizontalCenter: parent.horizontalCenter;
                     verticalCenter: parent.verticalCenter
@@ -87,8 +95,8 @@ GridView {
 
                 Drag.active: delegateRoot.pressed
                 Drag.source: delegateRoot
-                Drag.hotSpot.x: 40
-                Drag.hotSpot.y: 40
+                Drag.hotSpot.x: 36
+                Drag.hotSpot.y: 36
 
                 states: [
                     State {
diff --git a/examples/qtquick/qtquick.pro b/examples/qtquick/qtquick.pro
index 2ffc377f32..529f65ac25 100644
--- a/examples/qtquick/qtquick.pro
+++ b/examples/qtquick/qtquick.pro
@@ -1,8 +1,8 @@
 TEMPLATE = subdirs
 SUBDIRS = accessibility \
-            animation
+            animation \
+            draganddrop
             #canvas \
-            #draganddrop \
             #imageelements \
             #keyinteraction \
             #modelviews \