feat(DropZone): new DropZone component, supports filedialog and DropArea

tests/languages/en.ts

@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
 <TS version="2.1">
+<context>
+    <name>DropZone</name>
+    <message>
+        <source>fileChooserTitle</source>
+        <translation>Please choose one or many files</translation>
+    </message>
+</context>
 <context>
     <name>SelectContact</name>
     <message>

tests/languages/fr.ts

@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE TS>
 <TS version="2.1">
+<context>
+    <name>DropZone</name>
+    <message>
+        <source>fileChooserTitle</source>
+        <translation>Merci de choisir un ou plusieurs fichiers</translation>
+    </message>
+</context>
 <context>
     <name>SelectContact</name>
     <message>

tests/resources.qrc

@@ -11,7 +11,8 @@
   <file>ui/components/dialog/DialogDescription.qml</file>
   <file>ui/components/dialog/DialogPlus.qml</file>
   <file>ui/components/form/DarkButton.qml</file>
-  <file>ui/components/form/DialogCheckBox.qml</file>
+  <file>ui/components/form/CheckBoxText.qml</file>
+  <file>ui/components/form/DropZone.qml</file>
   <file>ui/components/form/ExclusiveButtons.qml</file>
   <file>ui/components/form/LightButton.qml</file>
   <file>ui/components/form/SmallButton.qml</file>

tests/ui/components/contact/Avatar.qml

@@ -19,7 +19,7 @@ Item {
     Text {
         anchors.centerIn: parent
         color: '#FFFFFF'
-        text: (function () {
+        text: {
             var spaceIndex = username.indexOf(' ')
             var firstLetter = username.charAt(0)
 
@@ -28,7 +28,7 @@ Item {
             }
 
             return firstLetter + username.charAt(spaceIndex + 1)
-        })()
+        }
     }
 
     Image {

tests/ui/components/form/CheckBoxText.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+// ===================================================================
+// Checkbox with clickable text.
 // ===================================================================
 
 CheckBox {

tests/ui/components/form/DropZone.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.7
+import QtQuick.Dialogs 1.2
+
+// ===================================================================
+
+Rectangle {
+    signal dropped (variant files)
+
+    color: '#DDDDDD'
+    id: dropZone
+
+    function emitFiles (files) {
+        // Filtering files, urls are forbidden.
+        files = files.reduce(function (files, file) {
+            var result = file.match(/^file:\/\/(.*)/)
+
+            if (result) {
+                files.push(result[1])
+            }
+
+            return files
+        }, [])
+
+        if (files.length > 0) {
+            dropped(files)
+        }
+    }
+
+    DropArea {
+        anchors.fill: parent
+
+        onDropped: {
+            dropZone.state = ''
+            if (drop.hasUrls) {
+                emitFiles(drop.urls)
+            }
+        }
+        onEntered: dropZone.state = 'hover'
+        onExited: dropZone.state = ''
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: fileDialog.visible = true
+    }
+
+    Image {
+        anchors.centerIn: parent
+        fillMode: Image.PreserveAspectFit
+        height: parent.height
+        source: 'qrc:/imgs/chat_attachment.svg'
+        width: parent.width
+    }
+
+    FileDialog {
+        folder: shortcuts.home
+        id: fileDialog
+        title: qsTr('fileChooserTitle')
+
+        onAccepted: emitFiles(fileDialog.fileUrls)
+    }
+
+    states: State {
+        name: 'hover'
+        PropertyChanges { target: dropZone; color: '#BBBBBB' }
+    }
+}

tests/ui/components/form/ExclusiveButtons.qml

@@ -6,7 +6,7 @@ Row {
     property int selectedButton: 0
     property variant texts
 
-    signal buttonChanged (int button)
+    signal clicked (int button)
 
     spacing: 8
 
@@ -26,7 +26,7 @@ Row {
             onClicked: {
                 if (selectedButton !== index) {
                     selectedButton = index
-                    buttonChanged(index)
+                    clicked(index)
                 }
             }
         }

tests/ui/components/form/TransparentComboBox.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.7
 import QtQuick.Controls 2.0
 
+// ===================================================================
+// Discrete ComboBox which can be integrated in text.
 // ===================================================================
 
 ComboBox {

tests/ui/views/mainWindow/conversation.qml

@@ -130,6 +130,7 @@ ColumnLayout  {
         }
     }
 
+    // Send area.
     Rectangle {
         Layout.fillWidth: true
         Layout.preferredHeight: 70
@@ -140,7 +141,6 @@ ColumnLayout  {
         RowLayout {
             anchors.fill: parent
 
-            // Message to send.
             Flickable {
                 Layout.preferredHeight: parent.height
                 Layout.fillWidth: true
@@ -151,24 +151,9 @@ ColumnLayout  {
                 }
             }
 
-            // DropArea.
-            Rectangle {
+            DropZone {
                 Layout.preferredHeight: parent.height - newMessageArea.border.width * 2
                 Layout.preferredWidth: 40
-                color: '#DDDDDD'
-
-                DropArea {
-                    anchors.fill: parent
-                }
-
-                Image {
-                    anchors.right: parent.right
-                    anchors.top: parent.top
-                    fillMode: Image.PreserveAspectFit
-                    height: parent.height
-                    source: 'qrc:/imgs/chat_attachment.svg'
-                    width: parent.width
-                }
             }
         }
     }

tests/ui/views/mainWindow/home.qml

@@ -59,7 +59,7 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: 70
 
-        DialogCheckBox {
+        CheckBoxText {
             anchors.left: parent.left
             anchors.leftMargin: 50
             anchors.verticalCenter: parent.verticalCenter