Improve emojis - use SVGs where possible

This commit is contained in:
Eugen Rochko 2017-03-29 22:27:24 +02:00
parent bb7006bda1
commit 333e44c3fc
1838 changed files with 1947 additions and 8 deletions

View File

@ -1,9 +1,35 @@
import emojione from 'emojione';
emojione.imageType = 'png';
emojione.sprites = false;
emojione.imagePathPNG = '/emoji/';
const toImage = str => shortnameToImage(unicodeToImage(str));
const unicodeToImage = str => {
const mappedUnicode = emojione.mapUnicodeToShort();
return str.replace(emojione.regUnicode, unicodeChar => {
if (typeof unicodeChar === 'undefined' || unicodeChar === '' || !(unicodeChar in emojione.jsEscapeMap)) {
return unicodeChar;
}
const unicode = emojione.jsEscapeMap[unicodeChar];
const short = mappedUnicode[unicode];
const filename = emojione.emojioneList[short].fname;
const alt = emojione.convert(unicode.toUpperCase());
return `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${filename}.svg" />`;
});
};
const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => {
if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) {
return shortname;
}
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
const alt = emojione.convert(unicode.toUpperCase());
return `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${unicode}.svg" />`;
});
export default function emojify(text) {
return emojione.toImage(text);
return toImage(text);
};

View File

@ -43,7 +43,7 @@ const EmojiPickerDropdown = React.createClass({
return (
<Dropdown ref={this.setRef} style={style}>
<DropdownTrigger className='emoji-button' title={intl.formatMessage(messages.emoji)} style={{ fontSize: `24px`, width: `24px`, lineHeight: `24px`, display: 'block', marginLeft: '2px' }}>
<img className="emojione" alt="🙂" src="/emoji/1f602.png" />
<img draggable="false" className="emojione" alt="🙂" src="/emoji/1f602.svg" />
</DropdownTrigger>
<DropdownContent className='dropdown__left'>

View File

@ -41,7 +41,7 @@ const GettingStarted = ({ intl, me }) => {
<ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' />
</div>
<div className='scrollable optionally-scrollable'>
<div className='scrollable optionally-scrollable' style={{ display: 'flex', flexDirection: 'column' }}>
</