natty
/
calckey
1
0
Fork 0
Code Issues 1 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" :disabled="wait"
@click.stop="onClick" @click.stop="onClick"
:aria-label="`${state} ${user.name || user.username}`" :aria-label="`${state} ${user.name || user.username}`"
v-tooltip="full ? null : `${state} ${user.name || user.username}`"
> >
<template v-if="!wait"> <template v-if="!wait">
<template v-if="isBlocking"> <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> ><i class="ph-prohibit ph-bold ph-lg"></i>
</template> </template>
<template <template
v-else-if="hasPendingFollowRequestFromYou && user.isLocked" v-else-if="hasPendingFollowRequestFromYou && user.isLocked"
> >
<span v-if="full">{{ <span>{{
(state = i18n.ts.followRequestPending) (state = i18n.ts.followRequestPending)
}}</span }}</span
><i class="ph-hourglass-medium ph-bold ph-lg"></i> ><i class="ph-hourglass-medium ph-bold ph-lg"></i>
@ -38,24 +39,24 @@
v-else-if="hasPendingFollowRequestFromYou && !user.isLocked" 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> ><i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
</template> </template>
<template v-else-if="isFollowing"> <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> ><i class="ph-minus ph-bold ph-lg"></i>
</template> </template>
<template v-else-if="!isFollowing && user.isLocked"> <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> ><i class="ph-plus ph-bold ph-lg"></i>
</template> </template>
<template v-else-if="!isFollowing && !user.isLocked"> <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> ><i class="ph-plus ph-bold ph-lg"></i>
</template> </template>
</template> </template>
<template v-else> <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> ><i class="ph-circle-notch ph-bold ph-lg fa-pulse ph-fw ph-lg"></i>
</template> </template>
</button> </button>
@ -185,6 +186,7 @@ onBeforeUnmount(() => {
.menu { .menu {
width: 3em; width: 3em;
height: 2em; height: 2em;
vertical-align: middle;
} }
.follow-button { .follow-button {
position: relative; position: relative;
@ -200,6 +202,7 @@ onBeforeUnmount(() => {
height: 2em; height: 2em;
border-radius: 100px; border-radius: 100px;
background: var(--bg); background: var(--bg);
vertical-align: middle;
&.full { &.full {
padding: 0.2em 0.7em; padding: 0.2em 0.7em;
@ -215,6 +218,9 @@ onBeforeUnmount(() => {
&:not(.full) { &:not(.full) {
width: 31px; width: 31px;
span {
display: none;
}
} }
&:focus-visible { &:focus-visible {

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

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