natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix mini follow button label + its position in user cards

This commit is contained in:
Freeplay 2023-06-16 22:05:36 -04:00
parent 51a7bab9ff
commit b4f7506950
2 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/client/src/components/MkFollowButton.vue
View File

@ -20,16 +20,17 @@
:disabled="wait"
@click.stop="onClick"
:aria-label="`${state} ${user.name || user.username}`"
v-tooltip="full ? null : `${state} ${user.name || user.username}`"
>
<template v-if="!wait">
<template v-if="isBlocking">
<span v-if="full">{{ (state = i18n.ts.blocked) }}</span
<span>{{ (state = i18n.ts.blocked) }}</span
><i class="ph-prohibit ph-bold ph-lg"></i>
</template>
<template
v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
>
<span v-if="full">{{
<span>{{
(state = i18n.ts.followRequestPending)
}}</span
><i class="ph-hourglass-medium ph-bold ph-lg"></i>
@ -38,24 +39,24 @@
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"
>
<!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ (state = i18n.ts.processing) }}</span
<span>{{ (state = i18n.ts.processing) }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ (state = i18n.ts.unfollow) }}</span
<span>{{ (state = i18n.ts.unfollow) }}</span
><i class="ph-minus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ (state = i18n.ts.followRequest) }}</span
<span>{{ (state = i18n.ts.followRequest) }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ (state = i18n.ts.follow) }}</span
<span>{{ (state = i18n.ts.follow) }}</span
><i class="ph-plus ph-bold ph-lg"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ (state = i18n.ts.processing) }}</span
<span>{{ (state = i18n.ts.processing) }}</span
><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template>
</button>
@ -185,6 +186,7 @@ onBeforeUnmount(() => {
.menu {
width: 3em;
height: 2em;
vertical-align: middle;
}
.follow-button {
position: relative;
@ -200,6 +202,7 @@ onBeforeUnmount(() => {
height: 2em;
border-radius: 100px;
background: var(--bg);
vertical-align: middle;
&.full {
padding: 0.2em 0.7em;
@ -215,6 +218,9 @@ onBeforeUnmount(() => {
&:not(.full) {
width: 31px;
span {
display: none;
}
}
&:focus-visible {

4
packages/client/src/components/MkUserInfo.vue
View File

@ -45,13 +45,13 @@
<MkNumber :value="user.followersCount" />
</div>
</div>
<div class="koudoku-button">
<MkFollowButton
v-if="$i && user.id != $i.id"
class="koudoku-button"
:user="user"
full
/>
</div>
</div>
</template>
<script lang="ts" setup>