summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkFollowButton.vue
diff options
context:
space:
mode:
authorsyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
committersyuilo <Syuilotan@yahoo.co.jp>2022-12-27 14:36:33 +0900
commit9384f5399da39e53855beb8e7f8ded1aa56bf72e (patch)
treece5959571a981b9c4047da3c7b3fd080aa44222c /packages/client/src/components/MkFollowButton.vue
parentwip: retention for dashboard (diff)
downloadsharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.gz
sharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.tar.bz2
sharkey-9384f5399da39e53855beb8e7f8ded1aa56bf72e.zip
rename: client -> frontend
Diffstat (limited to 'packages/client/src/components/MkFollowButton.vue')
-rw-r--r--packages/client/src/components/MkFollowButton.vue187
1 files changed, 0 insertions, 187 deletions
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
deleted file mode 100644
index ee256d9263..0000000000
--- a/packages/client/src/components/MkFollowButton.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<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.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
- </template>
- <template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
- <!-- つまりリモートフォローの場合。 -->
- <span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
- </template>
- <template v-else-if="isFollowing">
- <span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
- </template>
- <template v-else-if="!isFollowing && user.isLocked">
- <span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
- </template>
- <template v-else-if="!isFollowing && !user.isLocked">
- <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" :colored="false"/>
- </template>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted } 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,
-});
-
-let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
-let wait = $ref(false);
-const connection = stream.useChannel('main');
-
-if (props.user.isFollowing == null) {
- os.api('users/show', {
- userId: props.user.id,
- })
- .then(onFollowChange);
-}
-
-function onFollowChange(user: Misskey.entities.UserDetailed) {
- if (user.id === props.user.id) {
- isFollowing = user.isFollowing;
- hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
- }
-}
-
-async function onClick() {
- wait = true;
-
- try {
- if (isFollowing) {
- 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) {
- await os.api('following/requests/cancel', {
- userId: props.user.id,
- });
- hasPendingFollowRequestFromYou = false;
- } else {
- await os.api('following/create', {
- userId: props.user.id,
- });
- hasPendingFollowRequestFromYou = true;
- }
- }
- } catch (err) {
- console.error(err);
- } finally {
- wait = 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>