モバイル版からブロックできるように
This commit is contained in:
syuilo
parent
06fd525950
commit
fa17623fa8
|
|
@ -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: "最近の投稿"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue