Minor refactoring for better maintainibility

3 files changed, 16 insertions, 8 deletions

diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx
index a82f02af1..28d66d817 100644
--- a/web/react/components/file_upload_overlay.jsx
+++ b/web/react/components/file_upload_overlay.jsx
@@ -3,9 +3,19 @@
 
 module.exports = React.createClass({
     displayName: 'FileUploadOverlay',
+    propTypes: {
+        overlayType: React.PropTypes.string
+    },
     render: function() {
+        var overlayClass = 'file-overlay invisible';
+        if (this.props.overlayType === 'right') {
+            overlayClass += ' right-file-overlay';
+        } else if (this.props.overlayType === 'center') {
+            overlayClass += ' center-file-overlay';
+        }
+
         return (
-            <div className='file-overlay center-file-overlay invisible'>
+            <div className={overlayClass}>
                 <div>
                     <i className='fa fa-upload'></i>
                     <span>Drop a file to upload it.</span>
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 09cd8cb56..e46979ff7 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -11,6 +11,7 @@ var SearchBox =require('./search_bar.jsx');
 var CreateComment = require( './create_comment.jsx' );
 var Constants = require('../utils/constants.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
+var FileUploadOverlay = require('./file_upload_overlay.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 RhsHeaderPost = React.createClass({
@@ -296,12 +297,8 @@ module.exports = React.createClass({
 
         return (
             <div className="post-right__container">
-                <div className='file-overlay right-file-overlay invisible'>
-                    <div>
-                        <i className="fa fa-upload"></i>
-                        <span>Drop a file to upload it.</span>
-                    </div>
-                </div>
+                <FileUploadOverlay
+                    overlayType='right' />
                 <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/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 922e61d1a..3ef6817f3 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -225,7 +225,8 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
     );
 
     React.render(
-        <FileUploadOverlay />,
+        <FileUploadOverlay 
+            overlayType='center' />,
         document.getElementById('file_upload_overlay')
     );