forked from cybrespace/pinafore
91 lines
No EOL
2.1 KiB
HTML
91 lines
No EOL
2.1 KiB
HTML
<ModalDialog
|
|
{id}
|
|
{label}
|
|
{title}
|
|
background="var(--main-bg)"
|
|
>
|
|
<div class="custom-emoji-container">
|
|
{#if emojis.length}
|
|
<ul class="custom-emoji-list">
|
|
{#each emojis as emoji}
|
|
<li class="custom-emoji">
|
|
<button type="button" on:click="onClickEmoji(emoji)">
|
|
<img src={$autoplayGifs ? emoji.url : emoji.static_url}
|
|
alt=":{emoji.shortcode}:"
|
|
title=":{emoji.shortcode}:"
|
|
/>
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<div class="custom-emoji-no-emoji">No custom emoji found for this instance.</div>
|
|
{/if}
|
|
</div>
|
|
</ModalDialog>
|
|
<style>
|
|
.custom-emoji-container {
|
|
max-width: 100%;
|
|
width: 400px;
|
|
height: 300px;
|
|
overflow: auto;
|
|
}
|
|
.custom-emoji-no-emoji {
|
|
font-size: 1.3em;
|
|
padding: 20px;
|
|
}
|
|
.custom-emoji-list {
|
|
list-style: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
|
|
grid-gap: 5px;
|
|
padding: 20px 10px;
|
|
}
|
|
.custom-emoji button {
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
background: none;
|
|
}
|
|
.custom-emoji img {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import ModalDialog from './ModalDialog.html'
|
|
import { store } from '../../../_store/store'
|
|
import { insertEmoji } from '../../../_actions/emoji'
|
|
import { show } from '../helpers/showDialog'
|
|
import { close } from '../helpers/closeDialog'
|
|
import { oncreate } from '../helpers/onCreateDialog'
|
|
|
|
export default {
|
|
oncreate,
|
|
components: {
|
|
ModalDialog
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
emojis: ({ $currentCustomEmoji }) => {
|
|
if (!$currentCustomEmoji) {
|
|
return []
|
|
}
|
|
return $currentCustomEmoji.filter(emoji => emoji.visible_in_picker)
|
|
}
|
|
},
|
|
methods: {
|
|
show,
|
|
close,
|
|
onClickEmoji (emoji) {
|
|
let { realm } = this.get()
|
|
insertEmoji(realm, emoji)
|
|
this.close()
|
|
}
|
|
}
|
|
}
|
|
</script> |