forked from treehouse/mastodon
[Glitch] Add assets from Twemoji 13.1.0
Port abd7b4636a
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
signup-info-prompt
parent
0157caacef
commit
d2c9f39c0b
|
@ -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}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue