リファクタリングなど
This commit is contained in:
syuilo
38
src/client/app/common/views/components/avatar.vue
Normal file
38
src/client/app/common/views/components/avatar.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<router-link class="mk-avatar" :to="user | userPage" :title="user | acct" :target="target" :style="{ borderRadius: clientSettings.circleIcons ? '100%' : null }">
|
||||
<img v-if="disablePreview" :src="`${user.avatarUrl}?thumbnail&size=128`" alt=""/>
|
||||
<img v-else :src="`${user.avatarUrl}?thumbnail&size=128`" alt="" v-user-preview="user.id"/>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
user: {
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
disablePreview: {
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.mk-avatar
|
||||
display block
|
||||
|
||||
> img
|
||||
display inline-block
|
||||
width 100%
|
||||
height 100%
|
||||
margin 0
|
||||
border-radius inherit
|
||||
vertical-align bottom
|
||||
</style>
|
||||
@ -3,6 +3,7 @@ import Vue from 'vue';
|
||||
import signin from './signin.vue';
|
||||
import signup from './signup.vue';
|
||||
import forkit from './forkit.vue';
|
||||
import avatar from './avatar.vue';
|
||||
import nav from './nav.vue';
|
||||
import noteHtml from './note-html';
|
||||
import poll from './poll.vue';
|
||||
@ -28,6 +29,7 @@ import welcomeTimeline from './welcome-timeline.vue';
|
||||
Vue.component('mk-signin', signin);
|
||||
Vue.component('mk-signup', signup);
|
||||
Vue.component('mk-forkit', forkit);
|
||||
Vue.component('mk-avatar', avatar);
|
||||
Vue.component('mk-nav', nav);
|
||||
Vue.component('mk-note-html', noteHtml);
|
||||
Vue.component('mk-poll', poll);
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div class="message" :data-is-me="isMe">
|
||||
<router-link class="avatar-anchor" :to="message.user | userPage" :title="message.user | acct" target="_blank">
|
||||
<img class="avatar" :src="`${message.user.avatarUrl}?thumbnail&size=80`" alt=""/>
|
||||
</router-link>
|
||||
<mk-avatar class="avatar" :user="message.user" target="_blank"/>
|
||||
<div class="content">
|
||||
<div class="balloon" :data-no-text="message.text == null">
|
||||
<p class="read" v-if="isMe && message.isRead">%i18n:@is-read%</p>
|
||||
@ -67,20 +65,14 @@ export default Vue.extend({
|
||||
padding 10px 12px 10px 12px
|
||||
background-color transparent
|
||||
|
||||
> .avatar-anchor
|
||||
> .avatar
|
||||
display block
|
||||
position absolute
|
||||
top 10px
|
||||
|
||||
> .avatar
|
||||
display block
|
||||
min-width 54px
|
||||
min-height 54px
|
||||
max-width 54px
|
||||
max-height 54px
|
||||
margin 0
|
||||
border-radius 8px
|
||||
transition all 0.1s ease
|
||||
width 54px
|
||||
height 54px
|
||||
border-radius 8px
|
||||
transition all 0.1s ease
|
||||
|
||||
> .content
|
||||
|
||||
@ -201,7 +193,7 @@ export default Vue.extend({
|
||||
margin-left 4px
|
||||
|
||||
&:not([data-is-me])
|
||||
> .avatar-anchor
|
||||
> .avatar
|
||||
left 12px
|
||||
|
||||
> .content
|
||||
@ -225,7 +217,7 @@ export default Vue.extend({
|
||||
text-align left
|
||||
|
||||
&[data-is-me]
|
||||
> .avatar-anchor
|
||||
> .avatar
|
||||
right 12px
|
||||
|
||||
> .content
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
@click="navigate(user)"
|
||||
tabindex="-1"
|
||||
>
|
||||
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=32`" alt=""/>
|
||||
<mk-avatar class="avatar" :user="user"/>
|
||||
<span class="name">{{ user | userName }}</span>
|
||||
<span class="username">@{{ user | acct }}</span>
|
||||
</li>
|
||||
@ -31,7 +31,7 @@
|
||||
:key="message.id"
|
||||
>
|
||||
<div>
|
||||
<img class="avatar" :src="`${isMe(message) ? message.recipient.avatarUrl : message.user.avatarUrl}?thumbnail&size=64`" alt=""/>
|
||||
<mk-avatar class="avatar" :user="isMe(message) ? message.recipient : message.user"/>
|
||||
<header>
|
||||
<span class="name">{{ isMe(message) ? message.recipient : message.user | userName }}</span>
|
||||
<span class="username">@{{ isMe(message) ? message.recipient : message.user | acct }}</span>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="mk-welcome-timeline">
|
||||
<div v-for="note in notes">
|
||||
<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.user.id">
|
||||
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=96`" alt="avatar"/>
|
||||
</router-link>
|
||||
<mk-avatar class="avatar" :user="note.user" target="_blank"/>
|
||||
<div class="body">
|
||||
<header>
|
||||
<router-link class="name" :to="note.user | userPage" v-user-preview="note.user.id">{{ note.user | userName }}</router-link>
|
||||
@ -69,18 +67,15 @@ export default Vue.extend({
|
||||
display block
|
||||
clear both
|
||||
|
||||
> .avatar-anchor
|
||||
> .avatar
|
||||
display block
|
||||
float left
|
||||
position -webkit-sticky
|
||||
position sticky
|
||||
top 16px
|
||||
|
||||
> img
|
||||
display block
|
||||
width 42px
|
||||
height 42px
|
||||
border-radius 6px
|
||||
width 42px
|
||||
height 42px
|
||||
border-radius 6px
|
||||
|
||||
> .body
|
||||
float right
|
||||
|
||||
Reference in New Issue
Block a user