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

feat: improve follow buttons (#238)

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

35
components/account/AccountFollowButton.vue
View file

@ -38,25 +38,24 @@ useCommand({
<template> <template>
<button <button
v-if="enable" v-if="enable"
flex gap-1 items-center h-fit rounded hover="op100 text-white b-orange" group btn-base gap-1 items-center group
:disabled="relationship?.requested" :disabled="relationship?.requested"
@click="toggleFollow" border-1
rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="relationship?.following ? 'text-base border-text-base' : 'text-inverted bg-primary border-primary'" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @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'"> <template v-if="relationship?.following">
<template v-if="relationship?.following"> <span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span>
<span group-hover="hidden">{{ relationship?.followedBy ? 'Mutuals' : 'Following' }}</span> <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
<span hidden group-hover="inline">{{ $t('account.unfollow') }}</span> </template>
</template> <template v-else-if="relationship?.requested">
<template v-else-if="relationship?.requested"> <span>{{ $t('account.follow_requested') }}</span>
<span>{{ $t('account.follow_requested') }}</span> </template>
</template> <template v-else-if="relationship?.followedBy">
<template v-else-if="relationship?.followedBy"> <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span group-hover="hidden">{{ $t('account.follows_you') }}</span> <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
<span hidden group-hover="inline">{{ $t('account.follow_back') }}</span> </template>
</template> <template v-else>
<template v-else> <span>{{ $t('account.follow') }}</span>
<span>{{ $t('account.follow') }}</span> </template>
</template>
</div>
</button> </button>
</template> </template>

2
components/account/AccountHeader.vue
View file

@ -78,7 +78,7 @@ watchEffect(() => {
<button border="b base" z-1> <button border="b base" z-1>
<img h-50 w-full object-cover :src="account.header" @click="previewHeader"> <img h-50 w-full object-cover :src="account.header" @click="previewHeader">
</button> </button>
<div p4 mt--17 flex flex-col gap-4> <div p4 mt--18 flex flex-col gap-4>
<div relative> <div relative>
<div flex="~ col gap-2 1"> <div flex="~ col gap-2 1">
<button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar"> <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">

3
unocss.config.ts
View file

@ -22,13 +22,14 @@ export default defineConfig({
// text colors // text colors
'text-base': 'text-$c-text-base', 'text-base': 'text-$c-text-base',
'text-inverted': 'text-$c-bg-base',
'text-secondary': 'text-$c-text-secondary', 'text-secondary': 'text-$c-text-secondary',
'text-secondary-light': 'text-$c-text-secondary-light', 'text-secondary-light': 'text-$c-text-secondary-light',
// buttons // buttons
'btn-base': 'cursor-pointer disabled:pointer-events-none disabled:bg-$c-bg-btn-disabled disabled:text-$c-text-btn-disabled', 'btn-base': 'cursor-pointer disabled:pointer-events-none disabled:bg-$c-bg-btn-disabled disabled:text-$c-text-btn-disabled',
'btn-solid': 'btn-base px-4 py-2 rounded text-$c-text-btn bg-$c-primary hover:bg-$c-primary-active', 'btn-solid': 'btn-base px-4 py-2 rounded text-$c-text-btn bg-$c-primary hover:bg-$c-primary-active',
'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white', 'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-inverted',
'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active', 'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center', 'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',