Emit event when cw is expanded

This commit is contained in:
TalonTheDragon 2023-05-22 12:18:17 +02:00
parent c6d6950006
commit 891cc62e0d
2 changed files with 30 additions and 48 deletions

View file

@ -18,79 +18,47 @@
{{ i18n.ts.featured }} {{ i18n.ts.featured }}
</div> </div>
<div v-if="pinned" class="info"> <div v-if="pinned" class="info">
<i class="ph-push-pin ph-bold ph-lg"></i <i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}
>{{ i18n.ts.pinnedNote }}
</div> </div>
<div v-if="isRenote" class="renote"> <div v-if="isRenote" class="renote">
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
v-user-preview="note.userId"
class="name"
:to="userPage(note.user)"
@click.stop
>
<MkUserName :user="note.user" /> <MkUserName :user="note.user" />
</MkA> </MkA>
</template> </template>
</I18n> </I18n>
<div class="info"> <div class="info">
<button <button ref="renoteTime" class="_button time" @click.stop="showRenoteMenu()">
ref="renoteTime" <i v-if="isMyRenote" class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"></i>
class="_button time"
@click.stop="showRenoteMenu()"
>
<i
v-if="isMyRenote"
class="ph-dots-three-outline ph-bold ph-lg dropdownIcon"
></i>
<MkTime :time="note.createdAt" /> <MkTime :time="note.createdAt" />
</button> </button>
<MkVisibility :note="note" /> <MkVisibility :note="note" />
</div> </div>
</div> </div>
</div> </div>
<article <article class="article" @contextmenu.stop="onContextmenu" @click="noteClick">
class="article"
@contextmenu.stop="onContextmenu"
@click="noteClick"
>
<div class="main"> <div class="main">
<div class="header-container"> <div class="header-container">
<MkAvatar class="avatar" :user="appearNote.user" /> <MkAvatar class="avatar" :user="appearNote.user" />
<XNoteHeader <XNoteHeader class="header" :note="appearNote" :mini="true" />
class="header"
:note="appearNote"
:mini="true"
/>
</div> </div>
<div class="body"> <div class="body">
<MkSubNoteContent <MkSubNoteContent class="text" :note="appearNote" :detailed="true" :detailedView="detailedView"
class="text" :parentId="appearNote.parentId" @push="(e) => router.push(notePage(e))"
:note="appearNote" @focusfooter="footerEl.focus()" @expanded="(e) => setPostExpanded(e)"></MkSubNoteContent>
:detailed="true"
:detailedView="detailedView"
:parentId="appearNote.parentId"
@push="(e) => router.push(notePage(e))"
@focusfooter="footerEl.focus()"
></MkSubNoteContent>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini /> <MkLoading v-if="translating" mini />
<div v-else class="translated"> <div v-else class="translated">
<b <b>{{
>{{ i18n.t("translatedFrom", {
i18n.t("translatedFrom", { x: translation.sourceLang,
x: translation.sourceLang, })
}) }}:
}}:
</b> </b>
<Mfm <Mfm :text="translation.text" :author="appearNote.user" :i="$i"
:text="translation.text" :custom-emojis="appearNote.emojis" />
:author="appearNote.user"
:i="$i"
:custom-emojis="appearNote.emojis"
/>
</div> </div>
</div> </div>
</div> </div>
@ -461,18 +429,30 @@ function readPromo() {
isDeleted.value = true; isDeleted.value = true;
} }
let postIsExpanded = false;
function setPostExpanded(val: boolean) {
postIsExpanded = val;
}
const accessibleLabel = computed(() => { const accessibleLabel = computed(() => {
let label = `${props.note.user.username}; `; let label = `${props.note.user.username}; `;
if (props.note.renote) { if (props.note.renote) {
label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `; label += `${i18n.t("renoted")} ${props.note.renote.user.username}; `;
if (props.note.renote.cw) { if (props.note.renote.cw) {
label += `content warning: ${props.note.renote.cw}; `; label += `content warning: ${props.note.renote.cw}; `;
if (postIsExpanded) {
label += `${props.note.renote.text}; `;
}
} else { } else {
label += `${props.note.renote.text}; `; label += `${props.note.renote.text}; `;
} }
} else { } else {
if (props.note.cw) { if (props.note.cw) {
label += `${i18n.t("cw")}: ${props.note.cw}; `; label += `${i18n.t("cw")}: ${props.note.cw}; `;
if (postIsExpanded) {
label += `${props.note.text}; `;
}
} else { } else {
label += `${props.note.text}; `; label += `${props.note.text}; `;
} }

View file

@ -54,6 +54,7 @@
v-model="showContent" v-model="showContent"
:note="note" :note="note"
v-on:keydown="focusFooter" v-on:keydown="focusFooter"
v-on:update:model-value="(val) => emit('expanded', val)"
/> />
<div <div
class="body" class="body"
@ -190,6 +191,7 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
(ev: "push", v): void; (ev: "push", v): void;
(ev: "focusfooter"): void; (ev: "focusfooter"): void;
(ev: "expanded", v): void;
}>(); }>();
const cwButton = ref<HTMLElement>(); const cwButton = ref<HTMLElement>();