diff --git a/app/javascript/flavours/glitch/features/emoji_picker/index.js b/app/javascript/flavours/glitch/features/emoji_picker/index.js index 5fd904593a3..78f691c9800 100644 --- a/app/javascript/flavours/glitch/features/emoji_picker/index.js +++ b/app/javascript/flavours/glitch/features/emoji_picker/index.js @@ -5,7 +5,7 @@ import { Map as ImmutableMap } from 'immutable'; import { useEmoji } from 'flavours/glitch/actions/emojis'; import React from 'react'; import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { EmojiPicker as EmojiPickerAsync } from 'flavours/glitch/util/async-components'; import Overlay from 'react-overlays/lib/Overlay'; import classNames from 'classnames'; @@ -18,7 +18,6 @@ import { assetHost } from 'flavours/glitch/util/config'; const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' }, - emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°）╯︵ ┻━┻' }, custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' }, recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' }, search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' }, @@ -108,9 +107,26 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({ let EmojiPicker, Emoji; // load asynchronously -const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`; const listenerOptions = supportsPassiveEvents ? { passive: true } : false; +const backgroundImageFn = () => `${assetHost}/emoji/sheet_13.png`; + +const notFoundFn = () => ( +
+ + +
+ +
+
+); + class ModifierPickerMenu extends React.PureComponent { static propTypes = { @@ -262,7 +278,6 @@ class EmojiPickerMenu extends React.PureComponent { return { search: intl.formatMessage(messages.emoji_search), - notfound: intl.formatMessage(messages.emoji_not_found), categories: { search: intl.formatMessage(messages.search_results), recent: intl.formatMessage(messages.recent), @@ -343,7 +358,9 @@ class EmojiPickerMenu extends React.PureComponent { recent={frequentlyUsedEmojis} skin={skinTone} showPreview={false} + showSkinTones={false} backgroundImageFn={backgroundImageFn} + notFound={notFoundFn} autoFocus emojiTooltip native={useSystemEmojiFont} diff --git a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss index dcc551c5b22..0089445e1fd 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji_picker.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji_picker.scss @@ -48,6 +48,8 @@ overflow: hidden; transition: color .1s ease-out; cursor: pointer; + background: transparent; + border: 0; &:hover { color: darken($lighter-text-color, 4%); @@ -106,11 +108,13 @@ padding: 10px; padding-right: 45px; background: $simple-background-color; + position: relative; input { font-size: 14px; font-weight: 400; padding: 7px 9px; + padding-right: 25px; font-family: inherit; display: block; width: 100%; @@ -131,6 +135,30 @@ } } +.emoji-mart-search-icon { + position: absolute; + top: 18px; + right: 45px + 5px; + z-index: 2; + padding: 2px 5px 1px; + border: 0; + background: none; + transition: all 100ms linear; + transition-property: opacity; + pointer-events: auto; + opacity: 0.7; + + &:disabled { + cursor: default; + pointer-events: none; + opacity: 0.3; + } + + svg { + fill: $action-button-color; + } +} + .emoji-mart-category .emoji-mart-emoji { cursor: pointer; @@ -169,9 +197,36 @@ } } +/* For screenreaders only, via https://stackoverflow.com/a/19758620 */ +.emoji-mart-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} + +.emoji-mart-category-list { + margin: 0; + padding: 0; +} + +.emoji-mart-category-list li { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; +} + .emoji-mart-emoji { position: relative; display: inline-block; + background: transparent; + border: 0; + padding: 0; font-size: 0; span { @@ -182,19 +237,17 @@ .emoji-mart-no-results { font-size: 14px; - text-align: center; - padding-top: 70px; color: $light-text-color; + text-align: center; + padding: 5px 6px; + padding-top: 70px; - .emoji-mart-category-label { - display: none; - } - - .emoji-mart-no-results-label { + .emoji-mart-no-results-label { margin-top: .2em; } .emoji-mart-emoji:hover::before { + cursor: default; content: none; } } diff --git a/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js b/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js index 48d90201ab7..74b53ce5c81 100644 --- a/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js +++ b/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js @@ -7,30 +7,38 @@ const { unicodeToFilename } = require('./unicode_to_filename'); const { unicodeToUnifiedName } = require('./unicode_to_unified_name'); -const emojiMap = require('./emoji_map.json'); +const emojiMap = require('./emoji_map.json'); const { emojiIndex } = require('emoji-mart'); const { uncompress: emojiMartUncompress } = require('emoji-mart/dist/utils/data'); + let data = require('emoji-mart/data/all.json'); if(data.compressed) { data = emojiMartUncompress(data); } + const emojiMartData = data; - const excluded = ['®', '©', '™']; -const skins = ['🏻', '🏼', '🏽', '🏾', '🏿']; +const skinTones = ['🏻', '🏼', '🏽', '🏾', '🏿']; const shortcodeMap = {}; const shortCodesToEmojiData = {}; const emojisWithoutShortCodes = []; Object.keys(emojiIndex.emojis).forEach(key => { - shortcodeMap[emojiIndex.emojis[key].native] = emojiIndex.emojis[key].id; + let emoji = emojiIndex.emojis[key]; + + // Emojis with skin tone modifiers are stored like this + if (Object.prototype.hasOwnProperty.call(emoji, '1')) { + emoji = emoji['1']; + } + + shortcodeMap[emoji.native] = emoji.id; }); const stripModifiers = unicode => { - skins.forEach(tone => { + skinTones.forEach(tone => { unicode = unicode.replace(tone, ''); }); @@ -65,13 +73,22 @@ Object.keys(emojiMap).forEach(key => { if (!Array.isArray(shortCodesToEmojiData[shortcode])) { shortCodesToEmojiData[shortcode] = [[]]; } + shortCodesToEmojiData[shortcode][0].push(filenameData); } }); Object.keys(emojiIndex.emojis).forEach(key => { - const { native } = emojiIndex.emojis[key]; + let emoji = emojiIndex.emojis[key]; + + // Emojis with skin tone modifiers are stored like this + if (Object.prototype.hasOwnProperty.call(emoji, '1')) { + emoji = emoji['1']; + } + + const { native } = emoji; let { short_names, search, unified } = emojiMartData.emojis[key]; + if (short_names[0] !== key) { throw new Error('The compresser expects the first short_code to be the ' + 'key. It may need to be rewritten if the emoji change such that this ' + @@ -81,11 +98,16 @@ Object.keys(emojiIndex.emojis).forEach(key => { short_names = short_names.slice(1); // first short name can be inferred from the key const searchData = [native, short_names, search]; + if (unicodeToUnifiedName(native) !== unified) { // unified name can't be derived from unicodeToUnifiedName searchData.push(unified); } + if (!Array.isArray(shortCodesToEmojiData[key])) { + shortCodesToEmojiData[key] = [[]]; + } + shortCodesToEmojiData[key].push(searchData); }); diff --git a/app/javascript/flavours/glitch/util/emoji/unicode_to_unified_name.js b/app/javascript/flavours/glitch/util/emoji/unicode_to_unified_name.js index 808ac197efe..d29550f1226 100644 --- a/app/javascript/flavours/glitch/util/emoji/unicode_to_unified_name.js +++ b/app/javascript/flavours/glitch/util/emoji/unicode_to_unified_name.js @@ -2,16 +2,20 @@ function padLeft(str, num) { while (str.length < num) { str = '0' + str; } + return str; } exports.unicodeToUnifiedName = (str) => { let output = ''; + for (let i = 0; i < str.length; i += 2) { if (i > 0) { output += '-'; } + output += padLeft(str.codePointAt(i).toString(16).toUpperCase(), 4); } + return output; };