diff options
Diffstat (limited to 'packages/client/src/components/MkChannelFollowButton.vue')
| -rw-r--r-- | packages/client/src/components/MkChannelFollowButton.vue | 129 |
1 files changed, 0 insertions, 129 deletions
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue deleted file mode 100644 index 9e275d6172..0000000000 --- a/packages/client/src/components/MkChannelFollowButton.vue +++ /dev/null @@ -1,129 +0,0 @@ -<template> -<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="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> - <span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/> - </template> -</button> -</template> - -<script lang="ts" setup> -import { ref } from 'vue'; -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', { - channelId: props.channel.id, - }); - isFollowing.value = false; - } else { - 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; - } - - &: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> |