Improve follow button

locales/ja-JP.yml

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

src/client/components/follow-button.vue

@@ -1,17 +1,29 @@
 <template>
-<button class="wfliddvnhxvyusikowhxozkyxyenqxqr _button"
+<button class="kpoogebi _button"
-	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou }"
+	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full }"
 	@click="onClick"
 	:disabled="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 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>

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>

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"/>