iceshrimp/packages/client/src/components/MkChannelFollowButton.vue

136 lines
2.3 KiB
Vue
Raw Normal View History

<template>
2023-04-08 09:01:42 +09:00
<button
class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
:disabled="wait"
@click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span
><i class="ph-minus ph-bold ph-lg"></i>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.follow }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
</template>
<template v-else>
2023-04-08 09:01:42 +09:00
<span v-if="full">{{ i18n.ts.processing }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
2023-04-08 09:01:42 +09:00
</button>
</template>
<script lang="ts" setup>
2023-04-08 09:01:42 +09:00
import { ref } from "vue";
import * as os from "@/os";
import { i18n } from "@/i18n";
2023-04-08 09:01:42 +09:00
const props = withDefaults(
defineProps<{
channel: Record<string, any>;
full?: boolean;
}>(),
{
full: false,
}
);
const isFollowing = ref<boolean>(props.channel.isFollowing);
const wait = ref(false);
async function onClick() {
wait.value = true;
try {
if (isFollowing.value) {
2023-04-08 09:01:42 +09:00
await os.api("channels/unfollow", {
channelId: props.channel.id,
});
isFollowing.value = false;
} else {
2023-04-08 09:01:42 +09:00
await os.api("channels/follow", {
channelId: props.channel.id,
});
isFollowing.value = true;
}
} catch (err) {
console.error(err);
} finally {
wait.value = false;
}
}
</script>
<style lang="scss" scoped>
.hdcaacmi {
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;
}
&:not(.full) {
width: 31px;
}
2021-10-03 02:46:58 +09:00
&: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>