when autoplay is off play animated emoji on hover
parent
506d2e9cf0
commit
8a1ac19777
|
@ -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 {
|
.emoji-picker-dropdown__menu {
|
||||||
background: $simple-background-color;
|
background: $simple-background-color;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -28,8 +28,11 @@ const emojify = (str, customEmojis = {}) => {
|
||||||
// now got a replacee as ':shortname:'
|
// now got a replacee as ':shortname:'
|
||||||
// if you want additional emoji handler, add statements below which set replacement and return true.
|
// if you want additional emoji handler, add statements below which set replacement and return true.
|
||||||
if (shortname in customEmojis) {
|
if (shortname in customEmojis) {
|
||||||
const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
|
if (autoPlayGif) {
|
||||||
replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
|
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 true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
|
|
@ -88,6 +88,7 @@
|
||||||
-if current_account&.user_wants_larger_emoji?
|
-if current_account&.user_wants_larger_emoji?
|
||||||
:css
|
:css
|
||||||
.status__content .emojione { width: 32px !important; height: 32px !important }
|
.status__content .emojione { width: 32px !important; height: 32px !important }
|
||||||
|
.status__content .hoverplay:hover { padding-left: 32px !important }
|
||||||
|
|
||||||
%body{ class: body_classes }
|
%body{ class: body_classes }
|
||||||
= content_for?(:content) ? yield(:content) : yield
|
= content_for?(:content) ? yield(:content) : yield
|
||||||
|
|
Loading…
Reference in New Issue