[chatui] Improve readability of renotes and replies
This commit is contained in:
parent
03a7a4e56d
commit
e3035ea18b
2 changed files with 96 additions and 118 deletions
packages/frontend/src/ui/chat
|
|
@ -1,113 +1,56 @@
|
|||
<template>
|
||||
<div class="wrpstxzv" :class="{ children }">
|
||||
<div class="main">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<div class="body">
|
||||
<XNoteHeader class="header" :note="note" :mini="true"/>
|
||||
<div class="body">
|
||||
<p v-if="note.cw != null" class="cw">
|
||||
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
|
||||
<MkCwButton v-model="showContent" :note="note"/>
|
||||
</p>
|
||||
<div v-show="note.cw == null || showContent" class="content">
|
||||
<XSubNoteContent class="text" :note="note"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrpstxzv">
|
||||
<MkAvatar class="avatar" :user="note.user" link preview/>
|
||||
<Mfm :text="summary" :plain="true" :nowrap="true" :author="note.user" :nyaize="'respect'" class="text"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, shallowRef } from 'vue';
|
||||
import { ref, shallowRef, watchEffect } from 'vue';
|
||||
import * as misskey from 'misskey-js';
|
||||
import XNoteHeader from './note-header.vue';
|
||||
import XSubNoteContent from './sub-note-content.vue';
|
||||
import MkCwButton from '@/components/MkCwButton.vue';
|
||||
import { notePage } from '@/filters/note.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { getNoteSummary } from '@/scripts/get-note-summary.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
detail?: boolean;
|
||||
children?: boolean;
|
||||
// how many notes are in between this one and the note being viewed in detail
|
||||
depth?: number;
|
||||
}>(), {
|
||||
depth: 1,
|
||||
children: false,
|
||||
showContent?: boolean | null;
|
||||
}>();
|
||||
|
||||
const summary = ref(null);
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.showContent) {
|
||||
summary.value = getNoteSummary({
|
||||
...props.note,
|
||||
cw: null,
|
||||
});
|
||||
} else {
|
||||
summary.value = getNoteSummary(props.note);
|
||||
}
|
||||
});
|
||||
|
||||
let showContent = ref(false);
|
||||
let replies: misskey.entities.Note[] = shallowRef([]);
|
||||
|
||||
if (props.detail) {
|
||||
misskeyApi('notes/children', {
|
||||
noteId: props.note.id,
|
||||
limit: 5,
|
||||
}).then(res => {
|
||||
replies = res;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrpstxzv {
|
||||
padding: 16px 16px;
|
||||
font-size: 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
|
||||
&.children {
|
||||
padding: 10px 0 0 16px;
|
||||
font-size: 1em;
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin: 0 8px 0 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
> .main {
|
||||
display: flex;
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin: 0 8px 0 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> .header {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
> .body {
|
||||
> .cw {
|
||||
cursor: default;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
> .text {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
> .text {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .reply {
|
||||
border-left: solid 0.5px var(--divider);
|
||||
margin-top: 10px;
|
||||
> .text {
|
||||
overflow: hidden;
|
||||
flex-shrink: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,22 @@
|
|||
ref="rootEl"
|
||||
v-hotkey="keymap"
|
||||
class="vfzoeqcg"
|
||||
:class="{ renote: isRenote, operating: operating }"
|
||||
:class="{ collapsed: renoteCollapsed, operating: operating }"
|
||||
:tabindex="!isDeleted ? '-1' : undefined"
|
||||
>
|
||||
<XSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" class="reply-to"/>
|
||||
<div v-if="appearNote.reply && !renoteCollapsed" class="header reply-to">
|
||||
<MkA class="icon" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-corner-up-right"></i></MkA>
|
||||
<XSub class="note" :note="appearNote.reply" :showContent="showContent"/>
|
||||
</div>
|
||||
<div v-if="pinned" class="info"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</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="isRenote" class="renote">
|
||||
<div v-if="isRenote && renoteCollapsed" class="collapsed-renote" @click="renoteCollapsed = false">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<i class="icon ti ti-repeat"></i>
|
||||
<XSub class="note" :note="appearNote"/>
|
||||
</div>
|
||||
<div v-else-if="isRenote" class="header renote-header">
|
||||
<MkAvatar class="avatar" :user="note.user"/>
|
||||
<i class="ti ti-repeat"></i>
|
||||
<I18n :src="i18n.ts.renotedBy" tag="span">
|
||||
|
|
@ -36,11 +44,7 @@
|
|||
<span v-if="note.channel" :title="note.channel.name"><i class="ti ti-device-tv"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="renoteCollapsed" class="collapsed-renote">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" link preview/>
|
||||
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" class="text" @click="renoteCollapsed = false"/>
|
||||
</div>
|
||||
<article v-else class="article" @contextmenu.stop="onContextmenu">
|
||||
<article v-if="!renoteCollapsed" class="article" @contextmenu.stop="onContextmenu">
|
||||
<MkAvatar class="avatar" :user="appearNote.user"/>
|
||||
<div class="main">
|
||||
<XNoteHeader class="header" :note="appearNote" :mini="true"/>
|
||||
|
|
@ -53,7 +57,6 @@
|
|||
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed }">
|
||||
<div class="text">
|
||||
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :nyaize="'respect'" :emojiUrls="appearNote.emojis"/>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
|
|
@ -618,19 +621,59 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
padding-top: 8px;
|
||||
}
|
||||
|
||||
> .reply-to {
|
||||
opacity: 0.7;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
> .renote, > .collapsed-renote {
|
||||
> .collapsed-renote {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
overflow: hidden;
|
||||
gap: 0.5em;
|
||||
padding: 12px 16px 12px 16px;
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
color: var(--renote);
|
||||
}
|
||||
|
||||
> .note {
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
> .header {
|
||||
padding: 12px 16px 0px 16px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
> .reply-to {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .icon {
|
||||
color: var(--mention);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
> .note {
|
||||
opacity: 0.7;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
> .renote-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px 4px 16px;
|
||||
line-height: 28px;
|
||||
white-space: pre;
|
||||
color: var(--renote);
|
||||
font-size: 0.9em;
|
||||
|
||||
> .avatar {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -642,7 +685,8 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
|
||||
> i {
|
||||
margin-right: 4px;
|
||||
color: var(--renote);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
> span {
|
||||
|
|
@ -676,10 +720,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
}
|
||||
}
|
||||
|
||||
> .renote + .article {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
> .article {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
|
|
@ -746,11 +786,6 @@ function emitUpdReaction(emoji: string, delta: number) {
|
|||
> .text {
|
||||
overflow-wrap: break-word;
|
||||
|
||||
> .reply {
|
||||
color: var(--accent);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
> .rp {
|
||||
margin-left: 4px;
|
||||
font-style: oblique;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue