From a5cf189caab6c468f123665ae15104a675902392 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 31 Jan 2020 11:58:59 +0900
Subject: [PATCH] Improve follow button

---
 locales/ja-JP.yml                       |  4 ++
 src/client/components/follow-button.vue | 52 +++++++++++++++++++------
 src/client/components/notification.vue  |  2 +-
 src/client/pages/user/index.vue         |  2 +-
 4 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 806d5303b..653335f49 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -86,7 +86,11 @@ deleteList: "リストを削除"
 privacy: "プライバシー"
 makeFollowManuallyApprove: "フォローを承認制にする"
 defaultNoteVisibility: "デフォルトの公開範囲"
+follow: "フォロー"
+followRequest: "フォロー申請"
 followRequests: "フォロー申請"
+unfollow: "フォロー解除"
+followRequestPending: "フォロー許可待ち"
 enterEmoji: "絵文字を入力"
 renote: "Renote"
 quote: "引用"
diff --git a/src/client/components/follow-button.vue b/src/client/components/follow-button.vue
index 4b57a2bd8..7e2ebf837 100644
--- a/src/client/components/follow-button.vue
+++ b/src/client/components/follow-button.vue
@@ -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>
diff --git a/src/client/components/notification.vue b/src/client/components/notification.vue
index 7542a7709..e2a220a07 100644
--- a/src/client/components/notification.vue
+++ b/src/client/components/notification.vue
@@ -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>
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index b1f97f75e..65a480270 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -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"/>