Improve follow button

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

View File

@ -86,7 +86,11 @@ deleteList: "リストを削除"
privacy: "プライバシー"
makeFollowManuallyApprove: "フォローを承認制にする"
defaultNoteVisibility: "デフォルトの公開範囲"
follow: "フォロー"
followRequest: "フォロー申請"
followRequests: "フォロー申請"
unfollow: "フォロー解除"
followRequestPending: "フォロー許可待ち"
enterEmoji: "絵文字を入力"
renote: "Renote"
quote: "引用"

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>

View File

@ -37,7 +37,7 @@
<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)">
<mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
</router-link>
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user"/></div></span>
<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ $t('youGotNewFollower') }}<div v-if="full"><mk-follow-button :user="notification.user" :full="true"/></div></span>
<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ $t('followRequestAccepted') }}</span>
<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ $t('receiveFollowRequest') }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ $t('accept') }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ $t('reject') }}</button></div></span>
</div>

View File

@ -22,7 +22,7 @@
<span class="followed" v-if="$store.getters.isSignedIn && $store.state.i.id != user.id && user.isFollowed">{{ $t('followsYou') }}</span>
<div class="actions" v-if="$store.getters.isSignedIn">
<button @click="menu" class="menu _button" ref="menu"><fa :icon="faEllipsisH"/></button>
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" class="koudoku"/>
<mk-follow-button v-if="$store.state.i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
</div>
</div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>