yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-02-17 18:17:29 -06:00
Code Issues Projects Releases Packages Wiki Activity

seperate name and username in different lines

Browse source
This commit is contained in:
fly_mc 2024-09-30 23:47:42 +08:00
parent 50b67df2c9
commit eee6a1c5f0
1 changed files with 60 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
packages/frontend/src/components/MkNoteHeader.vue
View file

@ -4,41 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<header :class="$style.root"> <header :class="$style.root">
<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.5" style="min-width: 0;"> <div :class="$style.section">
<div style="display: flex; white-space: nowrap; align-items: baseline;"> <!--<component :is="defaultStore.state.enableCondensedLine ? 'MkCondensedLine' : 'div'" :minScale="0.5" style="min-width: 0;">-->
<div v-if="mock" :class="$style.name"> <div style="display: flex;">
<MkUserName :user="note.user"/> <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> </div>
<MkA v-else v-user-preview="note.user.id" :class="$style.name" :to="userPage(note.user)"> <div :class="$style.username"><MkAcct :user="note.user"/></div>
<MkUserName :user="note.user"/> <!--</component>-->
</MkA> </div>
<div v-if="note.user.isBot" :class="$style.isBot">bot</div> <!--<div :class="$style.section">-->
<div :class="$style.username"><MkAcct :user="note.user"/></div> <div :class="$style.info">
</div> <span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span>
</component> <div v-if="mock">
<div v-if="note.user.badgeRoles" :class="$style.badgeRoles"> <MkTime :time="note.createdAt" colored/>
<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 :to="notePage(note)">
<div :class="$style.info"> <MkTime :time="note.createdAt" colored/>
<span v-if="note.updatedAt" style="margin-right: 0.5em;" :title="i18n.ts.edited"><i class="ti ti-pencil"></i></span> </MkA>
<div v-if="mock"> <span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
<MkTime :time="note.createdAt" colored/> <i v-if="note.visibility === 'home'" class="ti ti-home"></i>
</div> <i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i>
<MkA v-else :to="notePage(note)"> <i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
<MkTime :time="note.createdAt" colored/> </span>
</MkA> <span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]"> <span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
<i v-if="note.visibility === 'home'" class="ti ti-home"></i> </div>
<i v-else-if="note.visibility === 'followers'" class="ti ti-lock"></i> <!--</div>-->
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i> </header>
</span>
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ti ti-rocket-off"></i></span>
<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
</div>
</header>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { inject } from 'vue'; import { inject } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
@ -61,6 +65,22 @@ const mock = inject<boolean>('mock', false);
white-space: nowrap; 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 { .name {
flex-shrink: 1; flex-shrink: 1;
display: block; display: block;
@ -92,6 +112,12 @@ const mock = inject<boolean>('mock', false);
margin: 0 .5em 0 0; margin: 0 .5em 0 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 85%;
opacity: 0.8;
&::-webkit-scrollbar {
display: none;
}
} }
.info { .info {
@ -112,4 +138,4 @@ const mock = inject<boolean>('mock', false);
margin-left: 0.2em; margin-left: 0.2em;
} }
} }
</style> </style>