enhance(frontend): tweak ui

This commit is contained in:
syuilo 2023-10-03 18:33:22 +09:00
parent 000abcd2f0
commit 10ae0b329a

View file

@ -5,13 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkTab v-model="tab"> <MkFolder>
<option value="renoteMute">{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</option> <template #icon><i class="ti ti-repeat-off"></i></template>
<option value="mute">{{ i18n.ts.mutedUsers }}</option> <template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
<option value="block">{{ i18n.ts.blockedUsers }}</option>
</MkTab>
<div v-if="tab === 'renoteMute'">
<MkPagination :pagination="renoteMutingPagination"> <MkPagination :pagination="renoteMutingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -37,9 +34,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</template> </template>
</MkPagination> </MkPagination>
</div> </MkFolder>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }}</template>
<div v-else-if="tab === 'mute'">
<MkPagination :pagination="mutingPagination"> <MkPagination :pagination="mutingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -67,9 +67,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</template> </template>
</MkPagination> </MkPagination>
</div> </MkFolder>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedUsers }}</template>
<div v-else-if="tab === 'block'">
<MkPagination :pagination="blockingPagination"> <MkPagination :pagination="blockingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
@ -97,24 +100,20 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</template> </template>
</MkPagination> </MkPagination>
</div> </MkFolder>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import MkTab from '@/components/MkTab.vue';
import FormInfo from '@/components/MkInfo.vue';
import FormLink from '@/components/form/link.vue';
import { userPage } from '@/filters/user.js'; import { userPage } from '@/filters/user.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkUserCardMini from '@/components/MkUserCardMini.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { infoImageUrl } from '@/instance.js'; import { infoImageUrl } from '@/instance.js';
import MkFolder from '@/components/MkFolder.vue';
let tab = $ref('renoteMute');
const renoteMutingPagination = { const renoteMutingPagination = {
endpoint: 'renote-mute/list' as const, endpoint: 'renote-mute/list' as const,