ae5d052274
to keep things manageable i merged a lot of one off values into just a handful of common sizes, so some parts of the ui will look different than upstream even with the "Misskey" rounding mode
112 lines
3.1 KiB
Vue
112 lines
3.1 KiB
Vue
<!--
|
|
SPDX-FileCopyrightText: syuilo and other misskey contributors
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
-->
|
|
|
|
<template>
|
|
<header :class="$style.root">
|
|
<MkA 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 v-if="note.user.badgeRoles" :class="$style.badgeRoles">
|
|
<img v-for="role in note.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
|
|
</div>
|
|
<div :class="$style.info">
|
|
<MkA :to="notePage(note)">
|
|
<MkTime :time="note.createdAt" colored/>
|
|
</MkA>
|
|
<span v-if="note.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[note.visibility]">
|
|
<i v-if="note.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
|
|
<i v-else-if="note.visibility === 'followers'" class="ph-lock ph-bold ph-lg"></i>
|
|
<i v-else-if="note.visibility === 'specified'" ref="specified" class="ph-envelope ph-bold ph-lg"></i>
|
|
</span>
|
|
<span v-if="note.updatedAt" ref="menuVersionsButton" style="margin-left: 0.5em;" title="Edited" @mousedown="menuVersions()"><i class="ph-pencil ph-bold ph-lg"></i></span>
|
|
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ph-rocket ph-bold pg-lg"></i></span>
|
|
<span v-if="note.channel" style="margin-left: 0.5em;" :title="note.channel.name"><i class="ph-television ph-bold ph-lg"></i></span>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { shallowRef } from 'vue';
|
|
import * as Misskey from 'misskey-js';
|
|
import { i18n } from '@/i18n.js';
|
|
import { notePage } from '@/filters/note.js';
|
|
import { userPage } from '@/filters/user.js';
|
|
import { getNoteVersionsMenu } from '@/scripts/get-note-versions-menu.js';
|
|
import { popupMenu } from '@/os.js';
|
|
|
|
const props = defineProps<{
|
|
note: Misskey.entities.Note;
|
|
}>();
|
|
const menuVersionsButton = shallowRef<HTMLElement>();
|
|
|
|
async function menuVersions(viaKeyboard = false): Promise<void> {
|
|
const { menu, cleanup } = await getNoteVersionsMenu({ note: props.note, menuVersionsButton });
|
|
popupMenu(menu, menuVersionsButton.value, {
|
|
viaKeyboard,
|
|
}).then(focus).finally(cleanup);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.root {
|
|
display: flex;
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.name {
|
|
flex-shrink: 1;
|
|
display: block;
|
|
margin: 0 .5em 0 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
text-overflow: ellipsis;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.isBot {
|
|
flex-shrink: 0;
|
|
align-self: center;
|
|
margin: 0 .5em 0 0;
|
|
padding: 1px 6px;
|
|
font-size: 80%;
|
|
border: solid 0.5px var(--divider);
|
|
border-radius: var(--radius-xs);
|
|
}
|
|
|
|
.username {
|
|
flex-shrink: 9999999;
|
|
margin: 0 .5em 0 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.info {
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.badgeRoles {
|
|
margin: 0 .5em 0 0;
|
|
}
|
|
|
|
.badgeRole {
|
|
height: 1.3em;
|
|
vertical-align: -20%;
|
|
|
|
& + .badgeRole {
|
|
margin-left: 0.2em;
|
|
}
|
|
}
|
|
</style>
|