usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/frontend/src/pages/admin/custom-emojis-manager.local.vue
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>

116
packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue → packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
View File

@ -4,69 +4,71 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="_gaps"> <MkSpacer>
<MkFolder> <div class="_gaps">
<template #icon><i class="ti ti-settings"></i></template> <MkFolder>
<template #label>{{ i18n.ts._customEmojisManager._local._register.uploadSettingTitle }}</template> <template #icon><i class="ti ti-settings"></i></template>
<template #caption>{{ i18n.ts._customEmojisManager._local._register.uploadSettingDescription }}</template> <template #label>{{ i18n.ts._customEmojisManager._local._register.uploadSettingTitle }}</template>
<template #caption>{{ i18n.ts._customEmojisManager._local._register.uploadSettingDescription }}</template>
<div class="_gaps"> <div class="_gaps">
<MkSelect v-model="selectedFolderId"> <MkSelect v-model="selectedFolderId">
<template #label>{{ i18n.ts.uploadFolder }}</template> <template #label>{{ i18n.ts.uploadFolder }}</template>
<option v-for="folder in uploadFolders" :key="folder.id" :value="folder.id"> <option v-for="folder in uploadFolders" :key="folder.id" :value="folder.id">
{{ folder.name }} {{ folder.name }}
</option> </option>
</MkSelect> </MkSelect>
<MkSwitch v-model="directoryToCategory"> <MkSwitch v-model="directoryToCategory">
<template #label>{{ i18n.ts._customEmojisManager._local._register.directoryToCategoryLabel }}</template> <template #label>{{ i18n.ts._customEmojisManager._local._register.directoryToCategoryLabel }}</template>
<template #caption>{{ i18n.ts._customEmojisManager._local._register.directoryToCategoryCaption }}</template> <template #caption>{{ i18n.ts._customEmojisManager._local._register.directoryToCategoryCaption }}</template>
</MkSwitch> </MkSwitch>
</div>
</MkFolder>
<MkFolder>
<template #icon><i class="ti ti-notes"></i></template>
<template #label>{{ i18n.ts._customEmojisManager._gridCommon.registrationLogs }}</template>
<template #caption>
{{ i18n.ts._customEmojisManager._gridCommon.registrationLogsCaption }}
</template>
<XRegisterLogs :logs="requestLogs"/>
</MkFolder>
<div
:class="[$style.uploadBox, [isDragOver ? $style.dragOver : {}]]"
@dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false"
@drop.prevent.stop="onDrop"
>
<div style="margin-top: 1em">
{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaCaption }}
</div>
<ul>
<li>{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList1 }}</li>
<li><a @click.prevent="onFileSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList2 }}</a></li>
<li><a @click.prevent="onDriveSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList3 }}</a></li>
</ul>
</div> </div>
</MkFolder>
<MkFolder> <div v-if="gridItems.length > 0" :class="$style.gridArea">
<template #icon><i class="ti ti-notes"></i></template> <MkGrid
<template #label>{{ i18n.ts._customEmojisManager._gridCommon.registrationLogs }}</template> :data="gridItems"
<template #caption> :settings="setupGrid()"
{{ i18n.ts._customEmojisManager._gridCommon.registrationLogsCaption }} @event="onGridEvent"
</template> />
<XRegisterLogs :logs="requestLogs"/>
</MkFolder>
<div
:class="[$style.uploadBox, [isDragOver ? $style.dragOver : {}]]"
@dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false"
@drop.prevent.stop="onDrop"
>
<div style="margin-top: 1em">
{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaCaption }}
</div> </div>
<ul>
<li>{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList1 }}</li>
<li><a @click.prevent="onFileSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList2 }}</a></li>
<li><a @click.prevent="onDriveSelectClicked">{{ i18n.ts._customEmojisManager._local._register.emojiInputAreaList3 }}</a></li>
</ul>
</div>
<div v-if="gridItems.length > 0" :class="$style.gridArea"> <div v-if="gridItems.length > 0" :class="$style.footer">
<MkGrid <MkButton primary :disabled="registerButtonDisabled" @click="onRegistryClicked">
:data="gridItems" {{ i18n.ts.registration }}
:settings="setupGrid()" </MkButton>
@event="onGridEvent" <MkButton @click="onClearClicked">
/> {{ i18n.ts.clear }}
</MkButton>
</div>
</div> </div>
</MkSpacer>
<div v-if="gridItems.length > 0" :class="$style.footer">
<MkButton primary :disabled="registerButtonDisabled" @click="onRegistryClicked">
{{ i18n.ts.registration }}
</MkButton>
<MkButton @click="onClearClicked">
{{ i18n.ts.clear }}
</MkButton>
</div>
</div>
</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: '',

22
packages/frontend/src/pages/admin/custom-emojis-manager2.vue
View File

@ -4,25 +4,20 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div> <PageWithHeader v-model:tab="headerTab" :tabs="headerTabs">
<MkStickyContainer> <XGridLocalComponent v-if="headerTab === 'local'" :class="$style.local"/>
<template #header> <XGridRemoteComponent v-else-if="headerTab === 'remote'" :class="$style.remote"/>
<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs"/> <XRegisterComponent v-else-if="headerTab === 'register'" :class="$style.register"/>
</template> </PageWithHeader>
<XGridLocalComponent v-if="headerTab === 'local'" :class="$style.local"/>
<XGridRemoteComponent v-else/>
</MkStickyContainer>
</div>
</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(() => ({