Working on adding overlays for file drag and drop

5 files changed, 36 insertions, 15 deletions

diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx
index eb461ae9c..a479883c9 100644
--- a/web/react/components/file_upload.jsx
+++ b/web/react/components/file_upload.jsx
@@ -113,39 +113,31 @@ module.exports = React.createClass({
         var self = this;
 
         if (this.props.postType === 'post') {
-            $('body').on('dragover', '.app__content', function(e) {
+            $('body').on('dragover', '.post-list__table', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
-            $('body').on('dragenter', '.app__content', function(e) {
+            $('body').on('dragenter', '.post-list__table', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
-            $('body').on('dragend dragleave', '.app__content', function(e) {
+            $('body').on('dragleave', '.post-list__table', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
-            $('body').on('drop', '.app__content', function(e) {
+            $('body').on('drop', '.post-list__table', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
                 self.handleDrop(e);
             });
         } else if (this.props.postType === 'comment') {
             $('body').on('dragover', '.sidebar--right', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
             $('body').on('dragenter', '.sidebar--right', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
-            $('body').on('dragend dragleave', '.sidebar--right', function(e) {
+            $('body').on('dragleave', '.sidebar--right', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
             });
             $('body').on('drop', '.sidebar--right', function(e) {
                 e.preventDefault();
-                e.stopPropagation();
                 self.handleDrop(e);
             });
         }
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 4df78817a..cf0c4c663 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -280,6 +280,10 @@ module.exports = React.createClass({
                 }
             );
     },
+    handleDragEnter: function() {
+        console.log("HERE ENTER");
+        this.setState({fileDrag: true});
+    },
     getInitialState: function() {
         return getStateFromStores();
     },
@@ -461,9 +465,14 @@ module.exports = React.createClass({
             postCtls.push(<LoadingScreen position="absolute" />);
         }
 
+        var fileDragOverlay = '';
+        if (this.state.fileDrag) {
+            fileDragOverlay = 'post-list-file-overlay';
+        }
+
         return (
             <div ref="postlist" className="post-list-holder-by-time">
-                <div className="post-list__table">
+                <div className={"post-list__table " + fileDragOverlay} onDragEnter={this.handleDragEnter}>
                     <div className="post-list__content">
                         { more_messages }
                         { postCtls }
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index ad8b54012..f7f5ed509 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -243,6 +243,10 @@ module.exports = React.createClass({
             this.refs[id].forceUpdate();
         }
     },
+    handleDragEnter: function() {
+        console.log("HERE ENTER RIGHT");
+        this.setState({fileDrag: true});
+    },
     getInitialState: function() {
         return getStateFromStores();
     },
@@ -294,8 +298,13 @@ module.exports = React.createClass({
         var currentId = UserStore.getCurrentId();
         var searchForm = currentId == null ? null : <SearchBox />;
 
+        var fileDragOverlay = '';
+        if (this.state.fileDrag) {
+            fileDragOverlay = 'post-right-file-overlay';
+        }
+
         return (
-            <div className="post-right__container">
+            <div className={"post-right__container" + fileDragOverlay} onDragEnter={this.handleDragEnter}>
                 <div className="search-bar__container sidebar--right__search-header">{searchForm}</div>
                 <div className="sidebar-right__body">
                     <RhsHeaderPost fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} />
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 98b17120d..093e10ee0 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -107,6 +107,11 @@ body.ios {
 }
 
 #post-list {
+	.post-list-file-overlay {
+		width: 100%;
+		height: 100%;
+		background:rgba(255,255,255,0.5);
+	}
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss
index 4cf3e32a1..1b98d62f9 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,5 +1,11 @@
 .post-right__container {
 
+	.post-right-file-overlay {
+		width: 100%;
+		height: 100%;
+		background:rgba(255,255,255,0.5);
+	}
+
 	.post-right-root-message {
 		padding: 1em 1em 0;
 	}