diff options
author | Saturnino Abril <saturnino.abril@gmail.com> | 2017-07-06 04:21:04 +0800 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-07-05 16:21:04 -0400 |
commit | 81a893b556bbd4e5a73dd41b3dad92915cb06119 (patch) | |
tree | f455a019b374d619be4d88e4ddb1398d9864689d /webapp/components/create_comment.jsx | |
parent | 4efb0f37b701aa8e875e541cc4f121c264e4d8ab (diff) | |
download | chat-81a893b556bbd4e5a73dd41b3dad92915cb06119.tar.gz chat-81a893b556bbd4e5a73dd41b3dad92915cb06119.tar.bz2 chat-81a893b556bbd4e5a73dd41b3dad92915cb06119.zip |
fix position of emoji picker (#6837)
Diffstat (limited to 'webapp/components/create_comment.jsx')
-rw-r--r-- | webapp/components/create_comment.jsx | 75 |
1 files changed, 50 insertions, 25 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 2ddc828cc..1a2bbeeae 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -15,7 +15,7 @@ import Textbox from './textbox.jsx'; import MsgTyping from './msg_typing.jsx'; import FileUpload from './file_upload.jsx'; import FilePreview from './file_preview.jsx'; -import EmojiPicker from './emoji_picker/emoji_picker.jsx'; +import EmojiPickerOverlay from 'components/emoji_picker/emoji_picker_overlay.jsx'; import * as Utils from 'utils/utils.jsx'; import * as UserAgent from 'utils/user_agent.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; @@ -24,7 +24,6 @@ import * as PostActions from 'actions/post_actions.jsx'; import Constants from 'utils/constants.jsx'; import {FormattedMessage} from 'react-intl'; -import {RootCloseWrapper} from 'react-overlays'; import {browserHistory} from 'react-router/es6'; const ActionTypes = Constants.ActionTypes; @@ -54,12 +53,15 @@ export default class CreateComment extends React.Component { this.removePreview = this.removePreview.bind(this); this.getFileCount = this.getFileCount.bind(this); this.getFileUploadTarget = this.getFileUploadTarget.bind(this); + this.getCreateCommentControls = this.getCreateCommentControls.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.focusTextbox = this.focusTextbox.bind(this); this.showPostDeletedModal = this.showPostDeletedModal.bind(this); this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); this.handlePostError = this.handlePostError.bind(this); this.handleEmojiClick = this.handleEmojiClick.bind(this); + this.toggleEmojiPicker = this.toggleEmojiPicker.bind(this); + this.hideEmojiPicker = this.hideEmojiPicker.bind(this); PostStore.clearCommentDraftUploads(); MessageHistoryStore.resetHistoryIndex('comment'); @@ -81,10 +83,14 @@ export default class CreateComment extends React.Component { this.lastBlurAt = 0; } - toggleEmojiPicker = () => { + toggleEmojiPicker() { this.setState({showEmojiPicker: !this.state.showEmojiPicker}); } + hideEmojiPicker() { + this.setState({showEmojiPicker: false}); + } + handleEmojiClick(emoji) { const emojiAlias = emoji.name || emoji.aliases[0]; @@ -470,6 +476,10 @@ export default class CreateComment extends React.Component { return this.refs.textbox; } + getCreateCommentControls() { + return this.refs.createCommentControls; + } + focusTextbox(keepFocus = false) { if (keepFocus || !Utils.isMobile()) { this.refs.textbox.focus(); @@ -548,15 +558,38 @@ export default class CreateComment extends React.Component { addButtonClass += ' disabled'; } + const fileUpload = ( + <FileUpload + ref='fileUpload' + getFileCount={this.getFileCount} + getTarget={this.getFileUploadTarget} + onFileUploadChange={this.handleFileUploadChange} + onUploadStart={this.handleUploadStart} + onFileUpload={this.handleFileUploadComplete} + onUploadError={this.handleUploadError} + postType='comment' + channelId={this.props.channelId} + /> + ); + let emojiPicker = null; - if (this.state.showEmojiPicker) { + if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW)) { emojiPicker = ( - <RootCloseWrapper onRootClose={this.toggleEmojiPicker}> - <EmojiPicker + <span> + <EmojiPickerOverlay + show={this.state.showEmojiPicker} + container={this.props.getSidebarBody} + target={this.getCreateCommentControls} + onHide={this.hideEmojiPicker} onEmojiClick={this.handleEmojiClick} - onHide={this.toggleEmojiPicker} + rightOffset={15} + topOffset={55} /> - </RootCloseWrapper> + <span + className={'fa fa-smile-o icon--emoji-picker emoji-rhs'} + onClick={this.toggleEmojiPicker} + /> + </span> ); } @@ -582,22 +615,13 @@ export default class CreateComment extends React.Component { id='reply_textbox' ref='textbox' /> - <FileUpload - ref='fileUpload' - getFileCount={this.getFileCount} - getTarget={this.getFileUploadTarget} - onFileUploadChange={this.handleFileUploadChange} - onUploadStart={this.handleUploadStart} - onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} - postType='comment' - channelId={this.props.channelId} - onEmojiClick={this.toggleEmojiPicker} - emojiEnabled={this.state.emojiPickerEnabled} - navBarName='rhs' - /> - - {emojiPicker} + <span + ref='createCommentControls' + className='btn btn-file' + > + {fileUpload} + {emojiPicker} + </span> </div> </div> <MsgTyping @@ -629,5 +653,6 @@ export default class CreateComment extends React.Component { CreateComment.propTypes = { channelId: PropTypes.string.isRequired, rootId: PropTypes.string.isRequired, - latestPostId: PropTypes.string + latestPostId: PropTypes.string, + getSidebarBody: PropTypes.func }; |