カスタム絵文字一覧ページ

2 files changed, 158 insertions, 0 deletions

diff --git a/src/client/menu.ts b/src/client/menu.ts
index 8a9f4d4ac6..b00fa7a6ad 100644
--- a/src/client/menu.ts
+++ b/src/client/menu.ts
@@ -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',
diff --git a/src/client/pages/emojis.vue b/src/client/pages/emojis.vue
new file mode 100644
index 0000000000..c766b5f7b8
--- /dev/null
+++ b/src/client/pages/emojis.vue
@@ -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>