natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/client/src/components/MkNoteSub.vue
View File

@ -10,13 +10,17 @@
<XNoteHeader class="header" :note="note" :mini="true"/> <XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <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> <MkA v-if="note.replyId" :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop>
<i v-if="note.renoteId != parentId" class="ph-quotes ph-bold ph-lg reply-icon"></i> <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"/> <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"/> <XCwButton v-model="showContent" :note="note"/>
</p> </p>
<div v-show="note.cw == null || showContent" class="content" @click="router.push(notePage(note))"> <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>
</div> </div>
<MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter> <MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter>
@ -112,16 +116,24 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
} }
> .body { > .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 { > .cw {
cursor: default; cursor: default;
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-wrap: break-word; overflow-wrap: break-word;
> .reply-icon {
margin-right: 6px;
color: var(--accent);
}
> .text { > .text {
margin-right: 8px; margin-right: 8px;
} }

13
packages/client/src/components/MkSubNoteContent.vue
View File

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

12
packages/client/src/pages/note.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="800"> <MkSpacer :content-max="800" :marginMin="0">
<div class="fcuexfpr" v-size="{ max: [500, 350] }"> <div class="fcuexfpr">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="note" class="note"> <div v-if="note" class="note">
<div v-if="showNext" class="_gap"> <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> </style>