enhance(frontend): improve new emojis manager

This commit is contained in:
syuilo 2025-04-27 13:31:07 +09:00
parent d91a4e3dec
commit 73b86d9276
3 changed files with 69 additions and 104 deletions

View File

@ -1,35 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkStickyContainer>
<template #header>
<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs" hideTitle thin/>
</template>
<XListComponent v-if="headerTab === 'list'" key="localList"/>
<MkSpacer v-else key="localRegister">
<XRegisterComponent/>
</MkSpacer>
</MkStickyContainer>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { i18n } from '@/i18n.js';
import XListComponent from '@/pages/admin/custom-emojis-manager.local.list.vue';
import XRegisterComponent from '@/pages/admin/custom-emojis-manager.local.register.vue';
type PageMode = 'list' | 'register';
const headerTab = ref<PageMode>('list');
const headerTabs = computed(() => [{
key: 'list',
title: i18n.ts._customEmojisManager._local.tabTitleList,
}, {
key: 'register',
title: i18n.ts._customEmojisManager._local.tabTitleRegister,
}]);
</script>

View File

@ -4,7 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="_gaps"> <MkSpacer>
<div class="_gaps">
<MkFolder> <MkFolder>
<template #icon><i class="ti ti-settings"></i></template> <template #icon><i class="ti ti-settings"></i></template>
<template #label>{{ i18n.ts._customEmojisManager._local._register.uploadSettingTitle }}</template> <template #label>{{ i18n.ts._customEmojisManager._local._register.uploadSettingTitle }}</template>
@ -66,7 +67,8 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.clear }} {{ i18n.ts.clear }}
</MkButton> </MkButton>
</div> </div>
</div> </div>
</MkSpacer>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -407,7 +409,7 @@ function fromDriveFile(it: Misskey.entities.DriveFile): GridItem {
return { return {
fileId: it.id, fileId: it.id,
url: it.url, url: it.url,
name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, ''), name: it.name.replace(/(\.[a-zA-Z0-9]+)+$/, '').replaceAll('-', '_').replaceAll(' ', '_'),
host: '', host: '',
category: '', category: '',
aliases: '', aliases: '',

View File

@ -4,25 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <PageWithHeader v-model:tab="headerTab" :tabs="headerTabs">
<MkStickyContainer>
<template #header>
<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs"/>
</template>
<XGridLocalComponent v-if="headerTab === 'local'" :class="$style.local"/> <XGridLocalComponent v-if="headerTab === 'local'" :class="$style.local"/>
<XGridRemoteComponent v-else/> <XGridRemoteComponent v-else-if="headerTab === 'remote'" :class="$style.remote"/>
</MkStickyContainer> <XRegisterComponent v-else-if="headerTab === 'register'" :class="$style.register"/>
</div> </PageWithHeader>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js'; import { definePage } from '@/page.js';
import XGridLocalComponent from '@/pages/admin/custom-emojis-manager.local.vue'; import XGridLocalComponent from '@/pages/admin/custom-emojis-manager.local.list.vue';
import XGridRemoteComponent from '@/pages/admin/custom-emojis-manager.remote.vue'; import XGridRemoteComponent from '@/pages/admin/custom-emojis-manager.remote.vue';
import MkPageHeader from '@/components/global/MkPageHeader.vue'; import XRegisterComponent from '@/pages/admin/custom-emojis-manager.register.vue';
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
type PageMode = 'local' | 'remote'; type PageMode = 'local' | 'remote';
@ -34,6 +29,9 @@ const headerTabs = computed(() => [{
}, { }, {
key: 'remote', key: 'remote',
title: i18n.ts.remote, title: i18n.ts.remote,
}, {
key: 'register',
title: i18n.ts._customEmojisManager._local.tabTitleRegister,
}]); }]);
definePage(computed(() => ({ definePage(computed(() => ({