fix(DroppableTextArea): nice features, supports drag and drop/button click to select file

tests/languages/en.ts

@@ -105,7 +105,18 @@
     <name>DropZone</name>
     <message>
         <source>fileChooserTitle</source>
-        <translation>Please choose one or many files</translation>
+        <translation type="vanished">Please choose one or many files</translation>
+    </message>
+</context>
+<context>
+    <name>DroppableTextArea</name>
+    <message>
+        <source>fileChooserTitle</source>
+        <translation type="unfinished">Please choose one or many files</translation>
+    </message>
+    <message>
+        <source>DROP YOUR ATTACHMENT</source>
+        <translation type="unfinished"></translation>
     </message>
 </context>
 <context>

tests/languages/fr.ts

@@ -105,7 +105,18 @@
     <name>DropZone</name>
     <message>
         <source>fileChooserTitle</source>
-        <translation>Merci de choisir un ou plusieurs fichiers</translation>
+        <translation type="vanished">Merci de choisir un ou plusieurs fichiers</translation>
+    </message>
+</context>
+<context>
+    <name>DroppableTextArea</name>
+    <message>
+        <source>fileChooserTitle</source>
+        <translation type="unfinished">Merci de choisir un ou plusieurs fichiers</translation>
+    </message>
+    <message>
+        <source>DROP YOUR ATTACHMENT</source>
+        <translation type="unfinished"></translation>
     </message>
 </context>
 <context>

tests/resources.qrc

@@ -34,7 +34,6 @@
     <file>ui/modules/Common/Dialog/DialogDescription.qml</file>
     <file>ui/modules/Common/Dialog/DialogPlus.qml</file>
     <file>ui/modules/Common/DroppableTextArea.qml</file>
-    <file>ui/modules/Common/DropZone.qml</file>
     <file>ui/modules/Common/ForceScrollBar.qml</file>
     <file>ui/modules/Common/Form/AbstractTextButton.qml</file>
     <file>ui/modules/Common/Form/ActionBar.qml</file>

tests/ui/modules/Common/Borders.qml

 import QtQuick 2.7
 
+// ===================================================================
+// Alternative to rectangle border which is a limited feature.
+// Allow the use of different borders (size, color...) for each
+// rectangle side.
 // ===================================================================
 
 Item {

tests/ui/modules/Common/DropZone.qml

-import QtQuick 2.7
-import QtQuick.Dialogs 1.2
-
-// ===================================================================
-
-Rectangle {
-  signal dropped (var 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/modules/Common/DroppableTextArea.qml

 import QtQuick 2.7
 import QtQuick.Controls 2.0
-import QtQuick.Layouts 1.3
+import QtQuick.Dialogs 1.2
+
+import Common.Styles 1.0
+
+Item {
+  signal dropped (var files)
 
-RowLayout {
   property alias placeholderText: textArea.placeholderText
 
+  function _emitFiles (files) {
+    // Filtering files, other 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)
+    }
+  }
+
+  // Text area.
   Flickable {
-    Layout.preferredHeight: parent.height
-    Layout.fillWidth: true
-    ScrollBar.vertical: ScrollBar { }
+    ScrollBar.vertical: ForceScrollBar {
+      id: scrollBar
+    }
     TextArea.flickable: TextArea {
       id: textArea
 
+      rightPadding: fileChooserButton.width + fileChooserButton.anchors.rightMargin + 6
       wrapMode: TextArea.Wrap
     }
+    anchors.fill: parent
+  }
+
+  // Handle click to select files.
+  MouseArea {
+    id: fileChooserButton
+
+    anchors {
+      right: parent.right
+      rightMargin: scrollBar.width + 6
+    }
+
+    height: parent.height
+    width: 40
+
+    onClicked: fileDialog.open()
+
+    FileDialog {
+      id: fileDialog
+
+      folder: shortcuts.home
+      title: qsTr('fileChooserTitle')
+
+      onAccepted: _emitFiles(fileDialog.fileUrls)
+    }
+
+    Icon {
+      anchors.fill: parent
+      fillMode: Image.PreserveAspectFit
+      icon: 'chat_attachment'
+    }
   }
 
-  DropZone {
-    Layout.preferredHeight: parent.height
-    Layout.preferredWidth: 40
+  // Hover style.
+  Rectangle {
+    id: hoverContent
+
+    anchors.fill: parent
+    color: '#FFFFFF'
+    visible: false
+
+    Text {
+      anchors.centerIn: parent
+      color: '#FE5E00'
+      font.pointSize: 11
+      text: qsTr('DROP YOUR ATTACHMENT')
+    }
+  }
+
+  DropArea {
+    anchors.fill: parent
+    keys: [ 'text/uri-list' ]
+
+    onDropped: {
+      state = ''
+      if (drop.hasUrls) {
+        _emitFiles(drop.urls)
+      }
+    }
+    onEntered: state = 'hover'
+    onExited: state = ''
+
+    states: State {
+      name: 'hover'
+      PropertyChanges { target: hoverContent; visible: true }
+    }
   }
 }

tests/ui/modules/Common/qmldir

@@ -21,9 +21,6 @@ Collapse             1.0 Collapse.qml
 ConfirmDialog        1.0 Dialog/ConfirmDialog.qml
 DialogPlus           1.0 Dialog/DialogPlus.qml
 
-# DropZone
-DropZone             1.0 DropZone.qml
-
 # DroppableTextArea
 DroppableTextArea    1.0 DroppableTextArea.qml