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

View file

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