diff options
| author | multiple creatures <dev@multiple-creature.party> | 2019-05-16 15:41:49 -0500 |
|---|---|---|
| committer | multiple creatures <dev@multiple-creature.party> | 2019-05-21 03:16:23 -0500 |
| commit | 8a1ac197778aaf654472788d10461c855dca3b10 (patch) | |
| tree | 1c9933aad0eedd917168fa022a829f74ef49e898 /app | |
| parent | 506d2e9cf05bf9c2f927d581f52e1e268b724092 (diff) | |
when autoplay is off play animated emoji on hover
Diffstat (limited to 'app')
| -rw-r--r-- | app/javascript/flavours/glitch/styles/components/emoji.scss | 14 | ||||
| -rw-r--r-- | app/javascript/flavours/glitch/util/emoji/index.js | 7 | ||||
| -rwxr-xr-x | app/views/layouts/application.html.haml | 1 |
3 files changed, 20 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/emoji.scss b/app/javascript/flavours/glitch/styles/components/emoji.scss index dd386d698..2d1395e4f 100644 --- a/app/javascript/flavours/glitch/styles/components/emoji.scss +++ b/app/javascript/flavours/glitch/styles/components/emoji.scss @@ -11,6 +11,20 @@ } } +.hoverplay { + background-position: center; + background-repeat: no-repeat; + background-size: 0 0; +} + +.hoverplay:hover { + background-size: contain; + position: relative; + box-sizing: border-box; + overflow: hidden; + padding-left: 16px; +} + .emoji-picker-dropdown__menu { background: $simple-background-color; position: absolute; diff --git a/app/javascript/flavours/glitch/util/emoji/index.js b/app/javascript/flavours/glitch/util/emoji/index.js index 82a1ef89c..2205cd7a3 100644 --- a/app/javascript/flavours/glitch/util/emoji/index.js +++ b/app/javascript/flavours/glitch/util/emoji/index.js @@ -28,8 +28,11 @@ const emojify = (str, customEmojis = {}) => { // now got a replacee as ':shortname:' // if you want additional emoji handler, add statements below which set replacement and return true. if (shortname in customEmojis) { - const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url; - replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`; + if (autoPlayGif) { + replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${customEmojis[shortname].url}" />`; + } else { + replacement = `<img draggable="false" class="emojione hoverplay" alt="${shortname}" title="${shortname}" src="${customEmojis[shortname].static_url}" style="background-image:url(${customEmojis[shortname].url})" />`; + } return true; } return false; diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 387a0f7c3..85094b73d 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -88,6 +88,7 @@ -if current_account&.user_wants_larger_emoji? :css .status__content .emojione { width: 32px !important; height: 32px !important } + .status__content .hoverplay:hover { padding-left: 32px !important } %body{ class: body_classes } = content_for?(:content) ? yield(:content) : yield |