Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

enhance(frontend): フォロワーの通知にフォローバックボタンを追加 (MisskeyIO#552)

Browse source
This commit is contained in:
まっちゃとーにゅ 2024-03-21 00:34:59 +09:00 committed by GitHub
parent 7a01ecb53c
commit 26ae51c650
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
packages/frontend/src/components/MkFollowButton.vue
View file

@ -6,25 +6,25 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<button <button
class="_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" :disabled="wait"
@click="onClick" @click="onClick"
> >
<template v-if="!wait"> <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> <span v-if="full" :class="$style.text">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
</template> </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"/> <span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
</template> </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> <span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
</template> </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> <span v-if="full" :class="$style.text">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
</template> </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> <span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
</template> </template>
</template> </template>
@ -46,7 +46,7 @@ import { $i } from '@/account.js';
import { defaultStore } from '@/store.js'; import { defaultStore } from '@/store.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed, user: { id: string } & Partial<Misskey.entities.UserDetailed>,
full?: boolean, full?: boolean,
large?: boolean, large?: boolean,
}>(), { }>(), {
@ -54,26 +54,27 @@ const props = withDefaults(defineProps<{
large: false, large: false,
}); });
const emit = defineEmits<{ const emit = defineEmits<
(_: 'update:user', value: Misskey.entities.UserDetailed): void (_: 'update:user', value: Misskey.entities.UserDetailed) => void
}>(); >();
const isFollowing = ref(props.user.isFollowing); const userDetailed = ref<{ id: string } & Partial<Misskey.entities.UserDetailed>>(props.user);
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou); const wait = ref(props.user.isLocked === undefined);
const wait = ref(false);
const connection = useStream().useChannel('main'); const connection = useStream().useChannel('main');
if (props.user.isFollowing == null) { if (userDetailed.value.isLocked === undefined) {
misskeyApi('users/show', { misskeyApi('users/show', {
userId: props.user.id, userId: props.user.id,
}) })
.then(onFollowChange); .then(onFollowChange)
.then(() => {
wait.value = false;
});
} }
function onFollowChange(user: Misskey.entities.UserDetailed) { function onFollowChange(user: Misskey.entities.UserDetailed) {
if (user.id === props.user.id) { if (user.id === props.user.id) {
isFollowing.value = user.isFollowing; userDetailed.value = user;
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
} }
} }
@ -81,10 +82,10 @@ async function onClick() {
wait.value = true; wait.value = true;
try { try {
if (isFollowing.value) { if (userDetailed.value.isFollowing) {
const { canceled } = await os.confirm({ const { canceled } = await os.confirm({
type: 'warning', 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; if (canceled) return;
@ -93,35 +94,37 @@ async function onClick() {
userId: props.user.id, userId: props.user.id,
}); });
} else { } else {
if (hasPendingFollowRequestFromYou.value) { if (userDetailed.value.hasPendingFollowRequestFromYou) {
await misskeyApi('following/requests/cancel', { await misskeyApi('following/requests/cancel', {
userId: props.user.id, userId: props.user.id,
}); });
hasPendingFollowRequestFromYou.value = false; userDetailed.value.hasPendingFollowRequestFromYou = false;
} else { } else {
await misskeyApi('following/create', { await misskeyApi('following/create', {
userId: props.user.id, userId: props.user.id,
withReplies: defaultStore.state.defaultWithReplies, withReplies: defaultStore.state.defaultWithReplies,
}); });
emit('update:user', { emit('update:user', {
...props.user, ...userDetailed.value,
withReplies: defaultStore.state.defaultWithReplies, withReplies: defaultStore.state.defaultWithReplies,
}); });
hasPendingFollowRequestFromYou.value = true; userDetailed.value.hasPendingFollowRequestFromYou = true;
claimAchievement('following1'); if ($i) {
claimAchievement('following1');
if ($i.followingCount >= 10) { if ($i.followingCount >= 10) {
claimAchievement('following10'); claimAchievement('following10');
} }
if ($i.followingCount >= 50) { if ($i.followingCount >= 50) {
claimAchievement('following50'); claimAchievement('following50');
} }
if ($i.followingCount >= 100) { if ($i.followingCount >= 100) {
claimAchievement('following100'); claimAchievement('following100');
} }
if ($i.followingCount >= 300) { if ($i.followingCount >= 300) {
claimAchievement('following300'); claimAchievement('following300');
}
} }
} }
} }
@ -184,14 +187,6 @@ onBeforeUnmount(() => {
} }
} }
&:hover {
//background: mix($primary, #fff, 20);
}
&:active {
//background: mix($primary, #fff, 40);
}
&.active { &.active {
color: var(--fgOnAccent); color: var(--fgOnAccent);
background: var(--accent); background: var(--accent);

2
packages/frontend/src/components/MkNotification.vue
View file

@ -100,6 +100,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA> </MkA>
<template v-else-if="notification.type === 'follow'"> <template v-else-if="notification.type === 'follow'">
<span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}</span> <span :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}</span>
<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div>
</template> </template>
<span v-else-if="notification.type === 'followRequestAccepted'" :class="$style.text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span> <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'"> <template v-else-if="notification.type === 'receiveFollowRequest'">
@ -141,6 +142,7 @@ SPDX-License-Identifier: AGPL-3.0-only
import { ref } from 'vue'; import { ref } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkReactionIcon from '@/components/MkReactionIcon.vue'; import MkReactionIcon from '@/components/MkReactionIcon.vue';
import MkFollowButton from '@/components/MkFollowButton.vue';
import MkButton from '@/components/MkButton.vue'; import MkButton from '@/components/MkButton.vue';
import { getNoteSummary } from '@/scripts/get-note-summary.js'; import { getNoteSummary } from '@/scripts/get-note-summary.js';
import { notePage } from '@/filters/note.js'; import { notePage } from '@/filters/note.js';