From 650187deaff1b2950d9471ac3ac9fdc2db942863 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 8 Feb 2023 17:48:02 +0900 Subject: [PATCH] perf(client): do not render custom emojis in user names #9778 --- packages/backend/src/core/CustomEmojiService.ts | 8 -------- .../src/core/entities/UserEntityService.ts | 2 +- .../frontend/src/components/MkAbuseReport.vue | 2 +- .../frontend/src/components/MkAutocomplete.vue | 2 +- packages/frontend/src/components/MkMenu.vue | 2 +- packages/frontend/src/components/MkNote.vue | 4 ++-- .../frontend/src/components/MkNoteDetailed.vue | 6 +++--- packages/frontend/src/components/MkNoteHeader.vue | 2 +- .../frontend/src/components/MkNotePreview.vue | 2 +- .../frontend/src/components/MkNotification.vue | 2 +- .../src/components/MkReactionsViewer.details.vue | 2 +- .../frontend/src/components/MkUserCardMini.vue | 2 +- packages/frontend/src/components/MkUserInfo.vue | 5 +++-- .../frontend/src/components/MkUserPreview.vue | 2 +- .../src/components/MkUserSelectDialog.vue | 4 ++-- .../frontend/src/components/MkUsersTooltip.vue | 2 +- .../global/MkMisskeyFlavoredMarkdown.vue | 9 +-------- .../src/components/global/MkPageHeader.vue | 2 +- .../frontend/src/components/global/MkUserName.vue | 15 --------------- packages/frontend/src/components/index.ts | 3 --- packages/frontend/src/pages/clip.vue | 2 +- packages/frontend/src/pages/follow-requests.vue | 2 +- packages/frontend/src/pages/gallery/post.vue | 2 +- packages/frontend/src/pages/messaging/index.vue | 2 +- packages/frontend/src/pages/my-lists/list.vue | 2 +- packages/frontend/src/pages/note.vue | 2 +- packages/frontend/src/pages/page.vue | 2 +- packages/frontend/src/pages/settings/accounts.vue | 4 +--- packages/frontend/src/pages/user-info.vue | 2 +- packages/frontend/src/pages/user/home.vue | 4 ++-- packages/frontend/src/style.scss | 7 +++++++ packages/frontend/src/widgets/WidgetProfile.vue | 4 +--- 32 files changed, 42 insertions(+), 71 deletions(-) delete mode 100644 packages/frontend/src/components/global/MkUserName.vue diff --git a/packages/backend/src/core/CustomEmojiService.ts b/packages/backend/src/core/CustomEmojiService.ts index 63f0319442..3ac796fb2f 100644 --- a/packages/backend/src/core/CustomEmojiService.ts +++ b/packages/backend/src/core/CustomEmojiService.ts @@ -150,17 +150,9 @@ export class CustomEmojiService { if (note.renote) { emojis = emojis.concat(note.renote.emojis .map(e => this.parseEmojiStr(e, note.renote!.userHost))); - if (note.renote.user) { - emojis = emojis.concat(note.renote.user.emojis - .map(e => this.parseEmojiStr(e, note.renote!.userHost))); - } } const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis; emojis = emojis.concat(customReactions); - if (note.user) { - emojis = emojis.concat(note.user.emojis - .map(e => this.parseEmojiStr(e, note.userHost))); - } } return emojis.filter(x => x.name != null && x.host != null) as { name: string; host: string; }[]; } diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts index eea9d5567d..09b69d509a 100644 --- a/packages/backend/src/core/entities/UserEntityService.ts +++ b/packages/backend/src/core/entities/UserEntityService.ts @@ -413,7 +413,6 @@ export class UserEntityService implements OnModuleInit { faviconUrl: instance.faviconUrl, themeColor: instance.themeColor, } : undefined) : undefined, - emojis: this.customEmojiService.populateEmojis(user.emojis, user.host), onlineStatus: this.getOnlineStatus(user), // パフォーマンス上の理由でローカルユーザーのみ badgeRoles: user.host == null ? this.roleService.getUserBadgeRoles(user.id).then(rs => rs.map(r => ({ @@ -464,6 +463,7 @@ export class UserEntityService implements OnModuleInit { isModerator: role.isModerator, isAdministrator: role.isAdministrator, }))), + emojis: this.customEmojiService.populateEmojis(user.emojis, user.host), } : {}), ...(opts.detail && isMe ? { diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue index 0e18a5a83d..701dd8bb3d 100644 --- a/packages/frontend/src/components/MkAbuseReport.vue +++ b/packages/frontend/src/components/MkAbuseReport.vue @@ -4,7 +4,7 @@ <MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`"> <MkAvatar class="avatar" :user="report.targetUser" indicator/> <div class="names"> - <MkUserName class="name" :user="report.targetUser"/> + <span class="name _nowrap">{{ report.targetUser.name ?? report.targetUser.username }}</span> <MkAcct class="acct" :user="report.targetUser" style="display: block;"/> </div> </MkA> diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue index e523b988b0..595e393e01 100644 --- a/packages/frontend/src/components/MkAutocomplete.vue +++ b/packages/frontend/src/components/MkAutocomplete.vue @@ -4,7 +4,7 @@ <li v-for="user in users" tabindex="-1" :class="$style.item" @click="complete(type, user)" @keydown="onKeydown"> <img :class="$style.avatar" :src="user.avatarUrl"/> <span :class="$style.userName"> - <MkUserName :key="user.id" :user="user"/> + <span :key="user.id" class="_nowrap">{{ user.name ?? user.username }}</span> </span> <span>@{{ acct(user) }}</span> </li> diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index eee77a9475..2185a3ed08 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -27,7 +27,7 @@ <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> </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)"> - <MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/> + <MkAvatar :user="item.user" :class="$style.avatar"/><span class="_nowrap">{{ item.user.name ?? item.user.username }}</span> <span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span> </button> <span v-else-if="item.type === 'switch'" :tabindex="i" :class="$style.item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)"> diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 351861ac17..a77158c862 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -17,7 +17,7 @@ <I18n :src="i18n.ts.renotedBy" tag="span" :class="$style.renoteText"> <template #user> <MkA v-user-preview="note.userId" :class="$style.renoteUserName" :to="userPage(note.user)"> - <MkUserName :user="note.user"/> + <span class="_nowrap">{{ note.user.name ?? note.user.username }}</span> </MkA> </template> </I18n> @@ -108,7 +108,7 @@ <I18n :src="i18n.ts.userSaysSomething" tag="small"> <template #name> <MkA v-user-preview="appearNote.userId" :to="userPage(appearNote.user)"> - <MkUserName :user="appearNote.user"/> + <span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span> </MkA> </template> </I18n> diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 0da06c4f14..b632a77396 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -16,7 +16,7 @@ <I18n :src="i18n.ts.renotedBy" tag="span"> <template #user> <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)"> - <MkUserName :user="note.user"/> + <span class="_nowrap">{{ note.user.name ?? note.user.username }}</span> </MkA> </template> </I18n> @@ -39,7 +39,7 @@ <div class="body"> <div class="top"> <MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)"> - <MkUserName :nowrap="false" :user="appearNote.user"/> + <span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span> </MkA> <span v-if="appearNote.user.isBot" class="is-bot">bot</span> <div class="info"> @@ -125,7 +125,7 @@ <I18n :src="i18n.ts.userSaysSomething" tag="small"> <template #name> <MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)"> - <MkUserName :user="appearNote.user"/> + <span class="_nowrap">{{ appearNote.user.name ?? appearNote.user.username }}</span> </MkA> </template> </I18n> diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue index 6b43f14665..d86a37ed55 100644 --- a/packages/frontend/src/components/MkNoteHeader.vue +++ b/packages/frontend/src/components/MkNoteHeader.vue @@ -1,7 +1,7 @@ <template> <header :class="$style.root"> <MkA v-once v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)"> - <MkUserName :user="note.user"/> + <span class="_nowrap">{{ note.user.name ?? note.user.username }}</span> </MkA> <div v-if="note.user.isBot" :class="$style.isBot">bot</div> <div :class="$style.username"><MkAcct :user="note.user"/></div> diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue index 1cc01386ba..d3862e2ac3 100644 --- a/packages/frontend/src/components/MkNotePreview.vue +++ b/packages/frontend/src/components/MkNotePreview.vue @@ -3,7 +3,7 @@ <MkAvatar :class="$style.avatar" :user="$i" link preview/> <div :class="$style.main"> <div :class="$style.header"> - <MkUserName :user="$i"/> + <span class="_nowrap">{{ $i.name ?? $i.username }}</span> </div> <div> <div :class="$style.content"> diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue index e7a951dd27..fd055dfb58 100644 --- a/packages/frontend/src/components/MkNotification.vue +++ b/packages/frontend/src/components/MkNotification.vue @@ -31,7 +31,7 @@ <header :class="$style.header"> <span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span> <span v-else-if="notification.type === 'achievementEarned'">{{ i18n.ts._notification.achievementEarned }}</span> - <MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA> + <MkA v-else-if="notification.user" v-user-preview="notification.user.id" :class="$style.headerName" :to="userPage(notification.user)"><span class="_nowrap">{{ notification.user.name ?? notification.user.username }}</span></MkA> <span v-else>{{ notification.header }}</span> <MkTime v-if="withTime" :time="notification.createdAt" :class="$style.headerTime"/> </header> diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue index b4210be911..b0d7ebf3ee 100644 --- a/packages/frontend/src/components/MkReactionsViewer.details.vue +++ b/packages/frontend/src/components/MkReactionsViewer.details.vue @@ -8,7 +8,7 @@ <div :class="$style.users"> <div v-for="u in users" :key="u.id" :class="$style.user"> <MkAvatar :class="$style.avatar" :user="u"/> - <MkUserName :user="u" :nowrap="true"/> + <span class="_nowrap">{{ u.name ?? u.username }}</span> </div> <div v-if="users.length > 10">+{{ count - 10 }}</div> </div> diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue index 457504e6ca..e2b9b2a15f 100644 --- a/packages/frontend/src/components/MkUserCardMini.vue +++ b/packages/frontend/src/components/MkUserCardMini.vue @@ -2,7 +2,7 @@ <div v-adaptive-bg :class="[$style.root, { yellow: user.isSilenced, red: user.isSuspended, gray: false }]"> <MkAvatar class="avatar" :user="user" indicator/> <div class="body"> - <span class="name"><MkUserName class="name" :user="user"/></span> + <span class="name _nowrap">{{ user.name ?? user.username }}</span> <span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> </div> <MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/> diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 1486423b3d..4459fd1a5d 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -3,8 +3,9 @@ <div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div> <MkAvatar class="avatar" :user="user" indicator/> <div class="title"> - <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> - <p class="username"><MkAcct :user="user"/></p> + <MkA class="name _nowrap" :to="userPage(user)"{{ user.name ?? user.username }}</mk-a> + <p class="username"><MkAcct :user="user"/></p> + </mka> </div> <span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span> <div class="description"> diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue index f68fdd64d9..c9519a29a5 100644 --- a/packages/frontend/src/components/MkUserPreview.vue +++ b/packages/frontend/src/components/MkUserPreview.vue @@ -7,7 +7,7 @@ </div> <MkAvatar class="avatar" :user="user" indicator/> <div class="title"> - <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> + <MkA class="name _nowrap" :to="userPage(user)">{{ user.name ?? user.username }}</MkA> <p class="username"><MkAcct :user="user"/></p> </div> <div class="description"> diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue index c17b97f283..dd976a4b35 100644 --- a/packages/frontend/src/components/MkUserSelectDialog.vue +++ b/packages/frontend/src/components/MkUserSelectDialog.vue @@ -27,7 +27,7 @@ <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" indicator/> <div :class="$style.userBody"> - <MkUserName :user="user" :class="$style.userName"/> + <span :class="$style.userName" class="_nowrap">{{ user.name ?? user.username }}</span> <MkAcct :user="user" :class="$style.userAcct"/> </div> </div> @@ -41,7 +41,7 @@ <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" indicator/> <div :class="$style.userBody"> - <MkUserName :user="user" :class="$style.userName"/> + <span :class="$style.userName" class="_nowrap">{{ user.name ?? user.username }}</span> <MkAcct :user="user" :class="$style.userAcct"/> </div> </div> diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue index d0f95fceda..c2c7271fcd 100644 --- a/packages/frontend/src/components/MkUsersTooltip.vue +++ b/packages/frontend/src/components/MkUsersTooltip.vue @@ -3,7 +3,7 @@ <div :class="$style.root"> <div v-for="u in users" :key="u.id" :class="$style.user"> <MkAvatar :class="$style.avatar" :user="u"/> - <MkUserName :class="$style.name" :user="u" :nowrap="true"/> + <span :class="$style.name" class="_nowrap">{{ u.name ?? u.username }}</span> </div> <div v-if="users.length < count" :class="$style.omitted">+{{ count - users.length }}</div> </div> diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue index 28a0d1c986..f49dc7ddff 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue @@ -1,5 +1,5 @@ <template> -<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { [$style.nowrap]: nowrap }]"/> +<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :is-note="isNote" :class="[$style.root, { '_nowrap': nowrap }]"/> </template> <script lang="ts" setup> @@ -160,12 +160,5 @@ const props = withDefaults(defineProps<{ <style lang="scss" module> .root { white-space: pre-wrap; - - &.nowrap { - white-space: pre; - word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html - overflow: hidden; - text-overflow: ellipsis; - } } </style> diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue index ab66502e06..3dcb19bd89 100644 --- a/packages/frontend/src/components/global/MkPageHeader.vue +++ b/packages/frontend/src/components/global/MkPageHeader.vue @@ -9,7 +9,7 @@ <i v-else-if="metadata.icon" :class="[$style.titleIcon, metadata.icon]"></i> <div :class="$style.title"> - <MkUserName v-if="metadata.userName" :user="metadata.userName" :nowrap="true"/> + <span v-if="metadata.userName" class="_nowrap">{{ metadata.userName.name ?? metadata.userName.username }}</span> <div v-else-if="metadata.title">{{ metadata.title }}</div> <div v-if="!narrow && metadata.subtitle" :class="$style.subtitle"> {{ metadata.subtitle }} diff --git a/packages/frontend/src/components/global/MkUserName.vue b/packages/frontend/src/components/global/MkUserName.vue deleted file mode 100644 index 4186a4a4fb..0000000000 --- a/packages/frontend/src/components/global/MkUserName.vue +++ /dev/null @@ -1,15 +0,0 @@ -<template> -<Mfm :text="user.name ?? user.username" :author="user" :plain="true" :nowrap="nowrap" :emoji-urls="user.emojis"/> -</template> - -<script lang="ts" setup> -import { } from 'vue'; -import * as misskey from 'misskey-js'; - -const props = withDefaults(defineProps<{ - user: misskey.entities.User; - nowrap?: boolean; -}>(), { - nowrap: true, -}); -</script> diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts index 560870f84c..4ddebe7827 100644 --- a/packages/frontend/src/components/index.ts +++ b/packages/frontend/src/components/index.ts @@ -6,7 +6,6 @@ import MkAcct from './global/MkAcct.vue'; import MkAvatar from './global/MkAvatar.vue'; import MkEmoji from './global/MkEmoji.vue'; import MkCustomEmoji from './global/MkCustomEmoji.vue'; -import MkUserName from './global/MkUserName.vue'; import MkEllipsis from './global/MkEllipsis.vue'; import MkTime from './global/MkTime.vue'; import MkUrl from './global/MkUrl.vue'; @@ -28,7 +27,6 @@ export default function(app: App) { app.component('MkAvatar', MkAvatar); app.component('MkEmoji', MkEmoji); app.component('MkCustomEmoji', MkCustomEmoji); - app.component('MkUserName', MkUserName); app.component('MkEllipsis', MkEllipsis); app.component('MkTime', MkTime); app.component('MkUrl', MkUrl); @@ -50,7 +48,6 @@ declare module '@vue/runtime-core' { MkAvatar: typeof MkAvatar; MkEmoji: typeof MkEmoji; MkCustomEmoji: typeof MkCustomEmoji; - MkUserName: typeof MkUserName; MkEllipsis: typeof MkEllipsis; MkTime: typeof MkTime; MkUrl: typeof MkUrl; diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue index cd9cec0d4f..89419f79cb 100644 --- a/packages/frontend/src/pages/clip.vue +++ b/packages/frontend/src/pages/clip.vue @@ -8,7 +8,7 @@ <Mfm :text="clip.description" :is-note="false" :i="$i"/> </div> <div class="user"> - <MkAvatar :user="clip.user" class="avatar" indicator link preview/> <MkUserName :user="clip.user" :nowrap="false"/> + <MkAvatar :user="clip.user" class="avatar" indicator link preview/> <span class="_nowrap">{{ clip.user.name ?? clip.user.username }}</span> </div> </div> diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue index 835dd0b54c..e8a59d71e0 100644 --- a/packages/frontend/src/pages/follow-requests.vue +++ b/packages/frontend/src/pages/follow-requests.vue @@ -15,7 +15,7 @@ <MkAvatar class="avatar" :user="req.follower" indicator link preview/> <div class="body"> <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 _nowrap" :to="userPage(req.follower)">{{ req.follower.name ?? req.follower.username }}</MkA> <p class="acct">@{{ acct(req.follower) }}</p> </div> <div v-if="req.follower.description" class="description" :title="req.follower.description"> diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue index 31e2727bb5..20bc0e3d39 100644 --- a/packages/frontend/src/pages/gallery/post.vue +++ b/packages/frontend/src/pages/gallery/post.vue @@ -30,7 +30,7 @@ <div class="user"> <MkAvatar :user="post.user" class="avatar" link preview/> <div class="name"> - <MkUserName :user="post.user" style="display: block;"/> + <div class="_nowrap">{{ post.user.name ?? post.user.username }}</div> <MkAcct :user="post.user"/> </div> <MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/> diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue index 3d11cf13e9..0fd1f71d42 100644 --- a/packages/frontend/src/pages/messaging/index.vue +++ b/packages/frontend/src/pages/messaging/index.vue @@ -22,7 +22,7 @@ <MkTime :time="message.createdAt" class="time"/> </header> <header v-else> - <span class="name"><MkUserName :user="isMe(message) ? message.recipient : message.user"/></span> + <span class="name">{{ isMe(message) ? message.recipient.name : message.user.name }}</span> <span class="username">@{{ acct(isMe(message) ? message.recipient : message.user) }}</span> <MkTime :time="message.createdAt" class="time"/> </header> diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue index f47b4bf90f..cb190fb112 100644 --- a/packages/frontend/src/pages/my-lists/list.vue +++ b/packages/frontend/src/pages/my-lists/list.vue @@ -21,7 +21,7 @@ <div v-for="user in users" :key="user.id" class="user _panel"> <MkAvatar :user="user" class="avatar" indicator link preview/> <div class="body"> - <MkUserName :user="user" class="name"/> + <span class="name _nowrap">{{ user.name ?? user.username }}</span> <MkAcct :user="user" class="acct"/> </div> <div class="action"> diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue index 86b3fce3c5..e28c30f627 100644 --- a/packages/frontend/src/pages/note.vue +++ b/packages/frontend/src/pages/note.vue @@ -21,7 +21,7 @@ <b>{{ item.name }}</b> <div v-if="item.description" class="description">{{ item.description }}</div> <div class="user"> - <MkAvatar :user="item.user" class="avatar" indicator link preview/> <MkUserName :user="item.user" :nowrap="false"/> + <MkAvatar :user="item.user" class="avatar" indicator link preview/> <span class="_nowrap">{{ item.user.name ?? item.user.username }}</span> </div> </MkA> </div> diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue index 202244b34c..a4bc17e3bf 100644 --- a/packages/frontend/src/pages/page.vue +++ b/packages/frontend/src/pages/page.vue @@ -29,7 +29,7 @@ <div class="user"> <MkAvatar :user="page.user" class="avatar" link preview/> <div class="name"> - <MkUserName :user="page.user" style="display: block;"/> + <div class="_nowrap">{{ page.user.name ?? page.user.username }}</div> <MkAcct :user="page.user"/> </div> <MkFollowButton v-if="!$i || $i.id != page.user.id" :user="page.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/> diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue index a5eaae2bad..8fa30bccba 100644 --- a/packages/frontend/src/pages/settings/accounts.vue +++ b/packages/frontend/src/pages/settings/accounts.vue @@ -9,9 +9,7 @@ <MkAvatar :user="account" class="avatar"/> </div> <div class="body"> - <div class="name"> - <MkUserName :user="account"/> - </div> + <div class="name _nowrap">{{ account.name ?? account.username }}</div> <div class="acct"> <MkAcct :user="account"/> </div> diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue index 7ba8a3d16b..40e5ec83c9 100644 --- a/packages/frontend/src/pages/user-info.vue +++ b/packages/frontend/src/pages/user-info.vue @@ -7,7 +7,7 @@ <div class="aeakzknw"> <MkAvatar class="avatar" :user="user" indicator link preview/> <div class="body"> - <span class="name"><MkUserName class="name" :user="user"/></span> + <span class="name _nowrap">{{ user.name ?? user.username }}</span> <span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span> <span class="state"> <span v-if="suspended" class="suspended">Suspended</span> diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 56858a9377..e4bb024a83 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -14,7 +14,7 @@ <div ref="bannerEl" class="banner" :style="style"></div> <div class="fade"></div> <div class="title"> - <MkUserName class="name" :user="user" :nowrap="true"/> + <span class="name _nowrap">{{ user.name ?? user.username }}</span> <div class="bottom"> <span class="username"><MkAcct :user="user" :detail="true"/></span> <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span> @@ -30,7 +30,7 @@ </div> <MkAvatar class="avatar" :user="user" indicator/> <div class="title"> - <MkUserName :user="user" :nowrap="false" class="name"/> + <span class="name _nowrap">{{ user.name ?? user.username }}</span> <div class="bottom"> <span class="username"><MkAcct :user="user" :detail="true"/></span> <span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span> diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index aa4efe3052..bacdc967d8 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -156,6 +156,13 @@ hr { -webkit-touch-callout: none; } +._nowrap { + white-space: pre; + word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html + overflow: clip; + text-overflow: ellipsis; +} + ._ghost { @extend ._noSelect; pointer-events: none; diff --git a/packages/frontend/src/widgets/WidgetProfile.vue b/packages/frontend/src/widgets/WidgetProfile.vue index 7e8ac429e5..b2a5c87104 100644 --- a/packages/frontend/src/widgets/WidgetProfile.vue +++ b/packages/frontend/src/widgets/WidgetProfile.vue @@ -6,9 +6,7 @@ </div> <div :class="$style.bodyContainer"> <div :class="$style.body"> - <MkA :class="$style.name" :to="userPage($i)"> - <MkUserName :user="$i"/> - </MkA> + <MkA :class="$style.name" :to="userPage($i)" class="_nowrap">{{ $i.name ?? $i.username }}</MkA> <div :class="$style.username"><MkAcct :user="$i" detail/></div> </div> </div>