moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better hitbox for status emoji

This commit is contained in:
Henry Jameson 2019-09-08 21:18:05 +03:00
parent 7360a4d9ef
commit 9146bee7aa
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/status/status.vue
View File

@ -696,6 +696,22 @@ $status-margin: 0.75em;
line-height: 1.4em; line-height: 1.4em;
white-space: pre-wrap; white-space: pre-wrap;
.emoji-container {
display: inline-block;
width: 32px;
height: 32px;
z-index: 1;
&:hover {
z-index: 2;
.emoji {
transform: scale(3);
z-index: 2;
}
}
}
img, video { img, video {
max-width: 100%; max-width: 100%;
max-height: 400px; max-height: 400px;
@ -707,12 +723,7 @@ $status-margin: 0.75em;
height: 32px; height: 32px;
transition: transform 200ms; transition: transform 200ms;
transform: scale(1); transform: scale(1);
z-index: 1; pointer-events: none;
&:hover {
transform: scale(3);
z-index: 2;
}
} }
} }

2
src/services/entity_normalizer/entity_normalizer.service.js
View File

@ -194,7 +194,7 @@ export const addEmojis = (string, emojis) => {
return emojis.reduce((acc, emoji) => { return emojis.reduce((acc, emoji) => {
return acc.replace( return acc.replace(
new RegExp(`:${emoji.shortcode}:`, 'g'), new RegExp(`:${emoji.shortcode}:`, 'g'),
`<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />` `<span class='emoji-container'><img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' /></span>`
) )
}, string) }, string)
} }

4
test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
View File

@ -323,9 +323,9 @@ describe('API Entities normalizer', () => {
describe('MastoAPI emoji adder', () => { describe('MastoAPI emoji adder', () => {
const emojis = makeMockEmojiMasto() const emojis = makeMockEmojiMasto()
const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />' const imageHtml = '<span class="emoji-container"><img src="https://example.com/image.png" alt="image" title="image" class="emoji" /></span>'
.replace(/"/g, '\'') .replace(/"/g, '\'')
const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />' const thinkHtml = '<span class="emoji-container"><img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" /></span>'
.replace(/"/g, '\'') .replace(/"/g, '\'')
it('correctly replaces shortcodes in supplied string', () => { it('correctly replaces shortcodes in supplied string', () => {