カスタム絵文字一覧を一覧、新着、申請中に分離

(cherry picked from commit 5c464cd1bc177f0276397a686160c5c77e774d10)
This commit is contained in:
tar_bin 2023-08-11 19:04:15 +09:00 committed by mattyatea
parent 51313e7ec2
commit bf9089209d
4 changed files with 65 additions and 28 deletions

1
locales/index.d.ts vendored
View File

@ -824,6 +824,7 @@ export interface Locale {
"high": string; "high": string;
"middle": string; "middle": string;
"low": string; "low": string;
"list": string;
"emailNotConfiguredWarning": string; "emailNotConfiguredWarning": string;
"ratio": string; "ratio": string;
"previewNoteText": string; "previewNoteText": string;

View File

@ -823,6 +823,7 @@ priority: "優先度"
high: "高" high: "高"
middle: "中" middle: "中"
low: "低" low: "低"
list: "一覧"
emailNotConfiguredWarning: "メールアドレスの設定がされていません。" emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
ratio: "比率" ratio: "比率"
previewNoteText: "本文をプレビュー" previewNoteText: "本文をプレビュー"

View File

@ -4,51 +4,88 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="_gaps"> <MkStickyContainer>
<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkButton v-if="$i && (!$i.isModerator && !$i.policies.canManageCustomEmojis && $i.policies.canRequestCustomEmojis)" primary @click="edit">{{ i18n.ts.requestCustomEmojis }}</MkButton> <MkSpacer v-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
<MkButton v-if="$i && ($i.isModerator || $i.policies.canManageCustomEmojis)" primary link to="/custom-emojis-manager">{{ i18n.ts.manageCustomEmojis }}</MkButton>
<MkButton v-if="$i && (!$i.isModerator && !$i.policies.canManageCustomEmojis && $i.policies.canRequestCustomEmojis)" primary @click="edit">{{ i18n.ts.requestCustomEmojis }}</MkButton>
<div class="query"> <div class="query" style="margin-top: 10px;">
<MkInput v-model="q" class="" :placeholder="i18n.ts.search"> <MkInput v-model="q" class="" :placeholder="i18n.ts.search">
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
</MkInput> </MkInput>
<!-- たくさんあると邪魔 <!-- たくさんあると邪魔
<div class="tags"> <div class="tags">
<span class="tag _button" v-for="tag in customEmojiTags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span> <span class="tag _button" v-for="tag in customEmojiTags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
</div>
-->
</div> </div>
-->
</div>
<MkFoldableSection v-if="searchEmojis"> <MkFoldableSection v-if="searchEmojis">
<template #header>{{ i18n.ts.searchResult }}</template> <template #header>{{ i18n.ts.searchResult }}</template>
<div :class="$style.emojis">
<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
</div>
</MkFoldableSection>
<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
<template #header>{{ category || i18n.ts.other }}</template>
<div :class="$style.emojis">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category && !e.draft)" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
</div>
</MkFoldableSection>
</MkSpacer>
<MkSpacer v-if="tab === 'new'" :contentMax="1000" :marginMin="20">
<div :class="$style.emojis"> <div :class="$style.emojis">
<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/> <XEmoji v-for="emoji in newEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
</div> </div>
</MkFoldableSection> </MkSpacer>
<MkSpacer v-if="tab === 'draft'" :contentMax="1000" :marginMin="20">
<MkFoldableSection v-for="category in customEmojiCategories" v-once :key="category">
<template #header>{{ category || i18n.ts.other }}</template>
<div :class="$style.emojis"> <div :class="$style.emojis">
<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/> <XEmoji v-for="emoji in draftEmojis" :key="emoji.name" :emoji="emoji" :draft="emoji.draft"/>
</div> </div>
</MkFoldableSection> </MkSpacer>
</div> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { watch, defineAsyncComponent } from 'vue'; import { watch, defineAsyncComponent, ref, computed } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import XEmoji from './emojis.emoji.vue'; import XEmoji from './emojis.emoji.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkFoldableSection from '@/components/MkFoldableSection.vue'; import MkFoldableSection from '@/components/MkFoldableSection.vue';
import { customEmojis, customEmojiCategories, getCustomEmojiTags } from '@/custom-emojis.js'; import { customEmojis, customEmojiCategories } from '@/custom-emojis.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import * as os from '@/os'; import * as os from '@/os';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata';
let tab = $ref('emojis');
const headerActions = $computed(() => []);
const headerTabs = $computed(() => [{
key: 'emojis',
title: i18n.ts.list,
}, {
key: 'new',
title: i18n.ts.newEmojis,
}, {
key: 'draft',
title: i18n.ts.draftEmojis,
}]);
definePageMetadata(ref({}));
const pagination = {
endpoint: 'admin/emoji/list' as const,
limit: 30,
params: computed(() => ({
query: (query.value && query.value !== '') ? query.value : null,
})),
};
const customEmojiTags = getCustomEmojiTags();
let q = $ref(''); let q = $ref('');
let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null); let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
let selectedTags = $ref(new Set()); let selectedTags = $ref(new Set());

View File

@ -89,9 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSection> </FormSection>
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20"> <XEmojis v-else-if="tab === 'emojis'"/>
<XEmojis/>
</MkSpacer>
<MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20"> <MkSpacer v-else-if="tab === 'federation'" :contentMax="1000" :marginMin="20">
<XFederation/> <XFederation/>
</MkSpacer> </MkSpacer>