Remove emoji zoom

This commit is contained in:
Henry Jameson 2019-09-12 19:15:22 +03:00
parent 4f0195b05c
commit 0d8b68632b
6 changed files with 5 additions and 66 deletions

View file

@ -17,7 +17,6 @@ const EmojiPicker = {
keyword: '',
activeGroup: 'custom',
showingStickers: false,
zoomEmoji: false,
spamMode: false
}
},
@ -61,12 +60,6 @@ const EmojiPicker = {
},
onStickerUploadFailed (e) {
this.$emit('sticker-upload-failed', e)
},
setZoomEmoji (e, emoji) {
this.zoomEmoji = emoji
const { x, y } = e.target.getBoundingClientRect()
this.$refs['zoom-portal'].style.left = (x - 32) + 'px'
this.$refs['zoom-portal'].style.top = (y - 32) + 'px'
}
},
watch: {

View file

@ -10,21 +10,6 @@
margin: 0 !important;
z-index: 1;
.zoom-portal {
position: fixed;
pointer-events: none;
width: 96px;
height: 96px;
font-size: 96px;
line-height: 96px;
z-index: 10;
img {
object-fit: contain;
width: 100%;
height: 100%;
}
}
.spam-mode {
padding: 7px;
line-height: normal;
@ -150,10 +135,6 @@
cursor: pointer;
&:hover {
opacity: 0
}
img {
object-fit: contain;
max-width: 100%;

View file

@ -65,16 +65,12 @@
:title="emoji.displayText"
class="emoji-item"
@click.stop.prevent="onEmoji(emoji)"
@mouseenter="setZoomEmoji($event, emoji)"
@mouseleave="setZoomEmoji($event, false)"
>
<span v-if="!emoji.imageUrl">
{{ emoji.replacement }}
</span>
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
<img
v-else
:src="emoji.imageUrl"
>
>
</span>
</div>
</div>
@ -99,18 +95,6 @@
/>
</div>
</div>
<div ref="zoom-portal" class="zoom-portal">
<span v-if="zoomEmoji">
<span v-if="!zoomEmoji.imageUrl">
{{ zoomEmoji.replacement }}
</span>
<img
v-else
:key="zoomEmoji.imageUrl"
:src="zoomEmoji.imageUrl"
>
</span>
</div>
</div>
</template>

View file

@ -696,22 +696,6 @@ $status-margin: 0.75em;
line-height: 1.4em;
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 {
max-width: 100%;
max-height: 400px;
@ -721,9 +705,6 @@ $status-margin: 0.75em;
&.emoji {
width: 32px;
height: 32px;
transition: transform 200ms;
transform: scale(1);
pointer-events: none;
}
}

View file

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

View file

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