usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweak: split name and username

This commit is contained in:
fly_mc 2024-10-02 20:38:12 +08:00
parent e9519b02fb
commit 8c1a623e73
3 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/frontend/src/components/MkInstanceTicker.vue
View File

@ -49,6 +49,7 @@ $height: 2ex;
border-radius: 4px 0 0 4px;
overflow: clip;
color: #fff;
margin: -.3em 0 0 0;
text-shadow: /* .866 ≈ sin(60deg) */
1px 0 1px #000,
.866px .5px 1px #000,

5
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -661,6 +661,7 @@ function loadConversation() {
}
.noteHeaderName {
margin: 0 0 -.2em 0;
font-weight: bold;
line-height: 1.3;
}
@ -680,7 +681,7 @@ function loadConversation() {
}
.noteHeaderUsername {
margin-bottom: 2px;
margin: 0 0 .5em 0;
line-height: 1.3;
word-wrap: anywhere;
}
@ -744,7 +745,7 @@ function loadConversation() {
.noteFooterButton {
margin: 0;
padding: 8px;
padding: 6px;
opacity: 0.7;
&:not(:last-child) {

54
packages/frontend/src/components/MkNoteHeader.vue
View File

@ -5,20 +5,22 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<header :class="$style.root">
<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;">
<div style="display: flex; white-space: nowrap; align-items: baseline;">
<div v-if="mock" :class="$style.name">
<MkUserName :user="note.user"/>
<div :class="$style.section">
<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.7" style="min-width: 0;">
<div style="display: flex;">
<div v-if="mock" :class="$style.name">
<MkUserName :user="note.user"/>
</div>
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
</div>
</div>
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)">
<MkUserName :user="note.user"/>
</MkA>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div>
<div :class="$style.username"><MkAcct :user="note.user"/></div>
</div>
</component>
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="(role, i) in note.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl!"/>
<div :class="$style.username"><MkAcct :user="note.user"/></div>
</component>
</div>
<div :class="$style.info">
<div v-if="mock">
@ -60,10 +62,26 @@ const mock = inject<boolean>('mock', false);
white-space: nowrap;
}
.section {
align-items: flex-start;
white-space: nowrap;
flex-direction: column;
overflow: hidden;
&:last-child {
display: flex;
align-items: flex-end;
margin-left: auto;
margin-bottom: auto;
padding-left: 10px;
overflow: clip;
}
}
.name {
flex-shrink: 1;
display: block;
margin: 0 .5em 0 0;
margin: .5em .5em 0 0;
padding: 0;
overflow: hidden;
font-size: 1em;
@ -88,9 +106,15 @@ const mock = inject<boolean>('mock', false);
.username {
flex-shrink: 9999999;
margin: 0 .5em 0 0;
margin: -.3em .5em .3em 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 95%;
opacity: 0.8;
&::-webkit-scrollbar {
display: none;
}
}
.info {