sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve follow button

Browse Source
This commit is contained in:
syuilo
2020-01-31 11:58:59 +09:00
parent 73e7c1bf67
commit a5cf189caa
4 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/client/components/follow-button.vue
View File

@ -1,17 +1,29 @@
<template>
<button class="wfliddvnhxvyusikowhxozkyxyenqxqr _button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou }"
<button class="kpoogebi _button"
:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full }"
@click="onClick"
:disabled="wait"
>
<template v-if="!wait">
<fa v-if="hasPendingFollowRequestFromYou && user.isLocked" :icon="faHourglassHalf"/>
<fa v-else-if="hasPendingFollowRequestFromYou && !user.isLocked" :icon="faSpinner" pulse/>
<fa v-else-if="isFollowing" :icon="faMinus"/>
<fa v-else-if="!isFollowing && user.isLocked" :icon="faPlus"/>
<fa v-else-if="!isFollowing && !user.isLocked" :icon="faPlus"/>
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ $t('followRequestPending') }}</span><fa :icon="faHourglassHalf"/>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse/>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ $t('unfollow') }}</span><fa :icon="faMinus"/>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ $t('followRequest') }}</span><fa :icon="faPlus"/>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ $t('follow') }}</span><fa :icon="faPlus"/>
</template>
</template>
<template v-else>
<span v-if="full">{{ $t('processing') }}</span><fa :icon="faSpinner" pulse fixed-width/>
</template>
<template v-else><fa :icon="faSpinner" pulse fixed-width/></template>
</button>
</template>
@ -28,6 +40,11 @@ export default Vue.extend({
type: Object,
required: true
},
full: {
type: Boolean,
required: false,
default: false,
},
},
data() {
@ -103,7 +120,7 @@ export default Vue.extend({
</script>
<style lang="scss" scoped>
.wfliddvnhxvyusikowhxozkyxyenqxqr {
.kpoogebi {
position: relative;
display: inline-block;
font-weight: bold;
@ -111,12 +128,19 @@ export default Vue.extend({
background: transparent;
border: solid 1px var(--accent);
padding: 0;
width: 31px;
height: 31px;
font-size: 16px;
border-radius: 100%;
border-radius: 32px;
background: #fff;
&.full {
padding: 0 8px 0 12px;
}
&:not(.full) {
width: 31px;
}
&:focus {
&:after {
content: "";
@ -127,7 +151,7 @@ export default Vue.extend({
bottom: -5px;
left: -5px;
border: 2px solid var(--focus);
border-radius: 100%;
border-radius: 32px;
}
}
@ -158,5 +182,9 @@ export default Vue.extend({
cursor: wait !important;
opacity: 0.7;
}
> span {
margin-right: 8px;
}
}
</style>