Update mute-block.vue
This commit is contained in:
syuilo
parent
afc481d3db
commit
35160f602e
|
|
@ -4,146 +4,146 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="_gaps_m">
|
<SearchMarker path="/settings/mute-block" :label="i18n.ts.muteAndBlock" icon="ti ti-ban" :keywords="['mute', 'block']">
|
||||||
<SearchMarker
|
<div class="_gaps_m">
|
||||||
:locationLabel="[i18n.ts.muteAndBlock]"
|
<SearchMarker
|
||||||
icon="ti ti-ban"
|
:label="i18n.ts.wordMute"
|
||||||
:keywords="['mute', i18n.ts.wordMute]"
|
:keywords="['word']"
|
||||||
>
|
>
|
||||||
|
<MkFolder>
|
||||||
|
<template #icon><i class="ti ti-message-off"></i></template>
|
||||||
|
<template #label>{{ i18n.ts.wordMute }}</template>
|
||||||
|
|
||||||
|
<div class="_gaps_m">
|
||||||
|
<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
|
||||||
|
|
||||||
|
<SearchMarker
|
||||||
|
:label="i18n.ts.showMutedWord"
|
||||||
|
:keywords="['show']"
|
||||||
|
>
|
||||||
|
<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
|
||||||
|
</SearchMarker>
|
||||||
|
|
||||||
|
<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
|
||||||
|
</div>
|
||||||
|
</MkFolder>
|
||||||
|
</SearchMarker>
|
||||||
|
|
||||||
<MkFolder>
|
<MkFolder>
|
||||||
<template #icon><i class="ti ti-message-off"></i></template>
|
<template #icon><i class="ti ti-message-off"></i></template>
|
||||||
<template #label>{{ i18n.ts.wordMute }}</template>
|
<template #label>{{ i18n.ts.hardWordMute }}</template>
|
||||||
|
|
||||||
<div class="_gaps_m">
|
<div class="_gaps_m">
|
||||||
<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
|
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
|
||||||
|
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
|
||||||
<SearchMarker
|
|
||||||
:locationLabel="[i18n.ts.muteAndBlock, i18n.ts.wordMute]"
|
|
||||||
icon="ti ti-ban"
|
|
||||||
:keywords="['showMutedWord', i18n.ts.showMutedWord]"
|
|
||||||
>
|
|
||||||
<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
|
|
||||||
</SearchMarker>
|
|
||||||
|
|
||||||
<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
|
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
</SearchMarker>
|
|
||||||
|
|
||||||
<MkFolder>
|
<MkFolder v-if="instance.federation !== 'none'">
|
||||||
<template #icon><i class="ti ti-message-off"></i></template>
|
<template #icon><i class="ti ti-planet-off"></i></template>
|
||||||
<template #label>{{ i18n.ts.hardWordMute }}</template>
|
<template #label>{{ i18n.ts.instanceMute }}</template>
|
||||||
|
|
||||||
<div class="_gaps_m">
|
<XInstanceMute/>
|
||||||
<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
|
</MkFolder>
|
||||||
<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
|
|
||||||
</div>
|
|
||||||
</MkFolder>
|
|
||||||
|
|
||||||
<MkFolder v-if="instance.federation !== 'none'">
|
<MkFolder>
|
||||||
<template #icon><i class="ti ti-planet-off"></i></template>
|
<template #icon><i class="ti ti-repeat-off"></i></template>
|
||||||
<template #label>{{ i18n.ts.instanceMute }}</template>
|
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
|
||||||
|
|
||||||
<XInstanceMute/>
|
<MkPagination :pagination="renoteMutingPagination">
|
||||||
</MkFolder>
|
<template #empty>
|
||||||
|
<div class="_fullinfo">
|
||||||
|
<img :src="infoImageUrl" class="_ghost"/>
|
||||||
|
<div>{{ i18n.ts.noUsers }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<MkFolder>
|
<template #default="{ items }">
|
||||||
<template #icon><i class="ti ti-repeat-off"></i></template>
|
<div class="_gaps_s">
|
||||||
<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
|
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
|
||||||
|
<div :class="$style.userItemMain">
|
||||||
<MkPagination :pagination="renoteMutingPagination">
|
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
|
||||||
<template #empty>
|
<MkUserCardMini :user="item.mutee"/>
|
||||||
<div class="_fullinfo">
|
</MkA>
|
||||||
<img :src="infoImageUrl" class="_ghost"/>
|
<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
|
||||||
<div>{{ i18n.ts.noUsers }}</div>
|
<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
|
||||||
|
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
|
||||||
<template #default="{ items }">
|
</div>
|
||||||
<div class="_gaps_s">
|
|
||||||
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
|
|
||||||
<div :class="$style.userItemMain">
|
|
||||||
<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
|
|
||||||
<MkUserCardMini :user="item.mutee"/>
|
|
||||||
</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.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
|
|
||||||
</div>
|
|
||||||
<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
|
|
||||||
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
</template>
|
</MkPagination>
|
||||||
</MkPagination>
|
</MkFolder>
|
||||||
</MkFolder>
|
|
||||||
|
|
||||||
<MkFolder>
|
<MkFolder>
|
||||||
<template #icon><i class="ti ti-eye-off"></i></template>
|
<template #icon><i class="ti ti-eye-off"></i></template>
|
||||||
<template #label>{{ i18n.ts.mutedUsers }}</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>
|
|
||||||
|
|
||||||
<MkFolder>
|
<MkFolder>
|
||||||
<template #icon><i class="ti ti-ban"></i></template>
|
<template #icon><i class="ti ti-ban"></i></template>
|
||||||
<template #label>{{ i18n.ts.blockedUsers }}</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>
|
</div>
|
||||||
</div>
|
</SearchMarker>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue