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

feat: unify follow button (#25)

Browse source
This commit is contained in:
patak 2022-11-22 23:40:20 +01:00 committed by GitHub
parent ac156034d1
commit 7beaab0baf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/account/AccountCard.vue
View file

@ -4,27 +4,13 @@ import type { Account } from 'masto'
const { account } = defineProps<{ const { account } = defineProps<{
account: Account account: Account
}>() }>()
const masto = await useMasto()
const relationship = $(useRelationship(account))
function unfollow() {
masto.accounts.unfollow(account.id)
relationship!.following = false
}
function follow() {
masto.accounts.follow(account.id)
relationship!.following = true
}
</script> </script>
<template> <template>
<div flex justify-between> <div flex justify-between>
<AccountInfo :account="account" p3 /> <AccountInfo :account="account" p1 />
<div h-full p5> <div h-full p1>
<div v-if="relationship?.following === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" /> <AccountFollowButton :account="account" />
<div v-else-if="relationship?.following === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
</div> </div>
</div> </div>
</template> </template>

31
components/account/AccountFollowButton.vue Normal file
View file

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { Account, MastoClient } from 'masto'
const { account } = defineProps<{
account: Account
}>()
const relationship = $(useRelationship(account))
let masto: MastoClient
async function toggleFollow() {
relationship!.following = !relationship!.following
masto ??= await useMasto()
await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
}
</script>
<template>
<button v-if="relationship" flex gap-1 items-center w-full rounded hover="op100 text-white b-purple" group @click="toggleFollow">
<div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/30' : 'bg-purple/30'" :class="!relationship?.following ? 'bg-cyan/10' : ' bg-purple/10'">
<template v-if="relationship?.following">
<span group-hover="hidden">Following</span>
<span hidden group-hover="inline">Unfollow</span>
</template>
<template v-else>
{{ relationship?.followedBy ? 'Follow back' : 'Follow' }}
</template>
</div>
</button>
</template>

18
components/account/AccountHeader.vue
View file

@ -1,20 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Account, MastoClient } from 'masto' import type { Account } from 'masto'
const { account } = defineProps<{ const { account } = defineProps<{
account: Account account: Account
}>() }>()
const relationship = $(useRelationship(account))
let masto: MastoClient
async function toggleFollow() {
relationship!.following = !relationship!.following
masto ??= await useMasto()
await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
}
const createdAt = $computed(() => { const createdAt = $computed(() => {
const date = new Date(account.createdAt) const date = new Date(account.createdAt)
return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date) return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
@ -42,11 +32,7 @@ const createdAt = $computed(() => {
</NuxtLink> </NuxtLink>
</div> </div>
<div flex gap-2> <div flex gap-2>
<button v-if="relationship" flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group @click="toggleFollow"> <AccountFollowButton :account="account" />
<div rounded w-30 p2 group-hover="bg-rose/10">
{{ relationship?.following ? 'Unfollow' : relationship?.followedBy ? 'Follow back' : 'Follow' }}
</div>
</button>
<!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group> <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
<div rounded p2 group-hover="bg-rose/10"> <div rounded p2 group-hover="bg-rose/10">
<div i-ri:bell-line /> <div i-ri:bell-line />