Sharkey/packages/frontend/src/components/MkChannelFollowButton.vue

130 lines
2.2 KiB
Vue
Raw Normal View History

<template>
2022-12-20 04:00:05 +02:00
<button
class="hdcaacmi _button"
:class="{ wait, active: isFollowing, full }"
:disabled="wait"
2021-11-19 12:36:12 +02:00
@click="onClick"
>
<template v-if="!wait">
<template v-if="isFollowing">
<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
</template>
<template v-else>
<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
</template>
</template>
<template v-else>
2022-12-20 04:00:05 +02:00
<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
</template>
</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
2021-11-11 19:02:25 +02:00
import * as os from '@/os';
import { i18n } from '@/i18n';
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) {
await os.api('channels/unfollow', {
2022-12-20 04:00:05 +02:00
channelId: props.channel.id,
});
isFollowing.value = false;
} else {
await os.api('channels/follow', {
2022-12-20 04:00:05 +02:00
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-02 20:46:58 +03: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>