Refactor
Make mk-user-name component
This commit is contained in:
parent
31b30e3dd2
commit
a235869cfa
13 changed files with 30 additions and 12 deletions
|
@ -4,7 +4,7 @@
|
||||||
<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
|
<li v-for="user in users" @click="complete(type, user)" @keydown="onKeydown" tabindex="-1">
|
||||||
<img class="avatar" :src="user.avatarUrl" alt=""/>
|
<img class="avatar" :src="user.avatarUrl" alt=""/>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</span>
|
</span>
|
||||||
<span class="username">@{{ user | acct }}</span>
|
<span class="username">@{{ user | acct }}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
import userName from './user-name.vue';
|
||||||
import followButton from './follow-button.vue';
|
import followButton from './follow-button.vue';
|
||||||
import error from './error.vue';
|
import error from './error.vue';
|
||||||
import noteSkeleton from './note-skeleton.vue';
|
import noteSkeleton from './note-skeleton.vue';
|
||||||
|
@ -44,6 +45,7 @@ import uiInfo from './ui/info.vue';
|
||||||
import formButton from './ui/form/button.vue';
|
import formButton from './ui/form/button.vue';
|
||||||
import formRadio from './ui/form/radio.vue';
|
import formRadio from './ui/form/radio.vue';
|
||||||
|
|
||||||
|
Vue.component('mk-user-name', userName);
|
||||||
Vue.component('mk-follow-button', followButton);
|
Vue.component('mk-follow-button', followButton);
|
||||||
Vue.component('mk-error', error);
|
Vue.component('mk-error', error);
|
||||||
Vue.component('mk-note-skeleton', noteSkeleton);
|
Vue.component('mk-note-skeleton', noteSkeleton);
|
||||||
|
|
16
src/client/app/common/views/components/user-name.vue
Normal file
16
src/client/app/common/views/components/user-name.vue
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<template>
|
||||||
|
<misskey-flavored-markdown :text="user.name || user.username" :should-break="false" :plain-text="true" :custom-emojis="user.emojis"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
props: {
|
||||||
|
user: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -7,7 +7,7 @@
|
||||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<router-link :to="user | userPage" class="name">
|
<router-link :to="user | userPage" class="name">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="username">@{{ user | acct }}</span>
|
<span class="username">@{{ user | acct }}</span>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<mk-avatar class="avatar" :user="user" target="_blank"/>
|
<mk-avatar class="avatar" :user="user" target="_blank"/>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<router-link class="name" :to="user | userPage" v-user-preview="user.id">
|
<router-link class="name" :to="user | userPage" v-user-preview="user.id">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<p class="username">@{{ user | acct }}</p>
|
<p class="username">@{{ user | acct }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<mk-follow-button :user="user" class="follow" mini/>
|
<mk-follow-button :user="user" class="follow" mini/>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<router-link :to="user | userPage" class="name">
|
<router-link :to="user | userPage" class="name">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="username">@{{ user | acct }}</span>
|
<span class="username">@{{ user | acct }}</span>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
|
<mk-follow-button v-if="$store.getters.isSignedIn && user.id != $store.state.i.id" :user="user" class="follow" mini/>
|
||||||
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</span>
|
</span>
|
||||||
<span class="acct">@{{ user | acct }}</span>
|
<span class="acct">@{{ user | acct }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<mk-avatar class="avatar" :user="user"/>
|
<mk-avatar class="avatar" :user="user"/>
|
||||||
<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
|
<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
|
||||||
<router-link :to="user | userPage" place="user">
|
<router-link :to="user | userPage" place="user">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
</i18n>
|
</i18n>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="fade"></div>
|
<div class="fade"></div>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<p class="name">
|
<p class="name">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
<span class="username"><mk-acct :user="user" :detail="true" /></span>
|
<span class="username"><mk-acct :user="user" :detail="true" /></span>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<mk-avatar class="avatar" :user="user"/>
|
<mk-avatar class="avatar" :user="user"/>
|
||||||
</header>
|
</header>
|
||||||
<a class="name" :href="user | userPage" target="_blank">
|
<a class="name" :href="user | userPage" target="_blank">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</a>
|
</a>
|
||||||
<p class="username"><mk-acct :user="user"/></p>
|
<p class="username"><mk-acct :user="user"/></p>
|
||||||
<mk-follow-button class="follow-button" :user="user"/>
|
<mk-follow-button class="follow-button" :user="user"/>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<header>
|
<header>
|
||||||
<router-link class="name" :to="user | userPage">
|
<router-link class="name" :to="user | userPage">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<span class="username"><mk-acct :user="user"/></span>
|
<span class="username"><mk-acct :user="user"/></span>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<main v-if="!fetching">
|
<main v-if="!fetching">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="user in users" :key="user.id"><router-link :to="user | userPage">
|
<li v-for="user in users" :key="user.id"><router-link :to="user | userPage">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</router-link></li>
|
</router-link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<mk-ui>
|
<mk-ui>
|
||||||
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">
|
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">
|
||||||
<misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/>
|
<mk-user-name :user="user"/>
|
||||||
</template>
|
</template>
|
||||||
<main v-if="!fetching">
|
<main v-if="!fetching">
|
||||||
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('is-suspended') }}</p></div>
|
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> {{ $t('is-suspended') }}</p></div>
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
<mk-follow-button v-if="$store.getters.isSignedIn && $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>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<h1><misskey-flavored-markdown :text="user.name || user.username" :shouldBreak="false" :plainText="true" :custom-emojis="user.emojis"/></h1>
|
<h1><mk-user-name :user="user"/></h1>
|
||||||
<span class="username"><mk-acct :user="user" :detail="true" /></span>
|
<span class="username"><mk-acct :user="user" :detail="true" /></span>
|
||||||
<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
|
<span class="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue