Move file attach DnD to MessagesView.

src/i18n/de.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/en.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "Drag file here",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": false,
+    "obsolete": false
   }
 }

src/i18n/es.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ex/base-en.json

@@ -239,6 +239,10 @@
     "defaultMessage": "Unsupported",
     "description": "Unsupported entity in drafty"
   },
+  "drag_file": {
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner"
+  },
   "editing_message": {
     "defaultMessage": "Editing",
     "description": "Title over message editing preview"

src/i18n/fr.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ko.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ro.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/ru.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh-TW.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/i18n/zh.json

@@ -1521,5 +1521,12 @@
     "description": "Icon tool tip for sending a message",
     "missing": false,
     "obsolete": false
+  },
+  "drag_file": {
+    "translation": "",
+    "defaultMessage": "Drag file here",
+    "description": "Prompt on the file drag-n-drop overlay banner",
+    "missing": true,
+    "obsolete": false
   }
 }

src/views/messages-view.jsx

@@ -9,6 +9,7 @@ import CallPanel from '../widgets/call-panel.jsx';
 import ChatMessage from '../widgets/chat-message.jsx';
 import ContactBadges from '../widgets/contact-badges.jsx';
 import DocPreview from '../widgets/doc-preview.jsx';
+import DragAndDrop from '../widgets/drag-and-drop.jsx'
 import ErrorPanel from '../widgets/error-panel.jsx';
 import GroupSubs from '../widgets/group-subs.jsx';
 import ImagePreview from '../widgets/image-preview.jsx';
@@ -67,6 +68,11 @@ const messages = defineMessages({
     id: 'editing_message',
     defaultMessage: 'Editing',
     description: 'Title over message editing preview'
+  },
+  drag_file: {
+    id: 'drag_file',
+    defaultMessage: 'Drag file here',
+    description: 'Prompt on the file drag-n-drop overlay banner'
   }
 });
 
@@ -128,6 +134,7 @@ class MessagesView extends React.Component {
     this.postReadNotification = this.postReadNotification.bind(this);
     this.clearNotificationQueue = this.clearNotificationQueue.bind(this);
     this.goToLatestMessage = this.goToLatestMessage.bind(this);
+    this.handleFileDrop = this.handleFileDrop.bind(this);
 
     this.handlePickReply = this.handlePickReply.bind(this);
     this.handleEditMessage = this.handleEditMessage.bind(this);
@@ -940,6 +947,19 @@ class MessagesView extends React.Component {
       });
   }
 
