[Glitch] Add assets from Twemoji 13.1.0

Port abd7b4636a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2021-06-01 14:35:49 +02:00 committed by Claire
parent 0157caacef
commit d2c9f39c0b
4 changed files with 113 additions and 17 deletions

View file

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

View file

@ -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;
.emoji-mart-category-label {
display: none;
}
text-align: center;
padding: 5px 6px;
padding-top: 70px;
.emoji-mart-no-results-label {
margin-top: .2em;
}
.emoji-mart-emoji:hover::before {
cursor: default;
content: none;
}
}

View file

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

View file

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