From fa17623fa8c548d482e086ade33d995a4882b98f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 29 Oct 2018 21:32:38 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=89=88?=
=?UTF-8?q?=E3=81=8B=E3=82=89=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF=E3=81=A7?=
=?UTF-8?q?=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
locales/ja-JP.yml | 4 +
.../app/mobile/views/components/index.ts | 2 -
.../mobile/views/components/mute-button.vue | 79 -------------------
src/client/app/mobile/views/pages/user.vue | 75 +++++++++++++++---
4 files changed, 69 insertions(+), 91 deletions(-)
delete mode 100644 src/client/app/mobile/views/components/mute-button.vue
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 267c49e312..297d510dd4 100644
--- a/locales/ja-JP.yml
+++ b/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: "最近の投稿"
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 3e830f4e96..38c130ecbf 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/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);
diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue
deleted file mode 100644
index 316fbda8f1..0000000000
--- a/src/client/app/mobile/views/components/mute-button.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index 95ef387d96..aa8e688985 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/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,7 +110,61 @@ 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
- content ''
- display block
- clear both
+ display flex
> .avatar
display block
- float left
width 25%
height 40px
@@ -183,11 +234,15 @@ main
border 4px solid $bg
border-radius 12px
- > .mk-mute-button
- float right
+ > .menu
+ 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