wip

src/client/app/desktop/views/components/follow-button.vue

@@ -1,19 +1,16 @@
 <template>
 <button class="mk-follow-button"
-	:class="{ wait, follow: !user.isFollowing, unfollow: user.isFollowing, big: size == 'big' }"
+	:class="{ wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou, big: size == 'big' }"
 	@click="onClick"
 	:disabled="wait"
-	:title="user.isFollowing ? '%i18n:@unfollow%' : '%i18n:@follow%'"
 >
-	<template v-if="!wait && user.isFollowing">
+	<template v-if="!wait">
-		<template v-if="size == 'compact'">%fa:minus%</template>
+		<template v-if="u.hasPendingFollowRequestFromYou">%fa:hourglass-half%<template v-if="size == 'big'"> %i18n:@request-pending%</template></template>
-		<template v-if="size == 'big'">%fa:minus%%i18n:@unfollow%</template>
+		<template v-else-if="u.isFollowing">%fa:minus%<template v-if="size == 'big'"> %i18n:@unfollow%</template></template>
+		<template v-else-if="!u.isFollowing && u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow-request%</template></template>
+		<template v-else-if="!u.isFollowing && !u.isLocked">%fa:plus%<template v-if="size == 'big'"> %i18n:@follow%</template></template>
 	</template>
-	<template v-if="!wait && !user.isFollowing">
+	<template v-else>%fa:spinner .pulse .fw%</template>
-		<template v-if="size == 'compact'">%fa:plus%</template>
-		<template v-if="size == 'big'">%fa:plus%%i18n:@follow%</template>
-	</template>
-	<template v-if="wait">%fa:spinner .pulse .fw%</template>
 </button>
 </template>
 
@@ -34,6 +31,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			u: this.user,
 			wait: false,
 			connection: null,
 			connectionId: null
@@ -56,39 +54,44 @@ export default Vue.extend({
 
 	methods: {
 		onFollow(user) {
-			if (user.id == this.user.id) {
+			if (user.id == this.u.id) {
 				this.user.isFollowing = user.isFollowing;
 			}
 		},
 
 		onUnfollow(user) {
-			if (user.id == this.user.id) {
+			if (user.id == this.u.id) {
 				this.user.isFollowing = user.isFollowing;
 			}
 		},
 
-		onClick() {
+		async onClick() {
 			this.wait = true;
-			if (this.user.isFollowing) {
+
-				(this as any).api('following/delete', {
+			try {
-					userId: this.user.id
+				if (this.u.isFollowing) {
-				}).then(() => {
+					this.u = await (this as any).api('following/delete', {
-					this.user.isFollowing = false;
+						userId: this.u.id
-				}).catch(err => {
+					});
-					console.error(err);
+				} else {
-				}).then(() => {
+					if (this.u.isLocked && this.u.hasPendingFollowRequestFromYou) {
-					this.wait = false;
+						this.u = await (this as any).api('following/requests/cancel', {
-				});
+							userId: this.u.id
-			} else {
+						});
-				(this as any).api('following/create', {
+					} else if (this.u.isLocked) {
-					userId: this.user.id
+						this.u = await (this as any).api('following/create', {
-				}).then(() => {
+							userId: this.u.id
-					this.user.isFollowing = true;
+						});
-				}).catch(err => {
+					} else {
-					console.error(err);
+						this.u = await (this as any).api('following/create', {
-				}).then(() => {
+							userId: this.user.id
-					this.wait = false;
+						});
-				});
+					}
+				}
+			} catch (e) {
+				console.error(e);
+			} finally {
+				this.wait = false;
 			}
 		}
 	}
@@ -124,7 +127,7 @@ root(isDark)
 			border 2px solid rgba($theme-color, 0.3)
 			border-radius 8px
 
-	&.follow
+	&:not(.active)
 		color isDark ? #fff : #888
 		background isDark ? linear-gradient(to bottom, #313543 0%, #282c37 100%) : linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
 		border solid 1px isDark ? #1c2023 : #e2e2e2
@@ -137,7 +140,7 @@ root(isDark)
 			background isDark ? #22262f : #ececec
 			border-color isDark ? #151a1d : #dcdcdc
 
-	&.unfollow
+	&.active
 		color $theme-color-foreground
 		background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
 		border solid 1px lighten($theme-color, 15%)
@@ -162,9 +165,6 @@ root(isDark)
 		height 38px
 		line-height 38px
 
-		i
-			margin-right 8px
-
 .mk-follow-button[data-darkmode]
 	root(true)
 

src/client/app/mobile/views/components/follow-button.vue

@@ -1,6 +1,6 @@
 <template>
 <button class="mk-follow-button"
-	:class="{ wait: wait, following: u.isFollowing }"
+	:class="{ wait: wait, active: u.isFollowing || u.hasPendingFollowRequestFromYou }"
 	@click="onClick"
 	:disabled="wait"
 >
@@ -99,6 +99,7 @@ export default Vue.extend({
 	cursor pointer
 	padding 0 16px
 	margin 0
+	min-width 150px
 	line-height 36px
 	font-size 14px
 	color $theme-color
@@ -107,24 +108,29 @@ export default Vue.extend({
 	border solid 1px $theme-color
 	border-radius 36px
 
-	*
+	&:hover
-		pointer-events none
+		background rgba($theme-color, 0.1)
 
-	&.following
+	&:active
+		background rgba($theme-color, 0.2)
+
+	&.active
 		color $theme-color-foreground
 		background $theme-color
 
 		&:hover
-			background rgba($theme-color, 0.1)
+			background lighten($theme-color, 10%)
+			border-color lighten($theme-color, 10%)
 
 		&:active
-			background rgba($theme-color, 0.2)
+			background darken($theme-color, 10%)
+			border-color darken($theme-color, 10%)
 
 	&.wait
 		cursor wait !important
 		opacity 0.7
 
-	> [data-fa]
+	*
-		margin-right 4px
+		pointer-events none
 
 </style>