worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(client): improve mute-block page

Browse source
This commit is contained in:
syuilo 2023-03-07 09:37:02 +09:00
parent 2b884ba338
commit 3ecb863372
1 changed files with 133 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

145
packages/frontend/src/pages/settings/mute-block.vue
View file

@ -5,22 +5,60 @@
<option value="block">{{ i18n.ts.blockedUsers }}</option>
</MkTab>
<div v-if="tab === 'mute'">
<MkPagination :pagination="mutingPagination" class="muting">
<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
<template #default="{items}">
<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
<MkAcct :user="mute.mutee"/>
</FormLink>
<MkPagination :pagination="mutingPagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.mutee.id}`">
<MkUserCardMini :user="item.mutee"/>
</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.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ item.expiresAt.toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</div>
<div v-if="tab === 'block'">
<MkPagination :pagination="blockingPagination" class="blocking">
<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
<template #default="{items}">
<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
<MkAcct :user="block.blockee"/>
</FormLink>
<MkPagination :pagination="blockingPagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.noUsers }}</div>
</div>
</template>
<template #default="{ items }">
<div class="_gaps_s">
<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
<div :class="$style.userItemMain">
<MkA :class="$style.userItemMainBody" :to="`/user-info/${item.blockee.id}`">
<MkUserCardMini :user="item.blockee"/>
</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.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
</div>
<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
<div v-if="item.expiresAt">Period: {{ item.expiresAt.toLocaleString() }}</div>
<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
</div>
</div>
</div>
</template>
</MkPagination>
</div>
@ -36,6 +74,8 @@ import FormLink from '@/components/form/link.vue';
import { userPage } from '@/filters/user';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
import MkUserCardMini from '@/components/MkUserCardMini.vue';
import * as os from '@/os';
let tab = $ref('mute');
@ -49,6 +89,47 @@ const blockingPagination = {
limit: 10,
};
let expandedMuteItems = $ref([]);
let expandedBlockItems = $ref([]);
async function unmute(user, ev) {
os.popupMenu([{
text: i18n.ts.unmute,
icon: 'ti ti-x',
action: async () => {
await os.apiWithDialog('mute/delete', { userId: user.id });
//role.users = role.users.filter(u => u.id !== user.id);
},
}], ev.currentTarget ?? ev.target);
}
async function unblock(user, ev) {
os.popupMenu([{
text: i18n.ts.unblock,
icon: 'ti ti-x',
action: async () => {
await os.apiWithDialog('blocking/delete', { userId: user.id });
//role.users = role.users.filter(u => u.id !== user.id);
},
}], ev.currentTarget ?? ev.target);
}
async function toggleMuteItem(item) {
if (expandedMuteItems.includes(item.id)) {
expandedMuteItems = expandedMuteItems.filter(x => x !== item.id);
} else {
expandedMuteItems.push(item.id);
}
}
async function toggleBlockItem(item) {
if (expandedBlockItems.includes(item.id)) {
expandedBlockItems = expandedBlockItems.filter(x => x !== item.id);
} else {
expandedBlockItems.push(item.id);
}
}
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
@ -58,3 +139,43 @@ definePageMetadata({
icon: 'ti ti-ban',
});
</script>
<style lang="scss" module>
.userItemMain {
display: flex;
}
.userItemSub {
padding: 6px 12px;
font-size: 85%;
color: var(--fgTransparentWeak);
}
.userItemMainBody {
flex: 1;
min-width: 0;
margin-right: 8px;
&:hover {
text-decoration: none;
}
}
.userToggle,
.remove {
width: 32px;
height: 32px;
align-self: center;
}
.chevron {
display: block;
transition: transform 0.1s ease-out;
}
.userItem.userItemOpend {
.chevron {
transform: rotateX(180deg);
}
}
</style>