note-improvements (#9721)

boop

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9721
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
Free 2023-03-19 07:13:02 +00:00 committed by Kainoa Kanter
parent 681cefcda5
commit b2bc51a4ee
3 changed files with 28 additions and 23 deletions

View File

@ -10,13 +10,17 @@
<XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body">
<p v-if="note.cw != null" class="cw">
<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
<MkA v-if="note.replyId" :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA v-if="conversation && note.renoteId && note.renoteId != parentId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<XCwButton v-model="showContent" :note="note"/>
</p>
<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))">
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId"/>
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/>
</div>
</div>
<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
@ -112,16 +116,24 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
}
> .body {
:deep(.reply-icon) {
display: inline-block;
border-radius: 6px;
padding: .2em .2em;
margin-right: .2em;
color: var(--accent);
transition: background .2s;
&:hover, &:focus {
background: var(--buttonHoverBg);
}
}
> .cw {
cursor: default;
display: block;
margin: 0;
padding: 0;
overflow-wrap: break-word;
> .reply-icon {
margin-right: 6px;
color: var(--accent);
}
> .text {
margin-right: 8px;
}

View File

@ -3,8 +3,12 @@
<div class="body">
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
<template v-if="!note.cw">
<i v-if="note.replyId" class="ph-arrow-bend-up-left ph-bold ph-lg reply-icon"></i>
<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i>
<MkA v-if="note.replyId" :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA v-if="conversation && note.renoteId && note.renoteId != parentId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
</template>
<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">{{ i18n.ts.quoteAttached }}: ...</MkA>
@ -45,6 +49,7 @@ import { i18n } from '@/i18n';
const props = defineProps<{
note: misskey.entities.Note;
parentId?;
conversation?;
detailed?: boolean;
}>();
@ -64,10 +69,6 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
overflow-wrap: break-word;
> .body {
> .reply-icon {
margin-right: 6px;
color: var(--accent);
}
> .rp {
margin-left: 4px;

View File

@ -1,8 +1,8 @@
<template>
<MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800">
<div class="fcuexfpr" v-size="{ max: [500, 350] }">
<MkSpacer :content-max="800" :marginMin="0">
<div class="fcuexfpr">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note">
<div v-if="showNext" class="_gap">
@ -202,13 +202,5 @@ definePageMetadata(computed(() => note ? {
}
}
}
#calckey_app > :not(.mk-deck) {
&.max-width_500px > .note {
margin-inline: -24px;
}
&.max-width_350px > .note {
margin-inline: -12px;
}
}
}
</style>