[PLT-7317] Fix emoji picker preview (#7136)

* fix emoji picker preview

* make use of sprite-sheet CSS for all system emojis

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') {
+        if (this.props.emoji.category) {
-            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 {
             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;
     }
 }

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'
+                previewImage = (
-                    className={'  emojisprite-preview emoji-' + emoji.filename + ' '}
+                    <span className='sprite-preview'>
-                                                                 /></span>);
+                        <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
+                previewImage = (
-                    className='emoji-picker__preview-image'
+                    <img
-                    src={EmojiStore.getEmojiImageUrl(emoji)}
+                        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
+                        <span className='emoji-picker__preview-aliases'>
-                            className='emoji-picker__preview-aliases'
+                            {':' + aliases[0] + ':'}
-                        >{ ':' + aliases[0] + ':'}</span>
+                        </span>
                     </div>
                 </div>
             );

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
+                <div className='emoji-picker__category-header'>
-                    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>
         );
     }

webapp/make-emojis

@@ -67,6 +67,7 @@ File.open(File.join(File.dirname(__FILE__), 'utils', 'emoji.jsx'), 'w') do |f|
         emojis << {
             'aliases' => emoji.aliases,
             'filename' => filename,
+            'category' => category,
         }
         emoji.image_filename = filename + '.png'
     end

webapp/sass/components/_emojisprite.scss

@@ -31,7 +31,7 @@
     width: 64px;
 }
 .emoji-category-people { background-image: url('../images/emoji-sheets/people.png'); }
-.emoji-270d-fe0f { background-position: -0px -0px; }
+.emoji-1f302 { background-position: -0px -0px; }
 .emoji-1f383 { background-position: -64px -0px; }
 .emoji-1f385 { background-position: -0px -64px; }
 .emoji-1f392 { background-position: -64px -64px; }
@@ -321,9 +321,9 @@
 .emoji-270a { background-position: -960px -1024px; }
 .emoji-270b { background-position: -1024px -1024px; }
 .emoji-270c-fe0f { background-position: -1088px -0px; }
-.emoji-1f302 { background-position: -1088px -64px; }
+.emoji-270d-fe0f { background-position: -1088px -64px; }
 .emoji-category-nature { background-image: url('../images/emoji-sheets/nature.png'); }
-.emoji-2b50-fe0f { background-position: -0px -0px; }
+.emoji-1f308 { background-position: -0px -0px; }
 .emoji-1f30a { background-position: -64px -0px; }
 .emoji-1f30d { background-position: -0px -64px; }
 .emoji-1f30e { background-position: -64px -64px; }
@@ -481,9 +481,9 @@
 .emoji-26c8 { background-position: -768px -704px; }
 .emoji-2728 { background-position: -0px -768px; }
 .emoji-2744-fe0f { background-position: -64px -768px; }
-.emoji-1f308 { background-position: -128px -768px; }
+.emoji-2b50-fe0f { background-position: -128px -768px; }
 .emoji-category-foods { background-image: url('../images/emoji-sheets/foods.png'); }
-.emoji-2615-fe0f { background-position: -0px -0px; }
+.emoji-1f32d { background-position: -0px -0px; }
 .emoji-1f32e { background-position: -64px -0px; }
 .emoji-1f32f { background-position: -0px -64px; }
 .emoji-1f330 { background-position: -64px -64px; }
@@ -568,9 +568,9 @@
 .emoji-1f95d { background-position: -576px -64px; }
 .emoji-1f95e { background-position: -576px -128px; }
 .emoji-1f9c0 { background-position: -576px -192px; }
-.emoji-1f32d { background-position: -576px -256px; }
+.emoji-2615-fe0f { background-position: -576px -256px; }
 .emoji-category-activity { background-image: url('../images/emoji-sheets/activity.png'); }
-.emoji-26f9-fe0f-200d-2640-fe0f { background-position: -0px -0px; }
+.emoji-1f396 { background-position: -0px -0px; }
 .emoji-1f397 { background-position: -64px -0px; }
 .emoji-1f39f { background-position: -0px -64px; }
 .emoji-1f3a3 { background-position: -64px -64px; }
@@ -649,9 +649,9 @@
 .emoji-26f7 { background-position: -256px -512px; }
 .emoji-26f8 { background-position: -320px -512px; }
 .emoji-26f9-fe0f { background-position: -384px -512px; }
-.emoji-1f396 { background-position: -448px -512px; }
+.emoji-26f9-fe0f-200d-2640-fe0f { background-position: -448px -512px; }
 .emoji-category-places { background-image: url('../images/emoji-sheets/places.png'); }
