モバイル版からブロックできるように

locales/ja-JP.yml

@@ -1534,6 +1534,10 @@ mobile/views/pages/user.vue:
   timeline: "タイムライン"
   media: "メディア"
   is-suspended: "このユーザーは凍結されています。"
+  mute: "ミュート"
+  unmute: "ミュート解除"
+  block: "ブロック"
+  unblobk: "ブロック解除"
 
 mobile/views/pages/user/home.vue:
   recent-notes: "最近の投稿"

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

@@ -12,7 +12,6 @@ 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';
@@ -37,7 +36,6 @@ 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

@@ -1,79 +0,0 @@
-<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>
-
-
-.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 var(--primary)
-  background transparent
-  outline none
-  border solid 1px var(--primary)
-  border-radius 36px
-
-  &:hover
-    background var(--primaryAlpha01)
-
-  &:active
-    background var(--primaryAlpha02)
-
-  &.active
-    color var(--primaryForeground)
-    background var(--primary)
-
-    &:hover
-      background var(--primaryLighten10)
-      border-color var(--primaryLighten10)
-    &:active
-      background var(--primaryDarken10)
-      border-color var(--primaryDarken10)
-
-</style>

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

@@ -11,7 +11,7 @@
 					<a class="avatar">
 						<img :src="user.avatarUrl" alt="avatar"/>
 					</a>
-					<mk-mute-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
+					<button class="menu" ref="menu" @click="menu">%fa:ellipsis-h%</button>
 					<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
 				</div>
 				<div class="title">
@@ -67,6 +67,7 @@ import Vue from 'vue';
 import * as age from 's-age';
 import parseAcct from '../../../../../misc/acct/parse';
 import Progress from '../../../common/scripts/loading';
+import Menu from '../../../common/views/components/menu.vue';
 import XHome from './user/home.vue';
 
 export default Vue.extend({
@@ -109,8 +110,62 @@ export default Vue.extend({
 				Progress.done();
 				document.title = `${Vue.filter('userName')(this.user)} | ${(this as any).os.instanceName}`;
 			});
+		},
+
+		menu() {
+			let menu = [{
+				icon: this.user.isMuted ? '%fa:eye%' : '%fa:eye-slash%',
+				text: this.user.isMuted ? '%i18n:@unmute%' : '%i18n:@mute%',
+				action: () => {
+					if (this.user.isMuted) {
+						(this as any).api('mute/delete', {
+							userId: this.user.id
+						}).then(() => {
+							this.user.isMuted = false;
+						}, () => {
+							alert('error');
+						});
+					} else {
+						(this as any).api('mute/create', {
+							userId: this.user.id
+						}).then(() => {
+							this.user.isMuted = true;
+						}, () => {
+							alert('error');
+						});
 					}
 				}
+			}, {
+				icon: this.user.isBlocking ? '%fa:user%' : '%fa:user-slash%',
+				text: this.user.isBlocking ? '%i18n:@unblock%' : '%i18n:@block%',
+				action: () => {
+					if (this.user.isBlocking) {
+						(this as any).api('blocking/delete', {
+							userId: this.user.id
+						}).then(() => {
+							this.user.isBlocking = false;
+						}, () => {
+							alert('error');
+						});
+					} else {
+						(this as any).api('blocking/create', {
+							userId: this.user.id
+						}).then(() => {
+							this.user.isBlocking = true;
+						}, () => {
+							alert('error');
+						});
+					}
+				}
+			}];
+
+			this.os.new(Menu, {
+				source: this.$refs.menu,
+				compact: true,
+				items: menu
+			});
+		},
+	}
 });
 </script>
 
@@ -156,14 +211,10 @@ main
 			max-width 600px
 
 			> .top
-				&:after
+				display flex
-					content ''
-					display block
-					clear both
 
 				> .avatar
 					display block
-					float left
 					width 25%
 					height 40px
 
@@ -183,11 +234,15 @@ main
 							border 4px solid $bg
 							border-radius 12px
 
-				> .mk-mute-button
+				> .menu
-					float right
+					margin 0 0 0 auto
+					padding 8px
+					margin-right 8px
+					font-size 18px
+					color var(--text)
 
 				> .mk-follow-button
-					float right
+					margin 0
 
 			> .title
 				margin 8px 0