Merge pull request #2396 from Tosuke/fix-2354

Mute on mobile(#2354)

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

@@ -99,7 +99,7 @@ export default Vue.extend({
 	cursor pointer
 	padding 0 16px
 	margin 0
-	min-width 150px
+	min-width 100px
 	line-height 36px
 	font-size 14px
 	font-weight bold

src/client/app/mobile/views/components/index.ts

@@ -12,6 +12,7 @@ import noteCard from './note-card.vue';
 import userCard from './user-card.vue';
 import noteDetail from './note-detail.vue';
 import followButton from './follow-button.vue';
+import muteButton from './mute-button.vue';
 import friendsMaker from './friends-maker.vue';
 import notification from './notification.vue';
 import notifications from './notifications.vue';
@@ -36,6 +37,7 @@ Vue.component('mk-note-card', noteCard);
 Vue.component('mk-user-card', userCard);
 Vue.component('mk-note-detail', noteDetail);
 Vue.component('mk-follow-button', followButton);
+Vue.component('mk-mute-button', muteButton);
 Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mk-notification', notification);
 Vue.component('mk-notifications', notifications);

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

@@ -0,0 +1,79 @@
+<template>
+<button
+  class="mk-mute-button"
+  :class="{ active: user.isMuted }"
+  @click="onClick">
+  <span v-if="!user.isMuted">%fa:eye-slash% %i18n:@mute%</span>
+  <span v-else>%fa:eye% %i18n:@unmute%</span>
+</button>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    onClick() {
+      if (!this.user.isMuted) {
+        this.mute();
+      } else {
+        this.unmute();
+      }
+    },
+    mute() {
+      (this as any).api('mute/create', { userId: this.user.id})
+        .then(() => { this.user.isMuted = true })
+        .catch(() => { alert('error')})
+    },
+    unmute() {
+      (this as any).api('mute/delete', { userId: this.user.id })
+        .then(() => { this.user.isMuted = false })
+        .catch(() => { alert('error') })
+    }
+  },
+})
+</script>
+
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+.mk-mute-button
+  display block
+  user-select none 
+  cursor pointer
+  padding 0 16px
+  margin 0
+  min-width 100px
+  line-height 36px
+  font-size 14px
+  font-weight bold
+  color $theme-color
+  background transparent
+  outline none
+  border solid 1px $theme-color
+  border-radius 36px
+
+  &:hover
+    background rgba($theme-color, 0.1)
+
+  &:active
+    background rgba($theme-color, 0.2)
+
+  &.active
+    color $theme-color-foreground
+    background $theme-color
+
+    &:hover
+      background lighten($theme-color, 10%)
+      border-color lighten($theme-color, 10%)
+    &:active
+      background darken($theme-color, 10%)
+      border-color darken($theme-color, 10%)
+
+</style>

src/client/app/mobile/views/pages/user.vue

@@ -11,6 +11,7 @@
 					<a class="avatar">
 						<img :src="user.avatarUrl" alt="avatar"/>
 					</a>
+					<mk-mute-button v-if="$store.state.i.id != user.id" :user="user"/>
 					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
@@ -184,6 +185,9 @@ root(isDark)
 							border 4px solid $bg
 							border-radius 12px
 
+				> .mk-mute-button
+					float right
+
 				> .mk-follow-button
 					float right