commit
da88043962
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in New Issue