diff options
Diffstat (limited to 'app/assets')
4 files changed, 33 insertions, 6 deletions
diff --git a/app/assets/javascripts/components/emoji.jsx b/app/assets/javascripts/components/emoji.jsx index c93c07c74..eee657b86 100644 --- a/app/assets/javascripts/components/emoji.jsx +++ b/app/assets/javascripts/components/emoji.jsx @@ -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); }; diff --git a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx index 471f0e1bb..1920b29bf 100644 --- a/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx +++ b/app/assets/javascripts/components/features/compose/components/emoji_picker_dropdown.jsx @@ -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'> diff --git a/app/assets/javascripts/components/features/getting_started/index.jsx b/app/assets/javascripts/components/features/getting_started/index.jsx index 846e4f53b..6f9e988ba 100644 --- a/app/assets/javascripts/components/features/getting_started/index.jsx +++ b/app/assets/javascripts/components/features/getting_started/index.jsx @@ -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' }}> <div className='static-content getting-started'> <p><FormattedMessage id='getting_started.about_addressing' defaultMessage='You can follow people if you know their username and the domain they are on by entering an e-mail-esque address into the form at the top of the sidebar.' /></p> <p><FormattedMessage id='getting_started.about_shortcuts' defaultMessage='If the target user is on the same domain as you, just the username will work. The same rule applies to mentioning people in statuses.' /></p> diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 45f93ef90..04d37546c 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -771,6 +771,7 @@ a.status__content__spoiler-link { padding: 0; display: flex; flex-direction: column; + overflow: hidden; overflow-y: auto; flex-grow: 1; } |