Implements better markup for css changes to be made, including an overlay of the dropzones and help pic/text

7 files changed, 73 insertions, 43 deletions

diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx
index 641a888c7..adf0a9fa8 100644
--- a/web/react/components/file_upload.jsx
+++ b/web/react/components/file_upload.jsx
@@ -144,26 +144,32 @@ module.exports = React.createClass({
         if (this.props.postType === 'post') {
             $('.app__content').dragster({
                 enter: function(dragsterEvent, e) {
-                    $('.app__content').addClass('center-file-overlay');
+                    $('.center-file-overlay').removeClass('invisible');
+                    $('.center-file-overlay').addClass('visible');
                 },
                 leave: function(dragsterEvent, e) {
-                    $('.app__content').removeClass('center-file-overlay');
+                    $('.center-file-overlay').removeClass('visible');
+                    $('.center-file-overlay').addClass('invisible');
                 },
                 drop: function(dragsterEvent, e) {
-                    $('.app__content').removeClass('center-file-overlay');
+                    $('.center-file-overlay').removeClass('visible');
+                    $('.center-file-overlay').addClass('invisible');
                     self.handleDrop(e);
                 }
             });
         } else if (this.props.postType === 'comment') {
             $('.post-right__container').dragster({
                 enter: function(dragsterEvent, e) {
-                    $('.post-right__container').addClass('right-file-overlay');
+                    $('.right-file-overlay').removeClass('invisible');
+                    $('.right-file-overlay').addClass('visible');
                 },
                 leave: function(dragsterEvent, e) {
-                    $('.post-right__container').removeClass('right-file-overlay');
+                    $('.right-file-overlay').removeClass('visible');
+                    $('.right-file-overlay').addClass('invisible');
                 },
                 drop: function(dragsterEvent, e) {
-                    $('.post-right__container').removeClass('right-file-overlay');
+                    $('.right-file-overlay').removeClass('visible');
+                    $('.right-file-overlay').addClass('invisible');
                     self.handleDrop(e);
                 }
             });
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 83f806b79..756ed521d 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -463,11 +463,17 @@ module.exports = React.createClass({
         }
 
         return (
-            <div ref="postlist" className="post-list-holder-by-time">
-                <div className="post-list__table">
-                    <div className="post-list__content">
-                        { more_messages }
-                        { postCtls }
+            <div>
+                <div className='center-file-overlay invisible'>
+                    <span className='center-file-help-text'>Drop a file to upload it.</span>
+                    <img className='center-file-help-picture' />
+                </div>
+                <div ref="postlist" className="post-list-holder-by-time">
+                    <div className="post-list__table">
+                        <div className="post-list__content">
+                            { more_messages }
+                            { postCtls }
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index ad8b54012..49c12ad9c 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -296,6 +296,10 @@ module.exports = React.createClass({
 
         return (
             <div className="post-right__container">
+                <div className='right-file-overlay invisible'>
+                    <span className='right-file-help-text'>Drop a file to upload it.</span>
+                    <img className='right-file-help-picture' />
+                </div>
                 <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/_files.scss b/web/sass-files/sass/partials/_files.scss
index 3736f9303..9bf6fd83a 100644
--- a/web/sass-files/sass/partials/_files.scss
+++ b/web/sass-files/sass/partials/_files.scss
@@ -203,10 +203,3 @@
   }
 }
 
-.center-file-overlay {
-  background:rgba(255,255,255,0.5);
-}
-
-.right-file-overlay {
-  background:rgba(255,255,255,0.5);
-}
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 98b17120d..0af5c01e2 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -107,6 +107,29 @@ body.ios {
 }
 
 #post-list {
+	.center-file-overlay {
+		top: 0px;
+		height: 100%;
+		width: 59.7%;
+		position: fixed;
+		z-index: 2147483646;
+		-moz-box-shadow: 0px 0px 3px #8a8a8a;
+		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
+		box-shadow: 0px 0px 3px #8a8a8a;
+
+		.invisible {
+			visibility: hidden;
+		}
+		.visible {
+			visibility: visible;
+		}
+		.center-file-help-text {
+
+		}
+		.center-file-help-picture {
+
+		}
+	}
 	.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..41b7aaada 100644
--- a/web/sass-files/sass/partials/_post_right.scss
+++ b/web/sass-files/sass/partials/_post_right.scss
@@ -1,5 +1,28 @@
 .post-right__container {
 
+	.right-file-overlay {
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		z-index: 2147483646;
+		-moz-box-shadow: 0px 0px 3px #8a8a8a;
+		-webkit-box-shadow: 0px 0px 3px #8a8a8a;
+		box-shadow: 0px 0px 3px #8a8a8a;
+
+		.invisible {
+			visibility: hidden;
+		}
+		.visible {
+			visibility: visible;
+		}
+		.right-file-help-text {
+
+		}
+		.right-file-help-picture {
+
+		}
+	}
+
 	.post-right-root-message {
 		padding: 1em 1em 0;
 	}
diff --git a/web/static/js/jquery-dragster/bower.json b/web/static/js/jquery-dragster/bower.json
deleted file mode 100644
index a3cf7ed16..000000000
--- a/web/static/js/jquery-dragster/bower.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "jquery-dragster",
-  "version": "1.0.3",
-  "homepage": "https://github.com/catmanjan/jquery-dragster",
-  "authors": [
-    "catmanjan"
-  ],
-  "description": "Unified drag and drop listener",
-  "main": "jquery.dragster.js",
-  "keywords": [
-    "jquery",
-    "dragster",
-    "dragenter",
-    "dragleave",
-    "drop"
-  ],
-  "license": "MIT",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ]
-}