diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-13 14:35:45 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-06-13 11:35:45 -0700 |
commit | 40efd8367a85e3333e9b7cc45c390259d412088c (patch) | |
tree | f40d4fb6f5e7b1bdb8cefa95e25a626837a07a9c /webapp/components/post_view | |
parent | 56883d6f95b268477a1f0ec956bc1891ce30c2a1 (diff) | |
download | chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.gz chat-40efd8367a85e3333e9b7cc45c390259d412088c.tar.bz2 chat-40efd8367a85e3333e9b7cc45c390259d412088c.zip |
PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better position emoji picker (#6352)
* Cleaned up emoji picker CSS
* Fixed border of emoji picker when reacting to comments in the RHS
* PLT-6135 Made EmojiPicker automatically position itself above/below the [...] menu
* PLT-6135 Changed post textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed comment textbox emoji picker to use a RootCloseWrapper
* PLT-6135 Changed RHS post components to use EmojiPickerOverlay
* Removed react-outside-event package
* Fixed merge conflict
* Fixed emoji picker position on posts in RHS
* Removed unused CSS classes
* Fixed not being able to react to posts with emoji picker
Diffstat (limited to 'webapp/components/post_view')
4 files changed, 41 insertions, 28 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index c1b932774..b9823396d 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -38,7 +38,8 @@ export default class Post extends Component { isFlagged: PropTypes.bool, status: PropTypes.string, isBusy: PropTypes.bool, - childComponentDidUpdateFunction: PropTypes.func + childComponentDidUpdateFunction: PropTypes.func, + getPostList: PropTypes.func.isRequired }; constructor(props) { @@ -308,6 +309,7 @@ export default class Post extends Component { isFlagged={this.props.isFlagged} status={this.props.status} isBusy={this.props.isBusy} + getPostList={this.props.getPostList} /> <PostBody post={post} diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 570a04f8f..eab2d4629 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -91,6 +91,7 @@ export default class PostHeader extends React.Component { compactDisplay={this.props.compactDisplay} useMilitaryTime={this.props.useMilitaryTime} isFlagged={this.props.isFlagged} + getPostList={this.props.getPostList} /> </div> </div> @@ -119,5 +120,6 @@ PostHeader.propTypes = { useMilitaryTime: PropTypes.bool.isRequired, isFlagged: PropTypes.bool.isRequired, status: PropTypes.string, - isBusy: PropTypes.bool + isBusy: PropTypes.bool, + getPostList: PropTypes.func.isRequired }; diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 39a0b1fec..45c716ad0 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. import $ from 'jquery'; -import ReactDOM from 'react-dom'; import PostTime from './post_time.jsx'; import PostFlagIcon from 'components/common/post_flag_icon.jsx'; @@ -15,8 +14,7 @@ import * as Utils from 'utils/utils.jsx'; import * as PostUtils from 'utils/post_utils.jsx'; import Constants from 'utils/constants.jsx'; import DelayedAction from 'utils/delayed_action.jsx'; -import {Overlay} from 'react-bootstrap'; -import EmojiPicker from 'components/emoji_picker/emoji_picker.jsx'; +import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import PropTypes from 'prop-types'; @@ -36,7 +34,6 @@ export default class PostInfo extends React.Component { this.pinPost = this.pinPost.bind(this); this.unpinPost = this.unpinPost.bind(this); this.reactEmojiClick = this.reactEmojiClick.bind(this); - this.emojiPickerClick = this.emojiPickerClick.bind(this); this.canEdit = false; this.canDelete = false; @@ -280,8 +277,16 @@ export default class PostInfo extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } - emojiPickerClick() { - this.setState({showEmojiPicker: !this.state.showEmojiPicker}); + toggleEmojiPicker = () => { + const showEmojiPicker = !this.state.showEmojiPicker; + + this.setState({showEmojiPicker}); + this.props.handleDropdownOpened(showEmojiPicker); + } + + hideEmojiPicker = () => { + this.setState({showEmojiPicker: false}); + this.props.handleDropdownOpened(false); } removePost() { @@ -328,6 +333,10 @@ export default class PostInfo extends React.Component { PostActions.addReaction(this.props.post.channel_id, this.props.post.id, emojiName); } + getDotMenu = () => { + return this.refs.dotMenu; + } + render() { var post = this.props.post; @@ -359,30 +368,21 @@ export default class PostInfo extends React.Component { if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { react = ( <span> - <Overlay + <EmojiPickerOverlay show={this.state.showEmojiPicker} - placement='top' - rootClose={true} - container={this} - onHide={() => this.setState({showEmojiPicker: false})} - target={() => ReactDOM.findDOMNode(this.refs['reactIcon_' + post.id])} - animation={false} - > - <EmojiPicker - onEmojiClick={this.reactEmojiClick} - pickerLocation='top' - - /> - </Overlay> + container={this.props.getPostList} + target={this.getDotMenu} + onHide={this.hideEmojiPicker} + onEmojiClick={this.reactEmojiClick} + /> <a href='#' className='reacticon__container' - onClick={this.emojiPickerClick} - ref={'reactIcon_' + post.id} - ><i className='fa fa-smile-o'/> + onClick={this.toggleEmojiPicker} + > + <i className='fa fa-smile-o'/> </a> </span> - ); } } @@ -399,7 +399,10 @@ export default class PostInfo extends React.Component { if (dropdown) { options = ( - <div className='col col__reply'> + <div + ref='dotMenu' + className='col col__reply' + > <div className='dropdown' ref='dotMenu' @@ -468,5 +471,6 @@ PostInfo.propTypes = { currentUser: PropTypes.object.isRequired, compactDisplay: PropTypes.bool, useMilitaryTime: PropTypes.bool.isRequired, - isFlagged: PropTypes.bool + isFlagged: PropTypes.bool, + getPostList: PropTypes.func.isRequired }; diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index a0b88cd0f..403e26f84 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -368,6 +368,7 @@ export default class PostList extends React.Component { status={status} isBusy={this.props.isBusy} childComponentDidUpdateFunction={this.childComponentDidUpdate} + getPostList={this.getPostList} /> ); @@ -562,6 +563,10 @@ export default class PostList extends React.Component { this.checkAndUpdateScrolling(); } + getPostList = () => { + return this.refs.postlist; + } + render() { // Create intro message or top loadmore link let moreMessagesTop; |