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 ``;
+ });
+};
+
+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 ``;
+});
export default function emojify(text) {
- return emojione.toImage(text);
+ return toImage(text);
};
diff --git a/app/assets/javascripts/components/features/account/components/header.jsx b/app/assets/javascripts/components/features/account/components/header.jsx
index e1aae3c77..a359963c4 100644
--- a/app/assets/javascripts/components/features/account/components/header.jsx
+++ b/app/assets/javascripts/components/features/account/components/header.jsx
@@ -4,6 +4,7 @@ import emojify from '../../../emoji';
import escapeTextContentForBrowser from 'escape-html';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from '../../../components/icon_button';
+import { Motion, spring } from 'react-motion';
const messages = defineMessages({
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
@@ -11,6 +12,47 @@ const messages = defineMessages({
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }
});
+const Avatar = React.createClass({
+
+ propTypes: {
+ account: ImmutablePropTypes.map.isRequired
+ },
+
+ getInitialState () {
+ return {
+ isHovered: false
+ };
+ },
+
+ mixins: [PureRenderMixin],
+
+ handleMouseOver () {
+ if (this.state.isHovered) return;
+ this.setState({ isHovered: true });
+ },
+
+ handleMouseOut () {
+ if (!this.state.isHovered) return;
+ this.setState({ isHovered: false });
+ },
+
+ render () {
+ const { account } = this.props;
+ const { isHovered } = this.state;
+
+ return (
+