refactor
This commit is contained in:
		
							parent
							
								
									6f1243f722
								
							
						
					
					
						commit
						77e491f52c
					
				
					 38 changed files with 58 additions and 58 deletions
				
			
		|  | @ -2,7 +2,7 @@ | ||||||
| <div class="bcekxzvu _margin _panel"> | <div class="bcekxzvu _margin _panel"> | ||||||
| 	<div class="target"> | 	<div class="target"> | ||||||
| 		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`"> | 		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`"> | ||||||
| 			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/> | 			<MkAvatar class="avatar" :user="report.targetUser" indicator/> | ||||||
| 			<div class="names"> | 			<div class="names"> | ||||||
| 				<MkUserName class="name" :user="report.targetUser"/> | 				<MkUserName class="name" :user="report.targetUser"/> | ||||||
| 				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/> | 				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/> | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <div> | <div> | ||||||
| 	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> | 	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;"> | ||||||
| 		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/> | 		<MkAvatar :user="user" style="width:32px;height:32px;" indicator link preview/> | ||||||
| 	</div> | 	</div> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
|  | @ -5,7 +5,7 @@ | ||||||
| 	</div> | 	</div> | ||||||
| 	<article> | 	<article> | ||||||
| 		<header> | 		<header> | ||||||
| 			<MkAvatar :user="post.user" class="avatar"/> | 			<MkAvatar :user="post.user" class="avatar" link preview/> | ||||||
| 		</header> | 		</header> | ||||||
| 		<footer> | 		<footer> | ||||||
| 			<span class="title">{{ post.title }}</span> | 			<span class="title">{{ post.title }}</span> | ||||||
|  |  | ||||||
|  | @ -17,7 +17,7 @@ | ||||||
| 			</span> | 			</span> | ||||||
| 			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | 			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | ||||||
| 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> | 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> | ||||||
| 				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar" :disable-link="true"/> | 				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> | ||||||
| 				<span>{{ item.text }}</span> | 				<span>{{ item.text }}</span> | ||||||
| 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | ||||||
| 			</MkA> | 			</MkA> | ||||||
|  | @ -27,7 +27,7 @@ | ||||||
| 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | ||||||
| 			</a> | 			</a> | ||||||
| 			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | 			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | ||||||
| 				<MkAvatar :user="item.user" :class="$style.avatar" :disable-link="true"/><MkUserName :user="item.user"/> | 				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> | ||||||
| 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | ||||||
| 			</button> | 			</button> | ||||||
| 			<span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | 			<span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | ||||||
|  | @ -40,7 +40,7 @@ | ||||||
| 			</button> | 			</button> | ||||||
| 			<button v-else :tabindex="i" class="_button" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | 			<button v-else :tabindex="i" class="_button" :class="[$style.item, { [$style.danger]: item.danger, [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> | ||||||
| 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> | 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i> | ||||||
| 				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar" :disable-link="true"/> | 				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/> | ||||||
| 				<span>{{ item.text }}</span> | 				<span>{{ item.text }}</span> | ||||||
| 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> | ||||||
| 			</button> | 			</button> | ||||||
|  |  | ||||||
|  | @ -12,7 +12,7 @@ | ||||||
| 	<!--<div v-if="appearNote._prId_" class="tip"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>--> | 	<!--<div v-if="appearNote._prId_" class="tip"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>--> | ||||||
| 	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>--> | 	<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>--> | ||||||
| 	<div v-if="isRenote" :class="$style.renote"> | 	<div v-if="isRenote" :class="$style.renote"> | ||||||
| 		<MkAvatar v-once :class="$style.renoteAvatar" :user="note.user"/> | 		<MkAvatar v-once :class="$style.renoteAvatar" :user="note.user" link preview/> | ||||||
| 		<i class="ti ti-repeat" style="margin-right: 4px;"></i> | 		<i class="ti ti-repeat" style="margin-right: 4px;"></i> | ||||||
| 		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText"> | 		<I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText"> | ||||||
| 			<template #user> | 			<template #user> | ||||||
|  | @ -35,7 +35,7 @@ | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| 	<article :class="$style.article" @contextmenu.stop="onContextmenu"> | 	<article :class="$style.article" @contextmenu.stop="onContextmenu"> | ||||||
| 		<MkAvatar v-once :class="$style.avatar" :user="appearNote.user"/> | 		<MkAvatar v-once :class="$style.avatar" :user="appearNote.user" link preview/> | ||||||
| 		<div :class="$style.main"> | 		<div :class="$style.main"> | ||||||
| 			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/> | 			<MkNoteHeader :class="$style.header" :note="appearNote" :mini="true"/> | ||||||
| 			<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/> | 			<MkInstanceTicker v-if="showTicker" :class="$style.ticker" :instance="appearNote.user.instance"/> | ||||||
|  |  | ||||||
|  | @ -11,7 +11,7 @@ | ||||||
| 	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/> | 	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/> | ||||||
| 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/> | 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/> | ||||||
| 	<div v-if="isRenote" class="renote"> | 	<div v-if="isRenote" class="renote"> | ||||||
| 		<MkAvatar class="avatar" :user="note.user"/> | 		<MkAvatar class="avatar" :user="note.user" link preview/> | ||||||
| 		<i class="ti ti-repeat"></i> | 		<i class="ti ti-repeat"></i> | ||||||
| 		<I18n :src="i18n.ts.renotedBy" tag="span"> | 		<I18n :src="i18n.ts.renotedBy" tag="span"> | ||||||
| 			<template #user> | 			<template #user> | ||||||
|  | @ -35,7 +35,7 @@ | ||||||
| 	</div> | 	</div> | ||||||
| 	<article class="article" @contextmenu.stop="onContextmenu"> | 	<article class="article" @contextmenu.stop="onContextmenu"> | ||||||
| 		<header class="header"> | 		<header class="header"> | ||||||
| 			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/> | 			<MkAvatar class="avatar" :user="appearNote.user" indicator link preview/> | ||||||
| 			<div class="body"> | 			<div class="body"> | ||||||
| 				<div class="top"> | 				<div class="top"> | ||||||
| 					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)"> | 					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)"> | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div :class="$style.root"> | <div :class="$style.root"> | ||||||
| 	<MkAvatar :class="$style.avatar" :user="$i"/> | 	<MkAvatar :class="$style.avatar" :user="$i" link preview/> | ||||||
| 	<div :class="$style.main"> | 	<div :class="$style.main"> | ||||||
| 		<div :class="$style.header"> | 		<div :class="$style.header"> | ||||||
| 			<MkUserName :user="$i"/> | 			<MkUserName :user="$i"/> | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div :class="$style.root"> | <div :class="$style.root"> | ||||||
| 	<MkAvatar :class="$style.avatar" :user="note.user"/> | 	<MkAvatar :class="$style.avatar" :user="note.user" link preview/> | ||||||
| 	<div :class="$style.main"> | 	<div :class="$style.main"> | ||||||
| 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> | 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> | ||||||
| 		<div> | 		<div> | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <div :class="[$style.root, { [$style.children]: depth > 1 }]"> | <div :class="[$style.root, { [$style.children]: depth > 1 }]"> | ||||||
| 	<div :class="$style.main"> | 	<div :class="$style.main"> | ||||||
| 		<MkAvatar :class="$style.avatar" :user="note.user"/> | 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/> | ||||||
| 		<div :class="$style.body"> | 		<div :class="$style.body"> | ||||||
| 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> | 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> | ||||||
| 			<div> | 			<div> | ||||||
|  |  | ||||||
|  | @ -1,8 +1,8 @@ | ||||||
| <template> | <template> | ||||||
| <div ref="elRef" :class="$style.root"> | <div ref="elRef" :class="$style.root"> | ||||||
| 	<div v-once :class="$style.head"> | 	<div v-once :class="$style.head"> | ||||||
| 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user"/> | 		<MkAvatar v-if="notification.type === 'pollEnded'" :class="$style.icon" :user="notification.note.user" link preview/> | ||||||
| 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user"/> | 		<MkAvatar v-else-if="notification.user" :class="$style.icon" :user="notification.user" link preview/> | ||||||
| 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/> | 		<img v-else-if="notification.icon" :class="$style.icon" :src="notification.icon" alt=""/> | ||||||
| 		<div :class="[$style.subIcon, $style['t_' + notification.type]]"> | 		<div :class="[$style.subIcon, $style['t_' + notification.type]]"> | ||||||
| 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i> | 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i> | ||||||
|  |  | ||||||
|  | @ -9,7 +9,7 @@ | ||||||
| 	<header :class="$style.header"> | 	<header :class="$style.header"> | ||||||
| 		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button> | 		<button v-if="!fixed" :class="$style.cancel" class="_button" @click="cancel"><i class="ti ti-x"></i></button> | ||||||
| 		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu"> | 		<button v-click-anime v-tooltip="i18n.ts.switchAccount" :class="$style.account" class="_button" @click="openAccountMenu"> | ||||||
| 			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar" :disable-link="true" /> | 			<MkAvatar :user="postAccount ?? $i" :class="$style.avatar"/> | ||||||
| 		</button> | 		</button> | ||||||
| 		<div :class="$style.headerRight"> | 		<div :class="$style.headerRight"> | ||||||
| 			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span> | 			<span :class="[$style.textCount, { [$style.textOver]: textLength > maxTextLength }]">{{ maxTextLength - textLength }}</span> | ||||||
|  |  | ||||||
|  | @ -7,7 +7,7 @@ | ||||||
| 		</div> | 		</div> | ||||||
| 		<div :class="$style.users"> | 		<div :class="$style.users"> | ||||||
| 			<div v-for="u in users" :key="u.id" :class="$style.user"> | 			<div v-for="u in users" :key="u.id" :class="$style.user"> | ||||||
| 				<MkAvatar :class="$style.avatar" :user="u" :disable-link="true"/> | 				<MkAvatar :class="$style.avatar" :user="u"/> | ||||||
| 				<MkUserName :user="u" :nowrap="true"/> | 				<MkUserName :user="u" :nowrap="true"/> | ||||||
| 			</div> | 			</div> | ||||||
| 			<div v-if="users.length > 10">+{{ count - 10 }}</div> | 			<div v-if="users.length > 10">+{{ count - 10 }}</div> | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> | <div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> | ||||||
| 	<MkAvatar class="avatar" :user="user" :disable-link="true" :show-indicator="true"/> | 	<MkAvatar class="avatar" :user="user" indicator/> | ||||||
| 	<div class="body"> | 	<div class="body"> | ||||||
| 		<span class="name"><MkUserName class="name" :user="user"/></span> | 		<span class="name"><MkUserName class="name" :user="user"/></span> | ||||||
| 		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> | 		<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <div class="_panel vjnjpkug"> | <div class="_panel vjnjpkug"> | ||||||
| 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> | 	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> | ||||||
| 	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> | 	<MkAvatar class="avatar" :user="user" indicator/> | ||||||
| 	<div class="title"> | 	<div class="title"> | ||||||
| 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> | 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> | ||||||
| 		<p class="username"><MkAcct :user="user"/></p> | 		<p class="username"><MkAcct :user="user"/></p> | ||||||
|  |  | ||||||
|  | @ -5,7 +5,7 @@ | ||||||
| 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"> | 			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"> | ||||||
| 				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span> | 				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span> | ||||||
| 			</div> | 			</div> | ||||||
| 			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/> | 			<MkAvatar class="avatar" :user="user" indicator/> | ||||||
| 			<div class="title"> | 			<div class="title"> | ||||||
| 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> | 				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> | ||||||
| 				<p class="username"><MkAcct :user="user"/></p> | 				<p class="username"><MkAcct :user="user"/></p> | ||||||
|  |  | ||||||
|  | @ -25,7 +25,7 @@ | ||||||
| 		<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]"> | 		<div v-if="username != '' || host != ''" :class="[$style.result, { [$style.hit]: users.length > 0 }]"> | ||||||
| 			<div v-if="users.length > 0" :class="$style.users"> | 			<div v-if="users.length > 0" :class="$style.users"> | ||||||
| 				<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()"> | 				<div v-for="user in users" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()"> | ||||||
| 					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/> | 					<MkAvatar :user="user" :class="$style.avatar" indicator/> | ||||||
| 					<div :class="$style.userBody"> | 					<div :class="$style.userBody"> | ||||||
| 						<MkUserName :user="user" :class="$style.userName"/> | 						<MkUserName :user="user" :class="$style.userName"/> | ||||||
| 						<MkAcct :user="user" :class="$style.userAcct"/> | 						<MkAcct :user="user" :class="$style.userAcct"/> | ||||||
|  | @ -39,7 +39,7 @@ | ||||||
| 		<div v-if="username == '' && host == ''" :class="$style.recent"> | 		<div v-if="username == '' && host == ''" :class="$style.recent"> | ||||||
| 			<div :class="$style.users"> | 			<div :class="$style.users"> | ||||||
| 				<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()"> | 				<div v-for="user in recentUsers" :key="user.id" class="_button" :class="[$style.user, { [$style.selected]: selected && selected.id === user.id }]" @click="selected = user" @dblclick="ok()"> | ||||||
| 					<MkAvatar :user="user" :class="$style.avatar" :show-indicator="true" :disable-link="true" :disable-preview="true"/> | 					<MkAvatar :user="user" :class="$style.avatar" indicator/> | ||||||
| 					<div :class="$style.userBody"> | 					<div :class="$style.userBody"> | ||||||
| 						<MkUserName :user="user" :class="$style.userName"/> | 						<MkUserName :user="user" :class="$style.userName"/> | ||||||
| 						<MkAcct :user="user" :class="$style.userAcct"/> | 						<MkAcct :user="user" :class="$style.userAcct"/> | ||||||
|  |  | ||||||
|  | @ -1,11 +1,11 @@ | ||||||
| <template> | <template> | ||||||
| <span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick"> | <span v-if="!link" v-user-preview="preview ? user.id : undefined" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" class="_noSelect" :style="{ color }" :title="acct(user)" @click="onClick"> | ||||||
| 	<img :class="$style.inner" :src="url" decoding="async"/> | 	<img :class="$style.inner" :src="url" decoding="async"/> | ||||||
| 	<MkUserOnlineIndicator v-if="showIndicator" :class="$style.indicator" :user="user"/> | 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> | ||||||
| </span> | </span> | ||||||
| <MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target"> | <MkA v-else v-user-preview="preview ? user.id : undefined" class="_noSelect" :class="[$style.root, { [$style.cat]: user.isCat, [$style.square]: $store.state.squareAvatars }]" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target"> | ||||||
| 	<img :class="$style.inner" :src="url" decoding="async"/> | 	<img :class="$style.inner" :src="url" decoding="async"/> | ||||||
| 	<MkUserOnlineIndicator v-if="showIndicator" :class="$style.indicator" :user="user"/> | 	<MkUserOnlineIndicator v-if="indicator" :class="$style.indicator" :user="user"/> | ||||||
| </MkA> | </MkA> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
|  | @ -21,14 +21,14 @@ import { defaultStore } from '@/store'; | ||||||
| const props = withDefaults(defineProps<{ | const props = withDefaults(defineProps<{ | ||||||
| 	user: misskey.entities.User; | 	user: misskey.entities.User; | ||||||
| 	target?: string | null; | 	target?: string | null; | ||||||
| 	disableLink?: boolean; | 	link?: boolean; | ||||||
| 	disablePreview?: boolean; | 	preview?: boolean; | ||||||
| 	showIndicator?: boolean; | 	indicator?: boolean; | ||||||
| }>(), { | }>(), { | ||||||
| 	target: null, | 	target: null, | ||||||
| 	disableLink: false, | 	link: false, | ||||||
| 	disablePreview: false, | 	preview: false, | ||||||
| 	showIndicator: false, | 	indicator: false, | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const emit = defineEmits<{ | const emit = defineEmits<{ | ||||||
|  |  | ||||||
|  | @ -1,11 +1,11 @@ | ||||||
| <template> | <template> | ||||||
| <div v-if="show" ref="el" :class="[$style.root, { [$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }" @click="onClick"> | <div v-if="show" ref="el" :class="[$style.root, { [$style.slim]: narrow, [$style.thin]: thin_ }]" :style="{ background: bg }" @click="onClick"> | ||||||
| 	<div v-if="narrow" :class="$style.buttonsLeft"> | 	<div v-if="narrow" :class="$style.buttonsLeft"> | ||||||
| 		<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i" :disable-preview="true" :disable-link="true"/> | 		<MkAvatar v-if="props.displayMyAvatar && $i" :class="$style.avatar" :user="$i"/> | ||||||
| 	</div> | 	</div> | ||||||
| 	<template v-if="metadata"> | 	<template v-if="metadata"> | ||||||
| 		<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup"> | 		<div v-if="!hideTitle" :class="$style.titleContainer" @click="showTabsPopup"> | ||||||
| 			<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true" :disable-link="true"/> | 			<MkAvatar v-if="metadata.avatar" :class="$style.titleAvatar" :user="metadata.avatar" indicator/> | ||||||
| 			<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> | 			<i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> | ||||||
| 
 | 
 | ||||||
| 			<div :class="$style.title"> | 			<div :class="$style.title"> | ||||||
|  |  | ||||||
|  | @ -4,7 +4,7 @@ | ||||||
| 		<MkLoading v-if="fetching"/> | 		<MkLoading v-if="fetching"/> | ||||||
| 		<div v-else :class="$style.root" class="_panel"> | 		<div v-else :class="$style.root" class="_panel"> | ||||||
| 			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`"> | 			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`"> | ||||||
| 				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/> | 				<MkAvatar :user="user" class="avatar" indicator/> | ||||||
| 			</MkA> | 			</MkA> | ||||||
| 		</div> | 		</div> | ||||||
| 	</Transition> | 	</Transition> | ||||||
|  |  | ||||||
|  | @ -8,7 +8,7 @@ | ||||||
| 					<Mfm :text="clip.description" :is-note="false" :i="$i"/> | 					<Mfm :text="clip.description" :is-note="false" :i="$i"/> | ||||||
| 				</div> | 				</div> | ||||||
| 				<div class="user"> | 				<div class="user"> | ||||||
| 					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/> | 					<MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -12,7 +12,7 @@ | ||||||
| 			<template #default="{items}"> | 			<template #default="{items}"> | ||||||
| 				<div class="mk-follow-requests"> | 				<div class="mk-follow-requests"> | ||||||
| 					<div v-for="req in items" :key="req.id" class="user _panel"> | 					<div v-for="req in items" :key="req.id" class="user _panel"> | ||||||
| 						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/> | 						<MkAvatar class="avatar" :user="req.follower" indicator link preview/> | ||||||
| 						<div class="body"> | 						<div class="body"> | ||||||
| 							<div class="name"> | 							<div class="name"> | ||||||
| 								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA> | 								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA> | ||||||
|  |  | ||||||
|  | @ -28,7 +28,7 @@ | ||||||
| 							</div> | 							</div> | ||||||
| 						</div> | 						</div> | ||||||
| 						<div class="user"> | 						<div class="user"> | ||||||
| 							<MkAvatar :user="post.user" class="avatar"/> | 							<MkAvatar :user="post.user" class="avatar" link preview/> | ||||||
| 							<div class="name"> | 							<div class="name"> | ||||||
| 								<MkUserName :user="post.user" style="display: block;"/> | 								<MkUserName :user="post.user" style="display: block;"/> | ||||||
| 								<MkAcct :user="post.user"/> | 								<MkAcct :user="post.user"/> | ||||||
|  |  | ||||||
|  | @ -16,7 +16,7 @@ | ||||||
| 					:data-index="i" | 					:data-index="i" | ||||||
| 				> | 				> | ||||||
| 					<div> | 					<div> | ||||||
| 						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" :show-indicator="true"/> | 						<MkAvatar class="avatar" :user="message.groupId ? message.user : isMe(message) ? message.recipient : message.user" indicator link preview/> | ||||||
| 						<header v-if="message.groupId"> | 						<header v-if="message.groupId"> | ||||||
| 							<span class="name">{{ message.group.name }}</span> | 							<span class="name">{{ message.group.name }}</span> | ||||||
| 							<MkTime :time="message.createdAt" class="time"/> | 							<MkTime :time="message.createdAt" class="time"/> | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <template> | <template> | ||||||
| <div class="thvuemwp" :class="{ isMe }"> | <div class="thvuemwp" :class="{ isMe }"> | ||||||
| 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/> | 	<MkAvatar class="avatar" :user="message.user" indicator link preview/> | ||||||
| 	<div class="content"> | 	<div class="content"> | ||||||
| 		<div class="balloon" :class="{ noText: message.text == null }"> | 		<div class="balloon" :class="{ noText: message.text == null }"> | ||||||
| 			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del"> | 			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del"> | ||||||
|  |  | ||||||
|  | @ -19,7 +19,7 @@ | ||||||
| 					<div class=""> | 					<div class=""> | ||||||
| 						<div class="users"> | 						<div class="users"> | ||||||
| 							<div v-for="user in users" :key="user.id" class="user _panel"> | 							<div v-for="user in users" :key="user.id" class="user _panel"> | ||||||
| 								<MkAvatar :user="user" class="avatar" :show-indicator="true"/> | 								<MkAvatar :user="user" class="avatar" indicator link preview/> | ||||||
| 								<div class="body"> | 								<div class="body"> | ||||||
| 									<MkUserName :user="user" class="name"/> | 									<MkUserName :user="user" class="name"/> | ||||||
| 									<MkAcct :user="user" class="acct"/> | 									<MkAcct :user="user" class="acct"/> | ||||||
|  |  | ||||||
|  | @ -21,7 +21,7 @@ | ||||||
| 								<b>{{ item.name }}</b> | 								<b>{{ item.name }}</b> | ||||||
| 								<div v-if="item.description" class="description">{{ item.description }}</div> | 								<div v-if="item.description" class="description">{{ item.description }}</div> | ||||||
| 								<div class="user"> | 								<div class="user"> | ||||||
| 									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/> | 									<MkAvatar :user="item.user" class="avatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/> | ||||||
| 								</div> | 								</div> | ||||||
| 							</MkA> | 							</MkA> | ||||||
| 						</div> | 						</div> | ||||||
|  |  | ||||||
|  | @ -27,7 +27,7 @@ | ||||||
| 						</div> | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 					<div class="user"> | 					<div class="user"> | ||||||
| 						<MkAvatar :user="page.user" class="avatar"/> | 						<MkAvatar :user="page.user" class="avatar" link preview/> | ||||||
| 						<div class="name"> | 						<div class="name"> | ||||||
| 							<MkUserName :user="page.user" style="display: block;"/> | 							<MkUserName :user="page.user" style="display: block;"/> | ||||||
| 							<MkAcct :user="page.user"/> | 							<MkAcct :user="page.user"/> | ||||||
|  |  | ||||||
|  | @ -6,7 +6,7 @@ | ||||||
| 
 | 
 | ||||||
| 			<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)"> | 			<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)"> | ||||||
| 				<div class="avatar"> | 				<div class="avatar"> | ||||||
| 					<MkAvatar :user="account" class="avatar" :disable-link="true"/> | 					<MkAvatar :user="account" class="avatar"/> | ||||||
| 				</div> | 				</div> | ||||||
| 				<div class="body"> | 				<div class="body"> | ||||||
| 					<div class="name"> | 					<div class="name"> | ||||||
|  |  | ||||||
|  | @ -2,7 +2,7 @@ | ||||||
| <div class="_gaps_m"> | <div class="_gaps_m"> | ||||||
| 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> | 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> | ||||||
| 		<div class="avatar"> | 		<div class="avatar"> | ||||||
| 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/> | 			<MkAvatar class="avatar" :user="$i" @click="changeAvatar"/> | ||||||
| 			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton> | 			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton> | ||||||
| 		</div> | 		</div> | ||||||
| 		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton> | 		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton> | ||||||
|  |  | ||||||
|  | @ -5,7 +5,7 @@ | ||||||
| 		<FormSuspense :p="init"> | 		<FormSuspense :p="init"> | ||||||
| 			<div v-if="tab === 'overview'" class="_gaps_m"> | 			<div v-if="tab === 'overview'" class="_gaps_m"> | ||||||
| 				<div class="aeakzknw"> | 				<div class="aeakzknw"> | ||||||
| 					<MkAvatar class="avatar" :user="user" :show-indicator="true"/> | 					<MkAvatar class="avatar" :user="user" indicator link preview/> | ||||||
| 					<div class="body"> | 					<div class="body"> | ||||||
| 						<span class="name"><MkUserName class="name" :user="user"/></span> | 						<span class="name"><MkUserName class="name" :user="user"/></span> | ||||||
| 						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> | 						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> | ||||||
|  |  | ||||||
|  | @ -28,7 +28,7 @@ | ||||||
| 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/> | 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/> | ||||||
| 						</div> | 						</div> | ||||||
| 					</div> | 					</div> | ||||||
| 					<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true" :disable-link="true"/> | 					<MkAvatar class="avatar" :user="user" indicator/> | ||||||
| 					<div class="title"> | 					<div class="title"> | ||||||
| 						<MkUserName :user="user" :nowrap="false" class="name"/> | 						<MkUserName :user="user" :nowrap="false" class="name"/> | ||||||
| 						<div class="bottom"> | 						<div class="bottom"> | ||||||
|  |  | ||||||
|  | @ -35,7 +35,7 @@ | ||||||
| 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span> | 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span> | ||||||
| 			</button> | 			</button> | ||||||
| 			<button v-click-anime class="item _button account" @click="openAccountMenu"> | 			<button v-click-anime class="item _button account" @click="openAccountMenu"> | ||||||
| 				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/> | 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> | ||||||
| 			</button> | 			</button> | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
|  |  | ||||||
|  | @ -45,7 +45,7 @@ | ||||||
| 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span> | 				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span> | ||||||
| 			</button> | 			</button> | ||||||
| 			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu"> | 			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu"> | ||||||
| 				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/> | 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> | ||||||
| 			</button> | 			</button> | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
|  |  | ||||||
|  | @ -29,7 +29,7 @@ | ||||||
| 				<i class="ti ti-settings ti-fw"></i> | 				<i class="ti ti-settings ti-fw"></i> | ||||||
| 			</MkA> | 			</MkA> | ||||||
| 			<button v-click-anime class="item _button account" @click="openAccountMenu"> | 			<button v-click-anime class="item _button account" @click="openAccountMenu"> | ||||||
| 				<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="acct" :user="$i"/> | 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/> | ||||||
| 			</button> | 			</button> | ||||||
| 			<div class="post" @click="post"> | 			<div class="post" @click="post"> | ||||||
| 				<MkButton class="button" gradate full rounded> | 				<MkButton class="button" gradate full rounded> | ||||||
|  |  | ||||||
|  | @ -1,7 +1,7 @@ | ||||||
| <template> | <template> | ||||||
| <div class="npcljfve" :class="{ iconOnly }"> | <div class="npcljfve" :class="{ iconOnly }"> | ||||||
| 	<button v-click-anime class="item _button account" @click="openAccountMenu"> | 	<button v-click-anime class="item _button account" @click="openAccountMenu"> | ||||||
| 		<MkAvatar :user="$i" class="avatar" :disable-link="true"/><MkAcct class="text" :user="$i"/> | 		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> | ||||||
| 	</button> | 	</button> | ||||||
| 	<div class="post" data-cy-open-post-form @click="post"> | 	<div class="post" data-cy-open-post-form @click="post"> | ||||||
| 		<MkButton class="button" gradate full rounded> | 		<MkButton class="button" gradate full rounded> | ||||||
|  |  | ||||||
|  | @ -9,7 +9,7 @@ | ||||||
| 			<div v-if="info" class="page active link"> | 			<div v-if="info" class="page active link"> | ||||||
| 				<div class="title"> | 				<div class="title"> | ||||||
| 					<i v-if="info.icon" class="icon" :class="info.icon"></i> | 					<i v-if="info.icon" class="icon" :class="info.icon"></i> | ||||||
| 					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/> | 					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" indicator/> | ||||||
| 					<span v-if="info.title" class="text">{{ info.title }}</span> | 					<span v-if="info.title" class="text">{{ info.title }}</span> | ||||||
| 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> | 					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> | ||||||
| 				</div> | 				</div> | ||||||
|  | @ -28,7 +28,7 @@ | ||||||
| 		</button> | 		</button> | ||||||
| 		<div v-if="info" class="title"> | 		<div v-if="info" class="title"> | ||||||
| 			<i v-if="info.icon" class="icon" :class="info.icon"></i> | 			<i v-if="info.icon" class="icon" :class="info.icon"></i> | ||||||
| 			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/> | 			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" indicator/> | ||||||
| 			<span v-if="info.title" class="text">{{ info.title }}</span> | 			<span v-if="info.title" class="text">{{ info.title }}</span> | ||||||
| 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> | 			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/> | ||||||
| 		</div> | 		</div> | ||||||
|  |  | ||||||
|  | @ -2,7 +2,7 @@ | ||||||
| <div class="_panel"> | <div class="_panel"> | ||||||
| 	<div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> | 	<div :class="$style.container" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }"> | ||||||
| 		<div :class="$style.avatarContainer"> | 		<div :class="$style.avatarContainer"> | ||||||
| 			<MkAvatar :class="$style.avatar" :user="$i" :disable-link="true" :disable-preview="true"/> | 			<MkAvatar :class="$style.avatar" :user="$i"/> | ||||||
| 		</div> | 		</div> | ||||||
| 		<div :class="$style.bodyContainer"> | 		<div :class="$style.bodyContainer"> | ||||||
| 			<div :class="$style.body"> | 			<div :class="$style.body"> | ||||||
|  |  | ||||||
|  | @ -10,9 +10,9 @@ | ||||||
| 		</div> | 		</div> | ||||||
| 		<MkLoading v-else-if="fetching"/> | 		<MkLoading v-else-if="fetching"/> | ||||||
| 		<div v-else class="users"> | 		<div v-else class="users"> | ||||||
| 			<MkA v-for="user in users" :key="user.id" class="user"> | 			<span v-for="user in users" :key="user.id" class="user"> | ||||||
| 				<MkAvatar :user="user" class="avatar" :show-indicator="true"/> | 				<MkAvatar :user="user" class="avatar" indicator link preview/> | ||||||
| 			</MkA> | 			</span> | ||||||
| 		</div> | 		</div> | ||||||
| 	</div> | 	</div> | ||||||
| </MkContainer> | </MkContainer> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue