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: "プライバシー" privacy: "プライバシー"
makeFollowManuallyApprove: "フォローを承認制にする" makeFollowManuallyApprove: "フォローを承認制にする"
defaultNoteVisibility: "デフォルトの公開範囲" defaultNoteVisibility: "デフォルトの公開範囲"
follow: "フォロー"
followRequest: "フォロー申請"
followRequests: "フォロー申請" followRequests: "フォロー申請"
unfollow: "フォロー解除"
followRequestPending: "フォロー許可待ち"
enterEmoji: "絵文字を入力" enterEmoji: "絵文字を入力"
renote: "Renote" renote: "Renote"
quote: "引用" quote: "引用"

View file

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

View file

@ -37,7 +37,7 @@
<router-link v-if="notification.type === 'quote'" class="text" :to="notification.note | notePage" :title="getNoteSummary(notification.note)"> <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"/> <mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
</router-link> </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 === '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> <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> </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> <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"> <div class="actions" v-if="$store.getters.isSignedIn">
<button @click="menu" class="menu _button" ref="menu"><fa :icon="faEllipsisH"/></button> <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>
</div> </div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/> <mk-avatar class="avatar" :user="user" :disable-preview="true"/>