カスタム絵文字一覧ページ
This commit is contained in:
syuilo
parent
3a28c06534
commit
742a005523
3 changed files with 159 additions and 0 deletions
|
|
@ -765,6 +765,7 @@ customCss: "カスタムCSS"
|
|||
customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
|
||||
global: "グローバル"
|
||||
squareAvatars: "アイコンを四角形で表示"
|
||||
searchResult: "検索結果"
|
||||
|
||||
_docs:
|
||||
continueReading: "続きを読む"
|
||||
|
|
|
|||
|
|
@ -113,6 +113,11 @@ export const menuDef = {
|
|||
icon: 'fas fa-satellite-dish',
|
||||
to: '/channels',
|
||||
},
|
||||
emojis: {
|
||||
title: 'emojis',
|
||||
icon: 'fas fa-laugh',
|
||||
to: '/emojis',
|
||||
},
|
||||
games: {
|
||||
title: 'games',
|
||||
icon: 'fas fa-gamepad',
|
||||
|
|
|
|||
153
src/client/pages/emojis.vue
Normal file
153
src/client/pages/emojis.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<div class="driuhtrh">
|
||||
<div class="query">
|
||||
<MkInput v-model="q" class="_inputNoTopMargin _inputNoBottomMargin">
|
||||
<template #prefix><i class="fas fa-search"></i></template>
|
||||
<template #label>{{ $ts.search }}</template>
|
||||
</MkInput>
|
||||
</div>
|
||||
|
||||
<div class="emojis">
|
||||
<MkFolder v-if="searchEmojis">
|
||||
<template #header>{{ $ts.searchResult }}</template>
|
||||
<div class="zuvgdzyt">
|
||||
<button v-for="emoji in searchEmojis" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
|
||||
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
||||
<div class="body">
|
||||
<div class="name _monospace">{{ emoji.name }}</div>
|
||||
<div class="info">{{ emoji.aliases.join(' ') }}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</MkFolder>
|
||||
<MkFolder v-for="category in customEmojiCategories" :key="category">
|
||||
<template #header>{{ category || $ts.other }}</template>
|
||||
<div class="zuvgdzyt">
|
||||
<button v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji _button" @click="menu(emoji, $event)">
|
||||
<img :src="emoji.url" class="img" :alt="emoji.name"/>
|
||||
<div class="body">
|
||||
<div class="name _monospace">{{ emoji.name }}</div>
|
||||
<div class="info">{{ emoji.aliases.join(' ') }}</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</MkFolder>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import MkButton from '@client/components/ui/button.vue';
|
||||
import MkInput from '@client/components/ui/input.vue';
|
||||
import MkSelect from '@client/components/ui/select.vue';
|
||||
import MkFolder from '@client/components/ui/folder.vue';
|
||||
import * as os from '@client/os';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { emojiCategories } from '@client/instance';
|
||||
import copyToClipboard from '@client/scripts/copy-to-clipboard';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
MkInput,
|
||||
MkSelect,
|
||||
MkFolder,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
[symbols.PAGE_INFO]: {
|
||||
title: this.$ts.customEmojis,
|
||||
icon: 'fas fa-laugh'
|
||||
},
|
||||
q: '',
|
||||
customEmojiCategories: emojiCategories,
|
||||
customEmojis: this.$instance.emojis,
|
||||
searchEmojis: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
q() {
|
||||
if (this.q === '' || this.q == null) {
|
||||
this.searchEmojis = null;
|
||||
return;
|
||||
}
|
||||
|
||||
this.searchEmojis = this.customEmojis.filter(e => e.name.includes(this.q) || e.aliases.includes(this.q));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
menu(emoji, ev) {
|
||||
os.modalMenu([{
|
||||
type: 'label',
|
||||
text: ':' + emoji.name + ':',
|
||||
}, {
|
||||
text: this.$ts.copy,
|
||||
icon: 'fas fa-copy',
|
||||
action: () => {
|
||||
copyToClipboard(`:${emoji.name}:`);
|
||||
os.success();
|
||||
}
|
||||
}], ev.currentTarget || ev.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.driuhtrh {
|
||||
> .query {
|
||||
background: var(--bg);
|
||||
padding: 16px;
|
||||
border-bottom: solid 0.5px var(--divider);
|
||||
}
|
||||
|
||||
> .emojis {
|
||||
.zuvgdzyt {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
||||
grid-gap: 12px;
|
||||
margin: 0 var(--margin) var(--margin) var(--margin);
|
||||
|
||||
> .emoji {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border: solid 1px var(--divider);
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
> .img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
padding: 0 0 0 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
> .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .info {
|
||||
opacity: 0.5;
|
||||
font-size: 0.9em;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue