[Glitch] Add assets from Twemoji 13.1.0

Port abd7b4636a to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
4 years ago · d2c9f39c0b
parent 0157caacef
commit d2c9f39c0b
4 changed files with 112 additions and 16 deletions
--- 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 = () => (
+  <div className='emoji-mart-no-results'>
+    <Emoji
+      emoji='sleuth_or_spy'
+      set='twitter'
+      size={32}
+      sheetSize={32}
+      backgroundImageFn={backgroundImageFn}
+    />
+
+    <div className='emoji-mart-no-results-label'>
+      <FormattedMessage id='emoji_button.not_found' defaultMessage='No matching emojis found' />
+    </div>
+  </div>
+);
+
 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}
--- 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;
+  color: $light-text-color;
  text-align: center;
+  padding: 5px 6px;
  padding-top: 70px;
-  color: $light-text-color;
-
-  .emoji-mart-category-label {
-    display: none;
-  }

 .emoji-mart-no-results-label {
    margin-top: .2em;
  }

  .emoji-mart-emoji:hover::before {
+    cursor: default;
    content: none;
  }
 }
--- a/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js
+++ b/app/javascript/flavours/glitch/util/emoji/emoji_compressed.js
@ -10,27 +10,35 @@ const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
 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 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);
 });

--- 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;
 };