mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 07:24:13 +00:00 
			
		
		
		
	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">
 | 
			
		||||
			<img class="avatar" :src="user.avatarUrl" alt=""/>
 | 
			
		||||
			<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 class="username">@{{ user | acct }}</span>
 | 
			
		||||
		</li>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,5 +1,6 @@
 | 
			
		|||
import Vue from 'vue';
 | 
			
		||||
 | 
			
		||||
import userName from './user-name.vue';
 | 
			
		||||
import followButton from './follow-button.vue';
 | 
			
		||||
import error from './error.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 formRadio from './ui/form/radio.vue';
 | 
			
		||||
 | 
			
		||||
Vue.component('mk-user-name', userName);
 | 
			
		||||
Vue.component('mk-follow-button', followButton);
 | 
			
		||||
Vue.component('mk-error', error);
 | 
			
		||||
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"/>
 | 
			
		||||
		<div class="body">
 | 
			
		||||
			<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>
 | 
			
		||||
			<span class="username">@{{ user | acct }}</span>
 | 
			
		||||
			<div class="description">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@
 | 
			
		|||
			<mk-avatar class="avatar" :user="user" target="_blank"/>
 | 
			
		||||
			<div class="body">
 | 
			
		||||
				<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>
 | 
			
		||||
				<p class="username">@{{ user | acct }}</p>
 | 
			
		||||
			</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@
 | 
			
		|||
	<mk-follow-button :user="user" class="follow" mini/>
 | 
			
		||||
	<div class="body">
 | 
			
		||||
		<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>
 | 
			
		||||
		<span class="username">@{{ user | acct }}</span>
 | 
			
		||||
		<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-avatar class="avatar" :user="user" :disable-preview="true"/>
 | 
			
		||||
				<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 class="acct">@{{ user | acct }}</span>
 | 
			
		||||
			</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@
 | 
			
		|||
			<mk-avatar class="avatar" :user="user"/>
 | 
			
		||||
			<i18n :path="isFollowing ? 'following' : 'followers'" tag="p">
 | 
			
		||||
				<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>
 | 
			
		||||
			</i18n>
 | 
			
		||||
		</header>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@
 | 
			
		|||
		<div class="fade"></div>
 | 
			
		||||
		<div class="title">
 | 
			
		||||
			<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>
 | 
			
		||||
			<div>
 | 
			
		||||
				<span class="username"><mk-acct :user="user" :detail="true" /></span>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -4,7 +4,7 @@
 | 
			
		|||
		<mk-avatar class="avatar" :user="user"/>
 | 
			
		||||
	</header>
 | 
			
		||||
	<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>
 | 
			
		||||
	<p class="username"><mk-acct :user="user"/></p>
 | 
			
		||||
	<mk-follow-button class="follow-button" :user="user"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -4,7 +4,7 @@
 | 
			
		|||
	<div class="main">
 | 
			
		||||
		<header>
 | 
			
		||||
			<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>
 | 
			
		||||
			<span class="username"><mk-acct :user="user"/></span>
 | 
			
		||||
		</header>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -5,7 +5,7 @@
 | 
			
		|||
	<main v-if="!fetching">
 | 
			
		||||
		<ul>
 | 
			
		||||
			<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>
 | 
			
		||||
		</ul>
 | 
			
		||||
	</main>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,7 +1,7 @@
 | 
			
		|||
<template>
 | 
			
		||||
<mk-ui>
 | 
			
		||||
	<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>
 | 
			
		||||
	<main v-if="!fetching">
 | 
			
		||||
		<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"/>
 | 
			
		||||
				</div>
 | 
			
		||||
				<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="followed" v-if="user.isFollowed">{{ $t('follows-you') }}</span>
 | 
			
		||||
				</div>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue