feat: expand all CWs in thread

https://iceshrimp.dev/iceshrimp/iceshrimp/issues/38
This commit is contained in:
ShittyKopper 2023-07-29 15:24:20 +03:00
parent 8737e2fa71
commit ef5accd92c
6 changed files with 36 additions and 2 deletions

View file

@ -64,6 +64,8 @@ showMore: "Show more"
newer: "newer" newer: "newer"
older: "older" older: "older"
showLess: "Close" showLess: "Close"
expandAllCws: "Show content for all replies"
collapseAllCws: "Hide content for all replies"
youGotNewFollower: "followed you" youGotNewFollower: "followed you"
receiveFollowRequest: "Follow request received" receiveFollowRequest: "Follow request received"
followRequestAccepted: "Follow request accepted" followRequestAccepted: "Follow request accepted"

View file

@ -14,6 +14,7 @@
<MkNoteSub <MkNoteSub
v-if="appearNote.reply && !detailedView && !collapsedReply" v-if="appearNote.reply && !detailedView && !collapsedReply"
:note="appearNote.reply" :note="appearNote.reply"
:forceExpandCw="props.forceExpandCw"
class="reply-to" class="reply-to"
/> />
<div <div
@ -105,6 +106,7 @@
:detailed="true" :detailed="true"
:detailedView="detailedView" :detailedView="detailedView"
:parentId="appearNote.parentId" :parentId="appearNote.parentId"
:forceExpandCw="props.forceExpandCw"
@push="(e) => router.push(notePage(e))" @push="(e) => router.push(notePage(e))"
@focusfooter="footerEl.focus()" @focusfooter="footerEl.focus()"
@expanded="(e) => setPostExpanded(e)" @expanded="(e) => setPostExpanded(e)"
@ -298,6 +300,7 @@ const props = defineProps<{
pinned?: boolean; pinned?: boolean;
detailedView?: boolean; detailedView?: boolean;
collapsedReply?: boolean; collapsedReply?: boolean;
forceExpandCw?: boolean;
}>(); }>();
const inChannel = inject("inChannel", null); const inChannel = inject("inChannel", null);

View file

@ -16,6 +16,7 @@
class="reply-to" class="reply-to"
:note="note" :note="note"
:detailedView="true" :detailedView="true"
:forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="note.reply" mini /> <MkLoading v-else-if="note.reply" mini />
<MkNoteSub <MkNoteSub
@ -23,6 +24,7 @@
:note="note.reply" :note="note.reply"
class="reply-to" class="reply-to"
:detailedView="true" :detailedView="true"
:forceExpandCw="props.expandAllCws"
/> />
<MkNote <MkNote
@ -31,6 +33,7 @@
tabindex="-1" tabindex="-1"
:note="note" :note="note"
detailedView detailedView
:forceExpandCw="props.expandAllCws"
></MkNote> ></MkNote>
<MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab"> <MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
@ -72,6 +75,7 @@
:conversation="replies" :conversation="replies"
:detailedView="true" :detailedView="true"
:parentId="note.id" :parentId="note.id"
:forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" /> <MkLoading v-else-if="tab === 'replies' && note.repliesCount > 0" />
@ -84,6 +88,7 @@
:conversation="replies" :conversation="replies"
:detailedView="true" :detailedView="true"
:parentId="note.id" :parentId="note.id"
:forceExpandCw="props.expandAllCws"
/> />
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" /> <MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
@ -186,6 +191,7 @@ import appear from "@/directives/appear";
const props = defineProps<{ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
pinned?: boolean; pinned?: boolean;
expandAllCws?: boolean;
}>(); }>();
let tab = $ref("replies"); let tab = $ref("replies");

View file

@ -35,6 +35,7 @@
:parentId="parentId" :parentId="parentId"
:conversation="conversation" :conversation="conversation"
:detailedView="detailedView" :detailedView="detailedView"
:forceExpandCw="props.forceExpandCw"
@focusfooter="footerEl.focus()" @focusfooter="footerEl.focus()"
/> />
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
@ -148,6 +149,7 @@
:replyLevel="replyLevel + 1" :replyLevel="replyLevel + 1"
:parentId="appearNote.id" :parentId="appearNote.id"
:detailedView="detailedView" :detailedView="detailedView"
:forceExpandCw="props.forceExpandCw"
/> />
<div v-else-if="replies.length > 0" class="more"> <div v-else-if="replies.length > 0" class="more">
<div class="line"></div> <div class="line"></div>
@ -211,6 +213,7 @@ const props = withDefaults(
conversation?: misskey.entities.Note[]; conversation?: misskey.entities.Note[];
parentId?; parentId?;
detailedView?; detailedView?;
forceExpandCw?: boolean;
// how many notes are in between this one and the note being viewed in detail // how many notes are in between this one and the note being viewed in detail
depth?: number; depth?: number;

View file

@ -215,6 +215,7 @@ const props = defineProps<{
conversation?; conversation?;
detailed?: boolean; detailed?: boolean;
detailedView?: boolean; detailedView?: boolean;
forceExpandCw?: boolean;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -238,7 +239,14 @@ const urls = props.note.text
? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5) ? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
: null; : null;
let showContent = $ref(false); let _showContent = $ref(null);
let showContent = $computed({
set(val) { _showContent = val },
get() {
if (_showContent != null) return _showContent;
return props.forceExpandCw || false;
},
})
const mfms = props.note.text const mfms = props.note.text
? extractMfmWithAnimation(mfm.parse(props.note.text)) ? extractMfmWithAnimation(mfm.parse(props.note.text))

View file

@ -39,6 +39,7 @@
<XNoteDetailed <XNoteDetailed
:key="appearNote.id" :key="appearNote.id"
v-model:note="appearNote" v-model:note="appearNote"
:expandAllCws="expandAllCws"
class="note" class="note"
/> />
</div> </div>
@ -91,6 +92,7 @@ let showNext = $ref(false);
let error = $ref(); let error = $ref();
let isRenote = $ref(false); let isRenote = $ref(false);
let appearNote = $ref<null | misskey.entities.Note>(); let appearNote = $ref<null | misskey.entities.Note>();
let expandAllCws = $ref(false);
const prevPagination = { const prevPagination = {
endpoint: "users/notes" as const, endpoint: "users/notes" as const,
@ -160,11 +162,21 @@ function fetchNote() {
}); });
} }
function toggleAllCws() {
expandAllCws = !expandAllCws;
}
watch(() => props.noteId, fetchNote, { watch(() => props.noteId, fetchNote, {
immediate: true, immediate: true,
}); });
const headerActions = $computed(() => []); const headerActions = $computed(() => appearNote ? [
{
icon: `${expandAllCws ? "ph-eye" : "ph-eye-slash"} ph-bold ph-lg`,
text: expandAllCws ? i18n.ts.collapseAllCws : i18n.ts.expandAllCws,
handler: toggleAllCws,
},
]:[]);
const headerTabs = $computed(() => []); const headerTabs = $computed(() => []);