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: '', keyword: '',
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false, showingStickers: false,
zoomEmoji: false,
spamMode: false spamMode: false
} }
}, },
@ -61,12 +60,6 @@ const EmojiPicker = {
}, },
onStickerUploadFailed (e) { onStickerUploadFailed (e) {
this.$emit('sticker-upload-failed', 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: { watch: {

View file

@ -10,21 +10,6 @@
margin: 0 !important; margin: 0 !important;
z-index: 1; 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 { .spam-mode {
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
@ -150,10 +135,6 @@
cursor: pointer; cursor: pointer;
&:hover {
opacity: 0
}
img { img {
object-fit: contain; object-fit: contain;
max-width: 100%; max-width: 100%;

View file

@ -65,12 +65,8 @@
:title="emoji.displayText" :title="emoji.displayText"
class="emoji-item" class="emoji-item"
@click.stop.prevent="onEmoji(emoji)" @click.stop.prevent="onEmoji(emoji)"
@mouseenter="setZoomEmoji($event, emoji)"
@mouseleave="setZoomEmoji($event, false)"
> >
<span v-if="!emoji.imageUrl"> <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
{{ emoji.replacement }}
</span>
<img <img
v-else v-else
:src="emoji.imageUrl" :src="emoji.imageUrl"
@ -99,18 +95,6 @@
/> />
</div> </div>
</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> </div>
</template> </template>

View file

@ -696,22 +696,6 @@ $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;
@ -721,9 +705,6 @@ $status-margin: 0.75em;
&.emoji { &.emoji {
width: 32px; width: 32px;
height: 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 emojis.reduce((acc, emoji) => {
return acc.replace( return acc.replace(
new RegExp(`:${emoji.shortcode}:`, 'g'), 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) }, string)
} }

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 = '<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, '\'') .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, '\'') .replace(/"/g, '\'')
it('correctly replaces shortcodes in supplied string', () => { it('correctly replaces shortcodes in supplied string', () => {