-.emoji-2708-fe0f { background-position: -0px -0px; }
+.emoji-1f301 { background-position: -0px -0px; }
 .emoji-1f303 { background-position: -64px -0px; }
 .emoji-1f304 { background-position: -0px -64px; }
 .emoji-1f305 { background-position: -64px -64px; }
@@ -769,9 +769,9 @@
 .emoji-26f5-fe0f { background-position: -320px -640px; }
 .emoji-26fa-fe0f { background-position: -384px -640px; }
 .emoji-26fd-fe0f { background-position: -448px -640px; }
-.emoji-1f301 { background-position: -512px -640px; }
+.emoji-2708-fe0f { background-position: -512px -640px; }
 .emoji-category-objects { background-image: url('../images/emoji-sheets/objects.png'); }
-.emoji-2712-fe0f { background-position: -0px -0px; }
+.emoji-1f321 { background-position: -0px -0px; }
 .emoji-1f380 { background-position: -64px -0px; }
 .emoji-1f381 { background-position: -0px -64px; }
 .emoji-1f388 { background-position: -64px -64px; }
@@ -943,9 +943,9 @@
 .emoji-2702-fe0f { background-position: -832px -0px; }
 .emoji-2709-fe0f { background-position: -832px -64px; }
 .emoji-270f-fe0f { background-position: -832px -128px; }
-.emoji-1f321 { background-position: -832px -192px; }
+.emoji-2712-fe0f { background-position: -832px -192px; }
 .emoji-category-symbols { background-image: url('../images/emoji-sheets/symbols.png'); }
-.emoji-3299-fe0f { background-position: -0px -0px; }
+.emoji-0023-fe0f-20e3 { background-position: -0px -0px; }
 .emoji-002a-fe0f-20e3 { background-position: -64px -0px; }
 .emoji-0030-fe0f-20e3 { background-position: -0px -64px; }
 .emoji-0031-fe0f-20e3 { background-position: -64px -64px; }
@@ -1215,9 +1215,9 @@
 .emoji-3030-fe0f { background-position: -1024px -704px; }
 .emoji-303d-fe0f { background-position: -1024px -768px; }
 .emoji-3297-fe0f { background-position: -1024px -832px; }
-.emoji-0023-fe0f-20e3 { background-position: -1024px -896px; }
+.emoji-3299-fe0f { background-position: -1024px -896px; }
 .emoji-category-flags { background-image: url('../images/emoji-sheets/flags.png'); }
-.emoji-1f6a9 { background-position: -0px -0px; }
+.emoji-1f1e6-1f1e9 { background-position: -0px -0px; }
 .emoji-1f1e6-1f1ea { background-position: -64px -0px; }
 .emoji-1f1e6-1f1eb { background-position: -0px -64px; }
 .emoji-1f1e6-1f1ec { background-position: -64px -64px; }
@@ -1469,21 +1469,21 @@
 .emoji-1f3f3-fe0f { background-position: -576px -960px; }
 .emoji-1f3f3-fe0f-200d-1f308 { background-position: -640px -960px; }
 .emoji-1f3f4 { background-position: -704px -960px; }
-.emoji-1f1e6-1f1e9 { background-position: -768px -960px; }
+.emoji-1f6a9 { background-position: -768px -960px; }
 .emoji-category-custom { background-image: url('../images/emoji-sheets/custom.png'); }
 .emoji-shipit { background-position: -0px -0px; width: 75px; height: 75px; }
-.emoji-feelsgood { background-position: -75px -0px; }
+.emoji-octocat { background-position: -75px -0px; }
 .emoji-finnadie { background-position: -0px -75px; }
 .emoji-goberserk { background-position: -64px -75px; }
 .emoji-godmode { background-position: -139px -0px; }
 .emoji-hurtrealbad { background-position: -139px -64px; }
 .emoji-mattermost { background-position: -0px -139px; }
 .emoji-neckbeard { background-position: -64px -139px; }
-.emoji-octocat { background-position: -128px -139px; }
+.emoji-feelsgood { background-position: -128px -139px; }
 .emoji-rage1 { background-position: -203px -0px; }
 .emoji-rage2 { background-position: -203px -64px; }
 .emoji-rage3 { background-position: -203px -128px; }
 .emoji-rage4 { background-position: -0px -203px; }
-.emoji-suspect { background-position: -64px -203px; }
+.emoji-bowtie { background-position: -64px -203px; }
-.emoji-bowtie { background-position: -128px -203px; }
+.emoji-suspect { background-position: -128px -203px; }
-.emoji-trollface { background-position: -192px -203px; }
+.emoji-trollface { background-position: -192px -203px; }