enhance(frontend): フォロワーの通知にフォローバックボタンを追加 (MisskeyIO#552)
This commit is contained in:
まっちゃとーにゅ
GitHub
parent
7a01ecb53c
commit
26ae51c650
|
|
@ -6,25 +6,25 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<button
|
||||
class="_button"
|
||||
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing || hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
|
||||
:class="[$style.root, { [$style.wait]: wait, [$style.active]: userDetailed.isFollowing || userDetailed.hasPendingFollowRequestFromYou, [$style.full]: full, [$style.large]: large }]"
|
||||
:disabled="wait"
|
||||
@click="onClick"
|
||||
>
|
||||
<template v-if="!wait">
|
||||
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
||||
<template v-if="userDetailed.hasPendingFollowRequestFromYou && userDetailed.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
|
||||
</template>
|
||||
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
|
||||
<template v-else-if="userDetailed.hasPendingFollowRequestFromYou && !userDetailed.isLocked">
|
||||
<!-- つまりリモートフォローの場合。 -->
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
|
||||
</template>
|
||||
<template v-else-if="isFollowing">
|
||||
<template v-else-if="userDetailed.isFollowing">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && user.isLocked">
|
||||
<template v-else-if="!userDetailed.isFollowing && userDetailed.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
<template v-else-if="!isFollowing && !user.isLocked">
|
||||
<template v-else-if="!userDetailed.isFollowing && !userDetailed.isLocked">
|
||||
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,7 @@ import { $i } from '@/account.js';
|
|||
import { defaultStore } from '@/store.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
user: Misskey.entities.UserDetailed,
|
||||
user: { id: string } & Partial<Misskey.entities.UserDetailed>,
|
||||
full?: boolean,
|
||||
large?: boolean,
|
||||
}>(), {
|
||||
|
|
@ -54,26 +54,27 @@ const props = withDefaults(defineProps<{
|
|||
large: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(_: 'update:user', value: Misskey.entities.UserDetailed): void
|
||||
}>();
|
||||
const emit = defineEmits<
|
||||
(_: 'update:user', value: Misskey.entities.UserDetailed) => void
|
||||
>();
|
||||
|
||||
const isFollowing = ref(props.user.isFollowing);
|
||||
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
|
||||
const wait = ref(false);
|
||||
const userDetailed = ref<{ id: string } & Partial<Misskey.entities.UserDetailed>>(props.user);
|
||||
const wait = ref(props.user.isLocked === undefined);
|
||||
const connection = useStream().useChannel('main');
|
||||
|
||||
if (props.user.isFollowing == null) {
|
||||
if (userDetailed.value.isLocked === undefined) {
|
||||
misskeyApi('users/show', {
|
||||
userId: props.user.id,
|
||||
})
|
||||
.then(onFollowChange);
|
||||
.then(onFollowChange)
|
||||
.then(() => {
|
||||
wait.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function onFollowChange(user: Misskey.entities.UserDetailed) {
|
||||
if (user.id === props.user.id) {
|
||||
isFollowing.value = user.isFollowing;
|
||||
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
|
||||
userDetailed.value = user;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,10 +82,10 @@ async function onClick() {
|
|||
wait.value = true;
|
||||
|
||||
try {
|
||||
if (isFollowing.value) {
|
||||
if (userDetailed.value.isFollowing) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.tsx.unfollowConfirm({ name: props.user.name || props.user.username }),
|
||||
text: i18n.tsx.unfollowConfirm({ name: (userDetailed.value.name || userDetailed.value.username) ?? i18n.ts.user }),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
|
|
@ -93,35 +94,37 @@ async function onClick() {
|
|||
userId: props.user.id,
|
||||
});
|
||||
} else {
|
||||
if (hasPendingFollowRequestFromYou.value) {
|
||||
if (userDetailed.value.hasPendingFollowRequestFromYou) {
|
||||
await misskeyApi('following/requests/cancel', {
|
||||
userId: props.user.id,
|
||||
});
|
||||
hasPendingFollowRequestFromYou.value = false;
|
||||
userDetailed.value.hasPendingFollowRequestFromYou = false;
|
||||
} else {
|
||||
await misskeyApi('following/create', {
|
||||
userId: props.user.id,
|
||||
withReplies: defaultStore.state.defaultWithReplies,
|
||||
});
|
||||
emit('update:user', {
|
||||
...props.user,
|
||||
...userDetailed.value,
|
||||
withReplies: defaultStore.state.defaultWithReplies,
|
||||
});
|
||||
hasPendingFollowRequestFromYou.value = true;
|
||||
userDetailed.value.hasPendingFollowRequestFromYou = true;
|
||||
|
||||
claimAchievement('following1');
|
||||
if ($i) {
|
||||
claimAchievement('following1');
|
||||
|
||||
if ($i.followingCount >= 10) {
|
||||
claimAchievement('following10');
|
||||
}
|
||||
if ($i.followingCount >= 50) {
|
||||
claimAchievement('following50');
|
||||
}
|
||||
if ($i.followingCount >= 100) {
|
||||
claimAchievement('following100');
|
||||
}
|
||||
if ($i.followingCount >= 300) {
|
||||
claimAchievement('following300');
|
||||
if ($i.followingCount >= 10) {
|
||||
claimAchievement('following10');
|
||||
}
|
||||
if ($i.followingCount >= 50) {
|
||||
claimAchievement('following50');
|
||||
}
|
||||
if ($i.followingCount >= 100) {
|
||||
claimAchievement('following100');
|
||||
}
|
||||
if ($i.followingCount >= 300) {
|
||||
claimAchievement('following300');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -184,14 +187,6 @@ onBeforeUnmount(() => {
|
|||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//background: mix($primary, #fff, 20);
|
||||
}
|
||||
|
||||
&:active {
|
||||
//background: mix($primary, #fff, 40);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkA>
|
||||
<template v-else-if="notification.type === 'follow'">
|
||||
<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}</span>
|
||||
<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div>
|
||||
</template>
|
||||
<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
|
||||
<template v-else-if="notification.type === 'receiveFollowRequest'">
|
||||
|
|
@ -141,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
import { ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkReactionIcon from '@/components/MkReactionIcon.vue';
|
||||
import MkFollowButton from '@/components/MkFollowButton.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary.js';
|
||||
import { notePage } from '@/filters/note.js';
|
||||
|
|
|
|||
Loading…
Reference in a new issue