Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-06-02 13:11:28 +09:00
parent 56fa24e401
commit 0128831649
2 changed files with 52 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/client/app/desktop/views/components/follow-button.vue
View file

@ -1,19 +1,16 @@
<template> <template>
<button class="mk-follow-button" <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" @click="onClick"
:disabled="wait" :disabled="wait"
:title="user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%'"
> >
<template v-if="!wait && user.isFollowing"> <template v-if="!wait">
<template v-if="size == 'compact'">%fa:minus%</template> <template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
<template v-if="size == 'big'">%fa:minus%%i18n:@unfollow%</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>
<template v-if="!wait && !user.isFollowing"> <template v-else>%fa:spinner .pulse .fw%</template>
<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>
</button> </button>
</template> </template>
@ -34,6 +31,7 @@ export default Vue.extend({
data() { data() {
return { return {
u: this.user,
wait: false, wait: false,
connection: null, connection: null,
connectionId: null connectionId: null
@ -56,39 +54,44 @@ export default Vue.extend({
methods: { methods: {
onFollow(user) { onFollow(user) {
if (user.id == this.user.id) { if (user.id == this.u.id) {
this.user.isFollowing = user.isFollowing; this.user.isFollowing = user.isFollowing;
} }
}, },
onUnfollow(user) { onUnfollow(user) {
if (user.id == this.user.id) { if (user.id == this.u.id) {
this.user.isFollowing = user.isFollowing; this.user.isFollowing = user.isFollowing;
} }
}, },
onClick() { async onClick() {
this.wait = true; this.wait = true;
if (this.user.isFollowing) {
(this as any).api('following/delete', { try {
userId: this.user.id if (this.u.isFollowing) {
}).then(() => { this.u = await (this as any).api('following/delete', {
this.user.isFollowing = false; userId: this.u.id
}).catch(err => {
console.error(err);
}).then(() => {
this.wait = false;
}); });
} else { } else {
(this as any).api('following/create', { if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
userId: this.user.id this.u = await (this as any).api('following/requests/cancel', {
}).then(() => { userId: this.u.id
this.user.isFollowing = true;
}).catch(err => {
console.error(err);
}).then(() => {
this.wait = false;
}); });
} 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 2px solid rgba($theme-color, 0.3)
border-radius 8px border-radius 8px
&.follow &:not(.active)
color isDark ? #fff : #888 color isDark ? #fff : #888
background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%) background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
border solid 1px isDark ? #1c2023 : #e2e2e2 border solid 1px isDark ? #1c2023 : #e2e2e2
@ -137,7 +140,7 @@ root(isDark)
background isDark ? #22262f : #ececec background isDark ? #22262f : #ececec
border-color isDark ? #151a1d : #dcdcdc border-color isDark ? #151a1d : #dcdcdc
&.unfollow &.active
color $theme-color-foreground color $theme-color-foreground
background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%) background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
border solid 1px lighten($theme-color, 15%) border solid 1px lighten($theme-color, 15%)
@ -162,9 +165,6 @@ root(isDark)
height 38px height 38px
line-height 38px line-height 38px
i
margin-right 8px
.mk-follow-button[data-darkmode] .mk-follow-button[data-darkmode]
root(true) root(true)

26
src/client/app/mobile/views/components/follow-button.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<button class="mk-follow-button" <button class="mk-follow-button"
:class="{ wait: wait, following: u.isFollowing }" :class="{ wait: wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou }"
@click="onClick" @click="onClick"
:disabled="wait" :disabled="wait"
> >
@ -99,6 +99,7 @@ export default Vue.extend({
cursor pointer cursor pointer
padding 0 16px padding 0 16px
margin 0 margin 0
min-width 150px
line-height 36px line-height 36px
font-size 14px font-size 14px
color $theme-color color $theme-color
@ -107,24 +108,29 @@ export default Vue.extend({
border solid 1px $theme-color border solid 1px $theme-color
border-radius 36px border-radius 36px
*
pointer-events none
&.following
color $theme-color-foreground
background $theme-color
&:hover &:hover
background rgba($theme-color, 0.1) background rgba($theme-color, 0.1)
&:active &:active
background rgba($theme-color, 0.2) background rgba($theme-color, 0.2)
&.active
color $theme-color-foreground
background $theme-color
&:hover
background lighten($theme-color, 10%)
border-color lighten($theme-color, 10%)
&:active
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
&.wait &.wait
cursor wait !important cursor wait !important
opacity 0.7 opacity 0.7
> [data-fa] *
margin-right 4px pointer-events none
</style> </style>