+  // handleFileDrop is called when the user drags & drops a file upon the message view.
+  handleFileDrop(files) {
+    if (!files || files.length == 0) {
+      return;
+    }
+    const file = files[0];
+    if (file.type && file.type.startsWith('image/')) {
+      this.handleAttachImage(file);
+    } else {
+      this.handleAttachFile(file);
+    }
+  }
+
   // sendAudioAttachment sends audio bits inband as Drafty message (no preview).
   sendAudioAttachment(url, preview, duration) {
     fetch(url)
@@ -1253,51 +1273,8 @@ class MessagesView extends React.Component {
 
         const titleClass = 'panel-title' + (this.state.deleted ? ' deleted' : '');
 
-        component2 = (
+        let messagesComponent = (
           <>
-            <div id="topic-caption-panel" className="caption-panel">
-              {this.props.displayMobile ?
-                <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
-                  <i className="material-icons">arrow_back</i>
-                </a>
-                :
-                null}
-              <div className="avatar-box">
-                <LetterTile
-                  tinode={this.props.tinode}
-                  avatar={avatar}
-                  topic={this.state.topic}
-                  title={this.state.title}
-                  deleted={this.state.deleted} />
-                {!isChannel ? <span className={online} /> : null}
-              </div>
-              <div id="topic-title-group">
-                <div id="topic-title" className={titleClass}>{
-                  this.state.title ||
-                  <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
-                    description="Title shown when the topic has no name" /></i>
-                }<ContactBadges badges={icon_badges} /></div>
-                <div id="topic-last-seen">{lastSeen}</div>
-              </div>
-              {groupTopic ?
-                <GroupSubs
-                  tinode={this.props.tinode}
-                  subscribers={this.state.onlineSubs} /> :
-                <div id="topic-users" />
-              }
-              <div>
-                <a href="#" onClick={this.handleContextClick}>
-                  <i className="material-icons">more_vert</i>
-                </a>
-              </div>
-            </div>
-            {this.props.displayMobile ?
-              <ErrorPanel
-                level={this.props.errorLevel}
-                text={this.props.errorText}
-                onClearError={this.props.onError} />
-              : null}
-            <LoadSpinner show={this.state.fetchingMessages} />
             <div id="messages-container">
               <button className={'action-button' + (this.state.showGoToLastButton ? '' : ' hidden')}
                 onClick={this.goToLatestMessage}>
@@ -1348,6 +1325,57 @@ class MessagesView extends React.Component {
                 onCancelReply={this.handleCancelReply} />}
           </>
         );
+
+        component2 = (
+          <>
+            <div id="topic-caption-panel" className="caption-panel">
+              {this.props.displayMobile ?
+                <a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
+                  <i className="material-icons">arrow_back</i>
+                </a>
+                :
+                null}
+              <div className="avatar-box">
+                <LetterTile
+                  tinode={this.props.tinode}
+                  avatar={avatar}
+                  topic={this.state.topic}
+                  title={this.state.title}
+                  deleted={this.state.deleted} />
+                {!isChannel ? <span className={online} /> : null}
+              </div>
+              <div id="topic-title-group">
+                <div id="topic-title" className={titleClass}>{
+                  this.state.title ||
+                  <i><FormattedMessage id="unnamed_topic" defaultMessage="Unnamed"
+                    description="Title shown when the topic has no name" /></i>
+                }<ContactBadges badges={icon_badges} /></div>
+                <div id="topic-last-seen">{lastSeen}</div>
+              </div>
+              {groupTopic ?
+                <GroupSubs
+                  tinode={this.props.tinode}
+                  subscribers={this.state.onlineSubs} /> :
+                <div id="topic-users" />
+              }
+              <div>
+                <a href="#" onClick={this.handleContextClick}>
+                  <i className="material-icons">more_vert</i>
+                </a>
+              </div>
+            </div>
+            {this.props.displayMobile ?
+              <ErrorPanel
+                level={this.props.errorLevel}
+                text={this.props.errorText}
+                onClearError={this.props.onError} />
+              : null}
+            <LoadSpinner show={this.state.fetchingMessages} />
+            {!this.state.unconfirmed && !this.props.forwardMessage ?
+              <DragAndDrop actionPrompt={this.props.intl.formatMessage(messages.drag_file)} onDrop={this.handleFileDrop} >{messagesComponent}</DragAndDrop>
+              : messagesComponent}
+          </>
+        );
       }
       component = <div id="topic-view">{component2}</div>
     }

src/widgets/drag-and-drop.jsx

@@ -1,7 +1,7 @@
 // Drag & drop container: displays a banner on drag and calls a handler on drop.
 import React from 'react';
 
-export default class DragAndDrop extends React.Component {
+export default class DragAndDrop extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {

src/widgets/send-message.jsx

@@ -7,8 +7,6 @@ import { Drafty } from 'tinode-sdk';
 // a dependency on webm-duration-fix.
 const AudioRecorder = React.lazy(_ => import('./audio-recorder.jsx'));
 
-import DragAndDrop from './drag-and-drop.jsx';
-
 import { KEYPRESS_DELAY } from '../config.js';
 import { filePasted } from '../lib/blob-helpers.js';
 import { replyFormatter } from '../lib/formatters.js';
@@ -243,13 +241,6 @@ class SendMessage extends React.PureComponent {
         {this.state.quote}
       </div>) : null;
     const audioEnabled = this.state.audioAvailable && this.props.onAttachAudio;
-    const inputField = (<textarea id="sendMessage" placeholder={prompt}
-      value={this.state.message} onChange={this.handleMessageTyping}
-      onKeyPress={this.handleKeyPress}
-      ref={(ref) => {this.messageEditArea = ref;}}
-      autoFocus />);
-    const inputArea = this.props.onAttachFile ?
-      (<DragAndDrop actionPrompt={formatMessage(messages.icon_title_attach_file)} onDrop={this.handleDropAttach}>{inputField}</DragAndDrop>) : {inputField};
     return (
       <div id="send-message-wrapper">
         {!this.props.noInput ? quote : null}
@@ -276,7 +267,11 @@ class SendMessage extends React.PureComponent {
                       onDeleted={_ => this.setState({audioRec: false})}
                       onFinished={this.handleAttachAudio}/>
                   </Suspense>) :
-                  inputArea)}
+                  <textarea id="sendMessage" placeholder={prompt}
+                    value={this.state.message} onChange={this.handleMessageTyping}
+                    onKeyPress={this.handleKeyPress}
+                    ref={(ref) => {this.messageEditArea = ref;}}
+                    autoFocus />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title={formatMessage(messages.icon_title_send)}>
                   <i className="material-icons">{sendIcon}</i>