From 333e44c3fc687b1f6215db99283536b293cf937f Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 29 Mar 2017 22:27:24 +0200 Subject: Improve emojis - use SVGs where possible --- app/assets/javascripts/components/emoji.jsx | 34 +++++++++++++++++++--- .../compose/components/emoji_picker_dropdown.jsx | 2 +- .../components/features/getting_started/index.jsx | 2 +- app/assets/stylesheets/components.scss | 1 + 4 files changed, 33 insertions(+), 6 deletions(-) (limited to 'app/assets') 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 `${alt}`; + }); +}; + +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 `${alt}`; +}); 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 ( - 🙂 + 🙂 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 }) => { -
+

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