diff options
Diffstat (limited to 'src')
4 files changed, 86 insertions, 1 deletions
diff --git a/src/client/app/mobile/views/components/follow-button.vue b/src/client/app/mobile/views/components/follow-button.vue index b6a52fe1ed..360ee91d4b 100644 --- a/src/client/app/mobile/views/components/follow-button.vue +++ b/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 diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts index 38c130ecbf..3e830f4e96 100644 --- a/src/client/app/mobile/views/components/index.ts +++ b/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); diff --git a/src/client/app/mobile/views/components/mute-button.vue b/src/client/app/mobile/views/components/mute-button.vue new file mode 100644 index 0000000000..3cb568615d --- /dev/null +++ b/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> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index d573538fdd..e72867352f 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/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 |