* components/drive-file-thumbnail.vue * components/drive-select-dialog.vue * components/drive-window.vue * wip * wip drive.file.vue, drive.vue * fix prop * wip( * components/drive.folder.vue * maybe ok * ✌️ * fix variable * FIX FOLDER VARIABLE * components/emoji-picker-dialog.vue * Hate `$emit` * hate global property * components/emoji-picker-window.vue * components/emoji-picker.section.vue * fix * fixx * wip components/emoji-picker.vue * fix * defineExpose * ユニコード絵文字の型をもっといい感じに * components/featured-photos.vue * components/follow-button.vue * forgot-password.vue * forgot-password.vue * 🎨 * fix
192 lines
4.3 KiB
Vue
192 lines
4.3 KiB
Vue
<template>
|
|
<button class="kpoogebi _button"
|
|
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
|
|
:disabled="wait"
|
|
@click="onClick"
|
|
>
|
|
<template v-if="!wait">
|
|
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
|
|
<span v-if="full">{{ i18n.locale.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
|
|
</template>
|
|
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
|
|
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
|
|
</template>
|
|
<template v-else-if="isFollowing">
|
|
<span v-if="full">{{ i18n.locale.unfollow }}</span><i class="fas fa-minus"></i>
|
|
</template>
|
|
<template v-else-if="!isFollowing && user.isLocked">
|
|
<span v-if="full">{{ i18n.locale.followRequest }}</span><i class="fas fa-plus"></i>
|
|
</template>
|
|
<template v-else-if="!isFollowing && !user.isLocked">
|
|
<span v-if="full">{{ i18n.locale.follow }}</span><i class="fas fa-plus"></i>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
|
|
</template>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
|
import * as Misskey from 'misskey-js';
|
|
import * as os from '@/os';
|
|
import { stream } from '@/stream';
|
|
import { i18n } from '@/i18n';
|
|
|
|
const props = withDefaults(defineProps<{
|
|
user: Misskey.entities.UserDetailed,
|
|
full?: boolean,
|
|
large?: boolean,
|
|
}>(), {
|
|
full: false,
|
|
large: false,
|
|
});
|
|
|
|
const isFollowing = ref(props.user.isFollowing);
|
|
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
|
|
const wait = ref(false);
|
|
const connection = stream.useChannel('main');
|
|
|
|
if (props.user.isFollowing == null) {
|
|
os.api('users/show', {
|
|
userId: props.user.id
|
|
}).then(u => {
|
|
isFollowing.value = u.isFollowing;
|
|
hasPendingFollowRequestFromYou.value = u.hasPendingFollowRequestFromYou;
|
|
});
|
|
}
|
|
|
|
function onFollowChange(user: Misskey.entities.UserDetailed) {
|
|
if (user.id == props.user.id) {
|
|
isFollowing.value = user.isFollowing;
|
|
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
|
|
}
|
|
}
|
|
|
|
async function onClick() {
|
|
wait.value = true;
|
|
|
|
try {
|
|
if (isFollowing.value) {
|
|
const { canceled } = await os.confirm({
|
|
type: 'warning',
|
|
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
|
|
});
|
|
|
|
if (canceled) return;
|
|
|
|
await os.api('following/delete', {
|
|
userId: props.user.id
|
|
});
|
|
} else {
|
|
if (hasPendingFollowRequestFromYou.value) {
|
|
await os.api('following/requests/cancel', {
|
|
userId: props.user.id
|
|
});
|
|
} else if (props.user.isLocked) {
|
|
await os.api('following/create', {
|
|
userId: props.user.id
|
|
});
|
|
hasPendingFollowRequestFromYou.value = true;
|
|
} else {
|
|
await os.api('following/create', {
|
|
userId: props.user.id
|
|
});
|
|
hasPendingFollowRequestFromYou.value = true;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
} finally {
|
|
wait.value = false;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
connection.on('follow', onFollowChange);
|
|
connection.on('unfollow', onFollowChange);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
connection.dispose();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.kpoogebi {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
color: var(--accent);
|
|
background: transparent;
|
|
border: solid 1px var(--accent);
|
|
padding: 0;
|
|
height: 31px;
|
|
font-size: 16px;
|
|
border-radius: 32px;
|
|
background: #fff;
|
|
|
|
&.full {
|
|
padding: 0 8px 0 12px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.large {
|
|
font-size: 16px;
|
|
height: 38px;
|
|
padding: 0 12px 0 16px;
|
|
}
|
|
|
|
&:not(.full) {
|
|
width: 31px;
|
|
}
|
|
|
|
&:focus-visible {
|
|
&:after {
|
|
content: "";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
bottom: -5px;
|
|
left: -5px;
|
|
border: 2px solid var(--focus);
|
|
border-radius: 32px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
//background: mix($primary, #fff, 20);
|
|
}
|
|
|
|
&:active {
|
|
//background: mix($primary, #fff, 40);
|
|
}
|
|
|
|
&.active {
|
|
color: #fff;
|
|
background: var(--accent);
|
|
|
|
&:hover {
|
|
background: var(--accentLighten);
|
|
border-color: var(--accentLighten);
|
|
}
|
|
|
|
&:active {
|
|
background: var(--accentDarken);
|
|
border-color: var(--accentDarken);
|
|
}
|
|
}
|
|
|
|
&.wait {
|
|
cursor: wait !important;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
> span {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
</style>
|