mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 21:45:45 +01:00
wip
This commit is contained in:
parent
56fa24e401
commit
0128831649
2 changed files with 52 additions and 46 deletions
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue