teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: add 'requested' state for following button

Browse source
This commit is contained in:
Daniel Roe 2022-11-28 20:56:24 +00:00
parent aac8a12091
commit f08777f629
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/account/AccountFollowButton.vue
View file

@ -23,7 +23,8 @@ async function toggleFollow() {
<template> <template>
<button <button
v-if="!isSelf && currentUser" v-if="!isSelf && currentUser"
flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group btn-base
:disabled="relationship?.requested"
@click="toggleFollow" @click="toggleFollow"
> >
<div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'"> <div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/75' : 'bg-orange/40'" :class="!relationship?.following ? relationship?.followedBy ? 'bg-orange/20' : 'bg-white/10' : relationship?.followedBy ? ' bg-orange/70' : 'bg-orange/50'">
@ -31,6 +32,9 @@ async function toggleFollow() {
<span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span> <span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
<span hidden group-hover="inline">Unfollow</span> <span hidden group-hover="inline">Unfollow</span>
</template> </template>
<template v-else-if="relationship?.requested">
<span>Requested</span>
</template>
<template v-else-if="relationship?.followedBy"> <template v-else-if="relationship?.followedBy">
<span group-hover="hidden">Follows you</span> <span group-hover="hidden">Follows you</span>
<span hidden group-hover="inline">Follow back</span> <span hidden group-hover="inline">Follow back</span>