diff options
| author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-12 14:12:17 -0700 |
|---|---|---|
| committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-12 14:27:44 -0700 |
| commit | 14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e (patch) | |
| tree | 53864d1443a4415b4fd0fb1379c1f73dd51f1eca /web/react | |
| parent | 0f1c9917271d8e28c55b8d930ac9057ef19e5862 (diff) | |
| download | chat-14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e.tar.gz chat-14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e.tar.bz2 chat-14c121dc0cccdd36f97b0b13cde6dd3a5802bb9e.zip | |
Implements better markup for css changes to be made, including an overlay of the dropzones and help pic/text
Diffstat (limited to 'web/react')
| -rw-r--r-- | web/react/components/file_upload.jsx | 18 | ||||
| -rw-r--r-- | web/react/components/post_list.jsx | 16 | ||||
| -rw-r--r-- | web/react/components/post_right.jsx | 4 |
3 files changed, 27 insertions, 11 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} /> |