2023-07-27 05:31:52 +00:00
|
|
|
<!--
|
2024-02-13 15:59:27 +00:00
|
|
|
SPDX-FileCopyrightText: syuilo and misskey-project
|
2023-07-27 05:31:52 +00:00
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
-->
|
|
|
|
|
2020-08-18 13:44:21 +00:00
|
|
|
<template>
|
2022-12-20 02:00:05 +00:00
|
|
|
<button
|
2023-05-30 01:20:06 +00:00
|
|
|
class="_button"
|
|
|
|
:class="[$style.root, { [$style.wait]: wait, [$style.active]: isFollowing, [$style.full]: full }]"
|
2020-08-18 13:44:21 +00:00
|
|
|
:disabled="wait"
|
2021-11-19 10:36:12 +00:00
|
|
|
@click="onClick"
|
2020-08-18 13:44:21 +00:00
|
|
|
>
|
|
|
|
<template v-if="!wait">
|
|
|
|
<template v-if="isFollowing">
|
2023-09-30 19:53:52 +00:00
|
|
|
<span v-if="full" :class="$style.text">{{ i18n.ts.unfollow }}</span><i class="ph-minus ph-bold ph-lg"></i>
|
2020-08-18 13:44:21 +00:00
|
|
|
</template>
|
|
|
|
<template v-else>
|
2023-09-30 19:53:52 +00:00
|
|
|
<span v-if="full" :class="$style.text">{{ i18n.ts.follow }}</span><i class="ph-plus ph-bold ph-lg"></i>
|
2020-08-18 13:44:21 +00:00
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
2023-05-30 01:20:06 +00:00
|
|
|
<span v-if="full" :class="$style.text">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
|
2020-08-18 13:44:21 +00:00
|
|
|
</template>
|
|
|
|
</button>
|
|
|
|
</template>
|
|
|
|
|
2022-01-10 15:05:18 +00:00
|
|
|
<script lang="ts" setup>
|
|
|
|
import { ref } from 'vue';
|
2024-01-04 09:32:46 +00:00
|
|
|
import { misskeyApi } from '@/scripts/misskey-api.js';
|
2023-09-19 07:37:43 +00:00
|
|
|
import { i18n } from '@/i18n.js';
|
2020-08-18 13:44:21 +00:00
|
|
|
|
2022-01-10 15:05:18 +00:00
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
channel: Record<string, any>;
|
|
|
|
full?: boolean;
|
|
|
|
}>(), {
|
|
|
|
full: false,
|
|
|
|
});
|
2020-08-18 13:44:21 +00:00
|
|
|
|
2022-01-10 15:05:18 +00:00
|
|
|
const isFollowing = ref<boolean>(props.channel.isFollowing);
|
|
|
|
const wait = ref(false);
|
2020-08-18 13:44:21 +00:00
|
|
|
|
2022-01-10 15:05:18 +00:00
|
|
|
async function onClick() {
|
|
|
|
wait.value = true;
|
2020-08-18 13:44:21 +00:00
|
|
|
|
2022-01-10 15:05:18 +00:00
|
|
|
try {
|
|
|
|
if (isFollowing.value) {
|
2024-01-04 09:32:46 +00:00
|
|
|
await misskeyApi('channels/unfollow', {
|
2022-12-20 02:00:05 +00:00
|
|
|
channelId: props.channel.id,
|
2022-01-10 15:05:18 +00:00
|
|
|
});
|
|
|
|
isFollowing.value = false;
|
|
|
|
} else {
|
2024-01-04 09:32:46 +00:00
|
|
|
await misskeyApi('channels/follow', {
|
2022-12-20 02:00:05 +00:00
|
|
|
channelId: props.channel.id,
|
2022-01-10 15:05:18 +00:00
|
|
|
});
|
|
|
|
isFollowing.value = true;
|
2020-08-18 13:44:21 +00:00
|
|
|
}
|
2022-05-26 13:53:09 +00:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
2022-01-10 15:05:18 +00:00
|
|
|
} finally {
|
|
|
|
wait.value = false;
|
2020-08-18 13:44:21 +00:00
|
|
|
}
|
2022-01-10 15:05:18 +00:00
|
|
|
}
|
2020-08-18 13:44:21 +00:00
|
|
|
</script>
|
|
|
|
|
2023-05-30 01:20:06 +00:00
|
|
|
<style lang="scss" module>
|
|
|
|
.root {
|
2020-08-18 13:44:21 +00:00
|
|
|
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;
|
2023-10-31 18:44:34 +00:00
|
|
|
border-radius: var(--radius-xl);
|
2020-08-18 13:44:21 +00:00
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
&.full {
|
|
|
|
padding: 0 8px 0 12px;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(.full) {
|
|
|
|
width: 31px;
|
|
|
|
}
|
|
|
|
|
2021-10-02 17:46:58 +00:00
|
|
|
&:focus-visible {
|
2020-08-18 13:44:21 +00:00
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
top: -5px;
|
|
|
|
right: -5px;
|
|
|
|
bottom: -5px;
|
|
|
|
left: -5px;
|
|
|
|
border: 2px solid var(--focus);
|
2023-10-31 18:44:34 +00:00
|
|
|
border-radius: var(--radius-xl);
|
2020-08-18 13:44:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
//background: mix($primary, #fff, 20);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
//background: mix($primary, #fff, 40);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
2023-05-30 01:20:06 +00:00
|
|
|
color: var(--fgOnAccent);
|
2020-08-18 13:44:21 +00:00
|
|
|
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;
|
|
|
|
}
|
2023-05-30 01:20:06 +00:00
|
|
|
}
|
2020-08-18 13:44:21 +00:00
|
|
|
|
2023-05-30 01:20:06 +00:00
|
|
|
.text {
|
|
|
|
margin-right: 6px;
|
2020-08-18 13:44:21 +00:00
|
|
|
}
|
|
|
|
</style>
|