This commit is contained in:
syuilo
2018-06-02 12:58:56 +09:00
parent a26c19cbd2
commit 56fa24e401
10 changed files with 67 additions and 75 deletions

View File

@ -50,7 +50,7 @@
</div>
</template>
<template v-if="notification.type == 'followRequest'">
<template v-if="notification.type == 'reciveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-clock%
@ -268,7 +268,7 @@ root(isDark)
.text p i
color #53c7ce
&.followRequest
&.reciveFollowRequest
.text p i
color #888

View File

@ -1,14 +1,14 @@
<template>
<button class="mk-follow-button"
:class="{ wait: wait, following: user.isFollowing, unfollow: user.isFollowing }"
:class="{ wait: wait, following: u.isFollowing }"
@click="onClick"
:disabled="wait"
>
<template v-if="!wait">
<template v-if="user.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
<template v-else-if="user.isFollowing">%fa:minus% %i18n:@unfollow%</template>
<template v-else-if="!user.isFollowing && user.isLocked">%fa:plus% %i18n:@follow-request%</template>
<template v-else-if="!user.isFollowing && !user.isLocked">%fa:plus% %i18n:@follow%</template>
<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half% %i18n:@request-pending%</template>
<template v-else-if="u.isFollowing">%fa:minus% %i18n:@unfollow%</template>
<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus% %i18n:@follow-request%</template>
<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus% %i18n:@follow%</template>
</template>
<template v-else>%fa:spinner .pulse .fw%</template>
</button>
@ -25,6 +25,7 @@ export default Vue.extend({
},
data() {
return {
u: this.user,
wait: false,
connection: null,
connectionId: null
@ -45,51 +46,44 @@ export default Vue.extend({
methods: {
onFollow(user) {
if (user.id == this.user.id) {
this.user.isFollowing = user.isFollowing;
if (user.id == this.u.id) {
this.u.isFollowing = user.isFollowing;
}
},
onUnfollow(user) {
if (user.id == this.user.id) {
this.user.isFollowing = user.isFollowing;
if (user.id == this.u.id) {
this.u.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 {
if (this.user.isLocked && this.user.hasPendingFollowRequestFromYou) {
(this as any).api('following/requests/cancel', {
userId: this.user.id
}).then(() => {
this.user.hasPendingFollowRequestFromYou = false;
}).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 {
(this as any).api('following/create', {
userId: this.user.id
}).then(() => {
this.user.isFollowing = true;
}).catch(err => {
console.error(err);
}).then(() => {
this.wait = false;
});
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;
}
}
}
@ -107,6 +101,8 @@ export default Vue.extend({
margin 0
line-height 36px
font-size 14px
color $theme-color
background transparent
outline none
border solid 1px $theme-color
border-radius 36px
@ -114,9 +110,9 @@ export default Vue.extend({
*
pointer-events none
&.follow
color $theme-color
background transparent
&.following
color $theme-color-foreground
background $theme-color
&:hover
background rgba($theme-color, 0.1)
@ -124,10 +120,6 @@ export default Vue.extend({
&:active
background rgba($theme-color, 0.2)
&.unfollow
color $theme-color-foreground
background $theme-color
&.wait
cursor wait !important
opacity 0.7

View File

@ -31,7 +31,7 @@
</div>
</template>
<template v-if="notification.type == 'followRequest'">
<template v-if="notification.type == 'reciveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/>
<div class="text">
<p>%fa:user-clock%{{ notification.user | userName }}</p>
@ -125,7 +125,7 @@ export default Vue.extend({
.text p i
color #53c7ce
&.followRequest
&.reciveFollowRequest
.text p i
color #888

View File

@ -40,7 +40,7 @@
</div>
</div>
<div class="notification followRequest" v-if="notification.type == 'followRequest'">
<div class="notification followRequest" v-if="notification.type == 'reciveFollowRequest'">
<mk-avatar class="avatar" :user="notification.user"/>
<div>
<header>
@ -167,7 +167,7 @@ root(isDark)
> div > header i
color #53c7ce
&.followRequest
&.reciveFollowRequest
> div > header i
color #888