diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/mobile/views/components/index.ts | 2 | ||||
| -rw-r--r-- | src/client/app/mobile/views/components/mute-button.vue | 79 | ||||
| -rw-r--r-- | src/client/app/mobile/views/pages/user.vue | 75 |
3 files changed, 65 insertions, 91 deletions
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 |