wip
This commit is contained in:
syuilo
parent
56fa24e401
commit
0128831649
|
|
@ -1,19 +1,16 @@
|
|||
<template>
|
||||
<button class="mk-follow-button"
|
||||
:class="{ wait, follow: !user.isFollowing, unfollow: user.isFollowing, big: size == 'big' }"
|
||||
:class="{ wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou, big: size == 'big' }"
|
||||
@click="onClick"
|
||||
:disabled="wait"
|
||||
:title="user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%'"
|
||||
>
|
||||
<template v-if="!wait && user.isFollowing">
|
||||
<template v-if="size == 'compact'">%fa:minus%</template>
|
||||
<template v-if="size == 'big'">%fa:minus%%i18n:@unfollow%</template>
|
||||
<template v-if="!wait">
|
||||
<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
|
||||
<template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@unfollow%</template></template>
|
||||
<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
|
||||
<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template>
|
||||
</template>
|
||||
<template v-if="!wait && !user.isFollowing">
|
||||
<template v-if="size == 'compact'">%fa:plus%</template>
|
||||
<template v-if="size == 'big'">%fa:plus%%i18n:@follow%</template>
|
||||
</template>
|
||||
<template v-if="wait">%fa:spinner .pulse .fw%</template>
|
||||
<template v-else>%fa:spinner .pulse .fw%</template>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,6 +31,7 @@ export default Vue.extend({
|
|||
|
||||
data() {
|
||||
return {
|
||||
u: this.user,
|
||||
wait: false,
|
||||
connection: null,
|
||||
connectionId: null
|
||||
|
|
@ -56,39 +54,44 @@ export default Vue.extend({
|
|||
|
||||
methods: {
|
||||
onFollow(user) {
|
||||
if (user.id == this.user.id) {
|
||||
if (user.id == this.u.id) {
|
||||
this.user.isFollowing = user.isFollowing;
|
||||
}
|
||||
},
|
||||
|
||||
onUnfollow(user) {
|
||||
if (user.id == this.user.id) {
|
||||
if (user.id == this.u.id) {
|
||||
this.user.isFollowing = user.isFollowing;
|
||||
}
|
||||
},
|
||||
|
||||
onClick() {
|
||||
async onClick() {
|
||||
this.wait = true;
|
||||
if (this.user.isFollowing) {
|
||||
(this as any).api('following/delete', {
|
||||
userId: this.user.id
|
||||
}).then(() => {
|
||||
this.user.isFollowing = false;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
}).then(() => {
|
||||
this.wait = false;
|
||||
});
|
||||
} else {
|
||||
(this as any).api('following/create', {
|
||||
userId: this.user.id
|
||||
}).then(() => {
|
||||
this.user.isFollowing = true;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
}).then(() => {
|
||||
this.wait = false;
|
||||
});
|
||||
|
||||
try {
|
||||
if (this.u.isFollowing) {
|
||||
this.u = await (this as any).api('following/delete', {
|
||||
userId: this.u.id
|
||||
});
|
||||
} else {
|
||||
if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
|
||||
this.u = await (this as any).api('following/requests/cancel', {
|
||||
userId: this.u.id
|
||||
});
|
||||
} else if (this.u.isLocked) {
|
||||
this.u = await (this as any).api('following/create', {
|
||||
userId: this.u.id
|
||||
});
|
||||
} else {
|
||||
this.u = await (this as any).api('following/create', {
|
||||
userId: this.user.id
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.wait = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,7 +127,7 @@ root(isDark)
|
|||
border 2px solid rgba($theme-color, 0.3)
|
||||
border-radius 8px
|
||||
|
||||
&.follow
|
||||
&:not(.active)
|
||||
color isDark ? #fff : #888
|
||||
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
|
||||
border solid 1px isDark ? #1c2023 : #e2e2e2
|
||||
|
|
@ -137,7 +140,7 @@ root(isDark)
|
|||
background isDark ? #22262f : #ececec
|
||||
border-color isDark ? #151a1d : #dcdcdc
|
||||
|
||||
&.unfollow
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
|
||||
border solid 1px lighten($theme-color, 15%)
|
||||
|
|
@ -162,9 +165,6 @@ root(isDark)
|
|||
height 38px
|
||||
line-height 38px
|
||||
|
||||
i
|
||||
margin-right 8px
|
||||
|
||||
.mk-follow-button[data-darkmode]
|
||||
root(true)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<button class="mk-follow-button"
|
||||
:class="{ wait: wait, following: u.isFollowing }"
|
||||
:class="{ wait: wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou }"
|
||||
@click="onClick"
|
||||
:disabled="wait"
|
||||
>
|
||||
|
|
@ -99,6 +99,7 @@ export default Vue.extend({
|
|||
cursor pointer
|
||||
padding 0 16px
|
||||
margin 0
|
||||
min-width 150px
|
||||
line-height 36px
|
||||
font-size 14px
|
||||
color $theme-color
|
||||
|
|
@ -107,24 +108,29 @@ export default Vue.extend({
|
|||
border solid 1px $theme-color
|
||||
border-radius 36px
|
||||
|
||||
*
|
||||
pointer-events none
|
||||
&:hover
|
||||
background rgba($theme-color, 0.1)
|
||||
|
||||
&.following
|
||||
&:active
|
||||
background rgba($theme-color, 0.2)
|
||||
|
||||
&.active
|
||||
color $theme-color-foreground
|
||||
background $theme-color
|
||||
|
||||
&:hover
|
||||
background rgba($theme-color, 0.1)
|
||||
background lighten($theme-color, 10%)
|
||||
border-color lighten($theme-color, 10%)
|
||||
|
||||
&:active
|
||||
background rgba($theme-color, 0.2)
|
||||
background darken($theme-color, 10%)
|
||||
border-color darken($theme-color, 10%)
|
||||
|
||||
&.wait
|
||||
cursor wait !important
|
||||
opacity 0.7
|
||||
|
||||
> [data-fa]
|
||||
margin-right 4px
|
||||
*
|
||||
pointer-events none
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue