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

Update mute-block.vue

This commit is contained in:
syuilo 2025-02-22 21:18:43 +09:00
parent 35160f602e
commit bf02152fbc
1 changed files with 121 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
packages/frontend/src/pages/settings/mute-block.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_gaps_m"> <div class="_gaps_m">
<SearchMarker <SearchMarker
:label="i18n.ts.wordMute" :label="i18n.ts.wordMute"
:keywords="['word']" :keywords="['note', 'word', 'soft', 'mute', 'hide']"
> >
<MkFolder> <MkFolder>
<template #icon><i class="ti ti-message-off"></i></template> <template #icon><i class="ti ti-message-off"></i></template>
@ -29,119 +29,144 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder> </MkFolder>
</SearchMarker> </SearchMarker>
<MkFolder> <SearchMarker
<template #icon><i class="ti ti-message-off"></i></template> :label="i18n.ts.hardWordMute"
<template #label>{{ i18n.ts.hardWordMute }}</template> :keywords="['note', 'word', 'hard', 'mute', 'hide']"
>
<MkFolder>
<template #icon><i class="ti ti-message-off"></i></template>
<template #label>{{ i18n.ts.hardWordMute }}</template>
<div class="_gaps_m"> <div class="_gaps_m">
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo> <MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/> <XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
</div> </div>
</MkFolder> </MkFolder>
</SearchMarker>
<MkFolder v-if="instance.federation !== 'none'"> <SearchMarker
<template #icon><i class="ti ti-planet-off"></i></template> :label="i18n.ts.instanceMute"
<template #label>{{ i18n.ts.instanceMute }}</template> :keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']"
>
<MkFolder v-if="instance.federation !== 'none'">
<template #icon><i class="ti ti-planet-off"></i></template>
<template #label>{{ i18n.ts.instanceMute }}</template>
<XInstanceMute/> <XInstanceMute/>
</MkFolder> </MkFolder>
</SearchMarker>
<MkFolder> <SearchMarker
<template #icon><i class="ti ti-repeat-off"></i></template> :label="`${i18n.ts.mutedUsers} (${ i18n.ts.renote })`"
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template> :keywords="['renote', 'mute', 'hide', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-repeat-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
<MkPagination :pagination="renoteMutingPagination"> <MkPagination :pagination="renoteMutingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/> <img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div> <div>{{ i18n.ts.noUsers }}</div>
</div> </div>
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<div class="_gaps_s"> <div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]"> <div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain"> <div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)"> <MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/> <MkUserCardMini :user="item.mutee"/>
</MkA> </MkA>
<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button> <button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button> <button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div> </div>
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub"> <div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div> <div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
</div>
</div> </div>
</div> </div>
</div> </template>
</template> </MkPagination>
</MkPagination> </MkFolder>
</MkFolder> </SearchMarker>
<MkFolder> <SearchMarker
<template #icon><i class="ti ti-eye-off"></i></template> :label="i18n.ts.mutedUsers"
<template #label>{{ i18n.ts.mutedUsers }}</template> :keywords="['note', 'mute', 'hide', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-eye-off"></i></template>
<template #label>{{ i18n.ts.mutedUsers }}</template>
<MkPagination :pagination="mutingPagination"> <MkPagination :pagination="mutingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/> <img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div> <div>{{ i18n.ts.noUsers }}</div>
</div> </div>
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<div class="_gaps_s"> <div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]"> <div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain"> <div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)"> <MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
<MkUserCardMini :user="item.mutee"/> <MkUserCardMini :user="item.mutee"/>
</MkA> </MkA>
<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button> <button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button> <button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div> </div>
<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub"> <div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div> <div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div> <div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div> <div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div> </div>
</div> </div>
</div> </template>
</template> </MkPagination>
</MkPagination> </MkFolder>
</MkFolder> </SearchMarker>
<MkFolder> <SearchMarker
<template #icon><i class="ti ti-ban"></i></template> :label="i18n.ts.blockedUsers"
<template #label>{{ i18n.ts.blockedUsers }}</template> :keywords="['block', 'user']"
>
<MkFolder>
<template #icon><i class="ti ti-ban"></i></template>
<template #label>{{ i18n.ts.blockedUsers }}</template>
<MkPagination :pagination="blockingPagination"> <MkPagination :pagination="blockingPagination">
<template #empty> <template #empty>
<div class="_fullinfo"> <div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost"/> <img :src="infoImageUrl" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div> <div>{{ i18n.ts.noUsers }}</div>
</div> </div>
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<div class="_gaps_s"> <div class="_gaps_s">
<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]"> <div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
<div :class="$style.userItemMain"> <div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)"> <MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
<MkUserCardMini :user="item.blockee"/> <MkUserCardMini :user="item.blockee"/>
</MkA> </MkA>
<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button> <button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button> <button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
</div> </div>
<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub"> <div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div> <div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div> <div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div> <div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div> </div>
</div> </div>
</div> </template>
</template> </MkPagination>
</MkPagination> </MkFolder>
</MkFolder> </SearchMarker>
</div> </div>
</SearchMarker> </SearchMarker>
</template> </template>