pinafore/routes/_components/dialog/components/EmojiDialog.html

91 lines
2.1 KiB
HTML
Raw Normal View History

2018-04-05 03:33:17 +00:00
<ModalDialog
{id}
{label}
{title}
2018-04-05 03:33:17 +00:00
background="var(--main-bg)"
>
2018-02-28 07:18:07 +00:00
<div class="custom-emoji-container">
{#if emojis.length}
2018-02-28 07:18:07 +00:00
<ul class="custom-emoji-list">
{#each emojis as emoji}
2018-02-28 07:18:07 +00:00
<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}:"
2018-02-28 07:18:07 +00:00
/>
</button>
</li>
{/each}
2018-02-28 07:18:07 +00:00
</ul>
{:else}
2018-02-28 07:18:07 +00:00
<div class="custom-emoji-no-emoji">No custom emoji found for this instance.</div>
{/if}
2018-02-28 07:18:07 +00:00
</div>
</ModalDialog>
<style>
.custom-emoji-container {
max-width: 100%;
width: 400px;
height: 300px;
2018-04-02 06:41:35 +00:00
overflow: auto;
2018-02-28 07:18:07 +00:00
}
.custom-emoji-no-emoji {
font-size: 1.3em;
padding: 20px;
}
.custom-emoji-list {
list-style: none;
display: grid;
2018-03-01 02:45:29 +00:00
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
2018-02-28 07:18:07 +00:00
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'
2018-02-28 07:18:07 +00:00
export default {
oncreate,
2018-02-28 07:18:07 +00:00
components: {
ModalDialog
},
store: () => store,
computed: {
emojis: ({ $currentCustomEmoji }) => {
2018-02-28 07:18:07 +00:00
if (!$currentCustomEmoji) {
return []
}
return $currentCustomEmoji.filter(emoji => emoji.visible_in_picker)
}
},
methods: {
show,
close,
2018-04-20 04:38:01 +00:00
onClickEmoji (emoji) {
let { realm } = this.get()
insertEmoji(realm, emoji)
this.close()
2018-02-28 07:18:07 +00:00
}
}
}
</script>