Implement Drag n Drop file transfer on the plasmoid

Summary:
A DropArea has been added to the ListItem representing a device in the
plasmoid based on what is done in the Quickshare plasmoid. This enables
Drag n Drop of files onto a section of the plasmoid to transfer files.

The DropArea has the size of the ListItem which is a rectangle
including the title of the device down to the button to share text.
Additionally, there is a tooltip area covering the DropArea to indicate
that it is possible to drop a file to send it to the device. Multiple files
can be sent at once.

Ref T8288

Test Plan: Drag and Drop one or many files onto the widget, the files should be transferred to the connected device.

Reviewers: #kde_connect, sredman

Reviewed By: #kde_connect, sredman

Subscribers: sredman, kdeconnect

Tags: #kde_connect

Maniphest Tasks: T8288

Differential Revision: https://phabricator.kde.org/D17611

plasmoid/package/contents/ui/CompactRepresentation.qml

@@ -0,0 +1,55 @@
+/*
+    Copyright 2014-2015 Frederic St-Pierre <me@fredericstpierre.com>
+
+    This library is free software; you can redistribute it and/or
+    modify it under the terms of the GNU Lesser General Public
+    License as published by the Free Software Foundation; either
+    version 2.1 of the License, or (at your option) version 3, or any
+    later version accepted by the membership of KDE e.V. (or its
+    successor approved by the membership of KDE e.V.), which shall
+    act as a proxy defined in Section 6 of version 3 of the license.
+
+    This library is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+    Lesser General Public License for more details.
+
+    You should have received a copy of the GNU Lesser General Public
+    License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import QtQuick 2.1
+import QtQuick.Layouts 1.1
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 3.0 as PlasmaComponents3
+
+DropArea {
+    readonly property bool inPanel: (plasmoid.location == PlasmaCore.Types.TopEdge
+        || plasmoid.location == PlasmaCore.Types.RightEdge
+        || plasmoid.location == PlasmaCore.Types.BottomEdge
+        || plasmoid.location == PlasmaCore.Types.LeftEdge)
+
+    Layout.maximumWidth: inPanel ? units.iconSizeHints.panel : -1
+    Layout.maximumHeight: inPanel ? units.iconSizeHints.panel : -1
+
+    onEntered: {
+        if (drag.hasUrls) {
+            plasmoid.expanded = true;
+        }
+    }
+
+    MouseArea {
+        id: kdeConnectMouseArea
+        anchors.fill: parent
+
+        onClicked: {
+            plasmoid.expanded = !plasmoid.expanded;
+        }
+    }
+
+    PlasmaCore.IconItem {
+        id: kdeConnectIcon
+        anchors.fill: parent
+        source: plasmoid.icon
+    }
+}

plasmoid/package/contents/ui/DeviceDelegate.qml

@@ -32,6 +32,41 @@ PlasmaComponents.ListItem
     id: root
     readonly property QtObject device: DeviceDbusInterfaceFactory.create(model.deviceId)
 
+    DropArea {
+        id: fileDropArea
+        anchors.fill: parent
+
+        onDropped: {
+            if (drop.hasUrls) {
+
+                var urls = [];
+
+                for (var v in drop.urls) {
+                    if (drop.urls[v] != null) {
+                        if (urls.indexOf(drop.urls[v].toString()) == -1) {
+                            urls.push(drop.urls[v].toString());
+                        }
+                    }
+                }
+
+                var i;
+                for (i = 0; i < urls.length; i++) {
+                    share.plugin.shareUrl(urls[i]);
+                }
+            }
+            drop.accepted = true;
+        }
+
+        PlasmaCore.ToolTipArea {
+            id: dropAreaToolTip
+            anchors.fill: parent
+            location: plasmoid.location
+            active: true
+            mainText: i18n("File Transfer")
+            subText: i18n("Drop a file to transfer it onto your phone.")
+        }
+    }
+
     Column {
         width: parent.width
 

plasmoid/package/contents/ui/main.qml

@@ -45,6 +45,9 @@ Item
         devicesModel: connectDeviceModel
     }
 
+    Plasmoid.compactRepresentation: CompactRepresentation {
+    }
+
     readonly property bool isConstrained: (plasmoid.formFactor == PlasmaCore.Types.Vertical || plasmoid.formFactor == PlasmaCore.Types.Horizontal)
 
     Plasmoid.preferredRepresentation: isConstrained ? Plasmoid.compactRepresentation : Plasmoid.fullRepresentation