diff options
Diffstat (limited to 'webapp/components/emoji_picker')
3 files changed, 50 insertions, 86 deletions
diff --git a/webapp/components/emoji_picker/components/emoji_picker_item.jsx b/webapp/components/emoji_picker/components/emoji_picker_item.jsx index cbafd31c5..af72331be 100644 --- a/webapp/components/emoji_picker/components/emoji_picker_item.jsx +++ b/webapp/components/emoji_picker/components/emoji_picker_item.jsx @@ -35,7 +35,7 @@ export default class EmojiPickerItem extends React.PureComponent { } handleMouseOut() { - this.props.onItemOut(this.props.emoji); + this.props.onItemOut(); } handleClick() { @@ -45,21 +45,7 @@ export default class EmojiPickerItem extends React.PureComponent { render() { let item = null; - if (this.props.category === 'recent' || this.props.category === 'custom') { - item = ( - <span - onMouseOver={this.handleMouseOver} - onMouseOut={this.handleMouseOut} - onClick={this.handleClick} - className='emoji-picker__item-wrapper' - > - <img - className='emoji-picker__item emoticon' - src={EmojiStore.getEmojiImageUrl(this.props.emoji)} - /> - </span> - ); - } else { + if (this.props.emoji.category) { let className; if (this.props.isLoaded) { className = 'emojisprite'; @@ -67,7 +53,7 @@ export default class EmojiPickerItem extends React.PureComponent { className = 'emojisprite-loading'; } - className += ' emoji-category-' + this.props.category; + className += ' emoji-category-' + this.props.emoji.category; className += ' emoji-' + this.props.emoji.filename; item = ( @@ -81,7 +67,22 @@ export default class EmojiPickerItem extends React.PureComponent { /> </div> ); + } else { + item = ( + <span + onMouseOver={this.handleMouseOver} + onMouseOut={this.handleMouseOut} + onClick={this.handleClick} + className='emoji-picker__item-wrapper' + > + <img + className='emoji-picker__item emoticon' + src={EmojiStore.getEmojiImageUrl(this.props.emoji)} + /> + </span> + ); } + return item; } } diff --git a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx index b9f3f4262..991bf4a2d 100644 --- a/webapp/components/emoji_picker/components/emoji_picker_preview.jsx +++ b/webapp/components/emoji_picker/components/emoji_picker_preview.jsx @@ -22,22 +22,29 @@ export default class EmojiPickerPreview extends React.Component { let aliases; let previewImage; - if (emoji.aliases) { + if (emoji.aliases && emoji.category) { // This is a system emoji which only has a list of aliases name = emoji.aliases[0]; aliases = emoji.aliases; - previewImage = (<span className='sprite-preview'><img - src='/static/images/img_trans.gif' - className={' emojisprite-preview emoji-' + emoji.filename + ' '} - /></span>); + + previewImage = ( + <span className='sprite-preview'> + <img + src='/static/images/img_trans.gif' + className={'emojisprite-preview emoji-category-' + emoji.category + ' emoji-' + emoji.filename} + /> + </span> + ); } else { // This is a custom emoji that matches the model on the server name = emoji.name; aliases = [emoji.name]; - previewImage = (<img - className='emoji-picker__preview-image' - src={EmojiStore.getEmojiImageUrl(emoji)} - />); + previewImage = ( + <img + className='emoji-picker__preview-image' + src={EmojiStore.getEmojiImageUrl(emoji)} + /> + ); } return ( @@ -47,9 +54,9 @@ export default class EmojiPickerPreview extends React.Component { </div> <div className='emoji-picker__preview-image-label-box'> <span className='emoji-picker__preview-name'>{name}</span> - <span - className='emoji-picker__preview-aliases' - >{ ':' + aliases[0] + ':'}</span> + <span className='emoji-picker__preview-aliases'> + {':' + aliases[0] + ':'} + </span> </div> </div> ); diff --git a/webapp/components/emoji_picker/emoji_picker.jsx b/webapp/components/emoji_picker/emoji_picker.jsx index 49050a7d8..56acdec2d 100644 --- a/webapp/components/emoji_picker/emoji_picker.jsx +++ b/webapp/components/emoji_picker/emoji_picker.jsx @@ -119,17 +119,23 @@ export default class EmojiPicker extends React.Component { handleItemOver(emoji) { clearTimeout(this.timeouthandler); - this.setState({selected: emoji}); + this.setState({ + selected: emoji + }); } handleItemOut() { - this.timeouthandler = setTimeout(() => this.setState({selected: null}), 500); + this.timeouthandler = setTimeout(() => this.setState({ + selected: null + }), 500); } handleItemUnmount(emoji) { // Prevent emoji preview from showing emoji which is not present anymore (due to filter) if (this.state.selected === emoji) { - this.setState({selected: null}); + this.setState({ + selected: null + }); } } @@ -235,9 +241,7 @@ export default class EmojiPicker extends React.Component { let header = null; if (items.length > 0) { header = ( - <div - className='emoji-picker__category-header' - > + <div className='emoji-picker__category-header'> <FormattedMessage id={'emoji_picker.' + category}/> </div> ); @@ -257,56 +261,6 @@ export default class EmojiPicker extends React.Component { ); } - renderPreview(selected) { - if (selected) { - let name; - let aliases; - let previewImage; - if (selected.name) { - // This is a custom emoji that matches the model on the server - name = selected.name; - aliases = [selected.name]; - previewImage = ( - <img - className='emoji-picker__preview-image' - align='absmiddle' - src={EmojiStore.getEmojiImageUrl(selected)} - /> - ); - } else { - // This is a system emoji which only has a list of aliases - name = selected.aliases[0]; - aliases = selected.aliases; - previewImage = ( - <span> - <img - src='/static/images/img_trans.gif' - className={' emojisprite-preview emoji-' + selected.filename + ' '} - align='absmiddle' - /> - </span> - ); - } - - return ( - <div className='emoji-picker__preview'> - {previewImage} - <span className='emoji-picker__preview-name'>{name}</span> - <span className='emoji-picker__preview-aliases'>{aliases.map((alias) => ':' + alias + ':').join(' ')}</span> - </div> - ); - } - - return ( - <span className='emoji-picker__preview-placeholder'> - <FormattedMessage - id='emoji_picker.emojiPicker' - defaultMessage='Emoji Picker' - /> - </span> - ); - } - render() { const items = []; @@ -473,7 +427,9 @@ export default class EmojiPicker extends React.Component { > {items} </div> - <EmojiPickerPreview emoji={this.state.selected}/> + <EmojiPickerPreview + emoji={this.state.selected} + /> </div> ); } |