diff options
author | bonespiked <dngreene@gmail.com> | 2017-03-24 09:09:51 -0400 |
---|---|---|
committer | Jason Blais <jason@spinpunch.com> | 2017-03-24 09:09:51 -0400 |
commit | 28ad645153b206ba84ddc4935280eaed94bb0138 (patch) | |
tree | a5ddcc228b5cfdbd479078873a1bfede9f11cb1f /webapp/components/create_post.jsx | |
parent | d0af931e6e57b78432d5527b6e7b0be36c538144 (diff) | |
download | chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.gz chat-28ad645153b206ba84ddc4935280eaed94bb0138.tar.bz2 chat-28ad645153b206ba84ddc4935280eaed94bb0138.zip |
Ticket 4665 - Emoji Picker (#5157)
* #4665 Added EmojiPicker
Work primarily by @broernr-de and @harrison on pre-release.mattermost.com
* Final fixes to handle custom emojis from internal review and single merge error
* ESLint fixes
* CSS changes and other code to support emoji picker in reply window
* Fix for file upload and emoji picker icon positions on post and comment.
RHS emoji picker appearing see-through at this time.
* Fix for two ESLint issues.
* covered most of feedback:
RHS emoji picker looks correct color-wise
RHS emoji picker dynamically positions against height of thread size (post + reply messages)
escape closes emoji window
search box focused on open
ESLint fixes against other files
oversized emoji preview fixes
* Adding in 'outside click' eventing to dismiss the emoji window
* Changing some formatting to fix mismatch between my local eslant rules and jenkins.
* adding alternative import method due to downstream testing errors
* yet another attempt to retain functionality and pass tests - skipping import of browser store
* fix for feedback items 5 and 7:
* move search to float on top with stylistic changes
* whitespace in the header (+1 squashed commit)
Squashed commits:
[6a26d32] changes that address items
1, 2, 6, 8, and 9 of latest feedback
* Fix for attachment preview location on mobile
* Fix for latest rounds of feedback
* fixing eslint issue
* making emojipicker sprite based, fixing alignments
* Fix for emoji quality, fixing some behavior (hover background and cursor settings)
undoing config changes
* Preview feature for emojis
* Adjustments to config file, and changing layout/design of attachment and emoji icon.
* manual revert from master branch for config.json
* reverting paperclip and fixing alignments. Additionally fixing inadvertent display of picker on mobile.
* CSS changes to try to fix the hover behavior - currently working for emoji picker (when enabled), but hover for attachment isn't working
* Made suggested changes by jwilander except for jQuery removal
* Adding hover for both icons
* removal of some usages of jQuery
* Fix for two layout issues on IE11/Edge
* UI improvements for emoji picker
* Fix for many minor display issues
* fix for additional appearance items
* fix to two minor UI items
* A little extra padding for IE11
* fix for IE11 scroll issue, and removing align attribute on img tag which was throwing js error
* fixes some display issues on firefox
* fix for uneven sides of emojis
* fix for eslint issues that I didn't introduce
* fix for missing bottom edge of RHS emojipicker. also fixing text overlapping icons on text area (including RHS)
* Update "emoji selector" to "emoji picker"
* changes for code review
- removal of ..getDOMNode
- use sprite imagery for emoji preview
- remove lastBlurAt from state as it wasn't used
* fixes for:
- fake custom emoji preview in picker
- RHS scrollbar on preview
* fix for minor alignment of preview emoji
Diffstat (limited to 'webapp/components/create_post.jsx')
-rw-r--r-- | webapp/components/create_post.jsx | 98 |
1 files changed, 86 insertions, 12 deletions
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index faa880acc..93a299b89 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -8,6 +8,7 @@ import FileUpload from './file_upload.jsx'; import FilePreview from './file_preview.jsx'; import PostDeletedModal from './post_deleted_modal.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; +import EmojiPicker from './emoji_picker/emoji_picker.jsx'; import AppDispatcher from 'dispatcher/app_dispatcher.jsx'; import * as GlobalActions from 'actions/global_actions.jsx'; @@ -36,6 +37,7 @@ const KeyCodes = Constants.KeyCodes; import React from 'react'; export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/; +export const EMOJI_PATTERN = /:[A-Za-z-_0-9]*:/g; export default class CreatePost extends React.Component { constructor(props) { @@ -61,7 +63,10 @@ export default class CreatePost extends React.Component { this.showPostDeletedModal = this.showPostDeletedModal.bind(this); this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); this.showShortcuts = this.showShortcuts.bind(this); + this.handleEmojiClick = this.handleEmojiClick.bind(this); + this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this); this.handlePostError = this.handlePostError.bind(this); + this.closeEmoji = this.closeEmoji.bind(this); PostStore.clearDraftUploads(); @@ -77,7 +82,9 @@ export default class CreatePost extends React.Component { fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, showTutorialTip: false, showPostDeletedModal: false, - enableSendButton: false + enableSendButton: false, + showEmojiPicker: false, + emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) }; this.lastBlurAt = 0; @@ -87,6 +94,18 @@ export default class CreatePost extends React.Component { this.setState({postError}); } + closeEmoji(clickEvent) { + /* + if the user clicked something outside the component, except the main emojipicker icon + and the picker is open, then close it + */ + if (clickEvent && clickEvent.srcElement && + clickEvent.srcElement.className.indexOf('emoji-main') === -1 && + this.state.showEmojiPicker) { + this.setState({showEmojiPicker: !this.state.showEmojiPicker}); + } + } + handleSubmit(e) { e.preventDefault(); @@ -185,6 +204,14 @@ export default class CreatePost extends React.Component { GlobalActions.emitUserPostedEvent(post); + // parse message and emit emoji event + const emojiResult = post.message.match(EMOJI_PATTERN); + if (emojiResult) { + emojiResult.forEach((emoji) => { + PostActions.emitEmojiPosted(emoji); + }); + } + PostActions.queuePost(post, false, null, (err) => { if (err.id === 'api.post.create_post.root_id.app_error') { @@ -379,6 +406,10 @@ export default class CreatePost extends React.Component { } showShortcuts(e) { + if (e.which === Constants.KeyCodes.ESCAPE && this.state.showEmojiPicker === true) { + this.setState({showEmojiPicker: !this.state.showEmojiPicker}); + } + if ((e.ctrlKey || e.metaKey) && e.keyCode === Constants.KeyCodes.FORWARD_SLASH) { e.preventDefault(); const args = {}; @@ -411,7 +442,8 @@ export default class CreatePost extends React.Component { this.setState({ showTutorialTip: tutorialStep === TutorialSteps.POST_POPOVER, ctrlSend: PreferenceStore.getBool(Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN + fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, + emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) }); } @@ -484,6 +516,31 @@ export default class CreatePost extends React.Component { }); } + handleEmojiClick(emoji) { + const emojiAlias = emoji.name || emoji.aliases[0]; + + if (!emojiAlias) { + //Oops.. There went something wrong + return; + } + + if (this.state.message === '') { + this.setState({message: ':' + emojiAlias + ': ', showEmojiPicker: false}); + } else { + //check whether there is already a blank at the end of the current message + const newMessage = (/\s+$/.test(this.state.message)) ? + this.state.message + ':' + emojiAlias + ': ' : this.state.message + ' :' + emojiAlias + ': '; + + this.setState({message: newMessage, showEmojiPicker: false}); + } + + this.focusTextbox(); + } + + handleEmojiPickerClick() { + this.setState({showEmojiPicker: !this.state.showEmojiPicker}); + } + createTutorialTip() { const screens = []; @@ -556,6 +613,17 @@ export default class CreatePost extends React.Component { if (!this.state.enableSendButton) { sendButtonClass += ' disabled'; } + let emojiPicker = null; + if (this.state.showEmojiPicker) { + emojiPicker = ( + <EmojiPicker + onEmojiClick={this.handleEmojiClick} + topOrBottom='top' + outsideClick={this.closeEmoji} + + /> + ); + } return ( <form @@ -575,22 +643,28 @@ export default class CreatePost extends React.Component { handlePostError={this.handlePostError} value={this.state.message} onBlur={this.handleBlur} + emojiEnabled={this.state.emojiPickerEnabled} createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')} channelId={this.state.channelId} id='post_textbox' ref='textbox' /> + <FileUpload + ref='fileUpload' + getFileCount={this.getFileCount} + onFileUploadChange={this.handleFileUploadChange} + onUploadStart={this.handleUploadStart} + onFileUpload={this.handleFileUploadComplete} + onUploadError={this.handleUploadError} + postType='post' + channelId='' + onEmojiClick={this.handleEmojiPickerClick} + emojiEnabled={this.state.emojiPickerEnabled} + navBarName='main' + /> + + {emojiPicker} </div> - <FileUpload - ref='fileUpload' - getFileCount={this.getFileCount} - onFileUploadChange={this.handleFileUploadChange} - onUploadStart={this.handleUploadStart} - onFileUpload={this.handleFileUploadComplete} - onUploadError={this.handleUploadError} - postType='post' - channelId='' - /> <a className={sendButtonClass} onClick={this.handleSubmit} |