SubNoteContent fixes

This commit is contained in:
Freeplay 2023-05-17 15:24:51 -04:00
parent da522482ac
commit eec5f5dc23
3 changed files with 27 additions and 10 deletions

View File

@ -59,6 +59,7 @@ defineExpose({
<style lang="scss" scoped>
._button {
font-weight: 700;
z-index: 2;
> span {
background: var(--cwBg) !important;
color: var(--cwFg);

View File

@ -1,18 +1,18 @@
<template>
<button v-if="modelValue" class="fade _button" @click.stop="toggle">
<span>{{ i18n.ts.showMore }}</span>
</button>
<button v-if="!modelValue" class="showLess _button" @click.stop="toggle">
<span>{{ i18n.ts.showLess }}</span>
<button ref="el" class="_button" :class="{ fade: modelValue, showLess: !modelValue }" @click.stop="toggle">
<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
</button>
</template>
<script lang="ts" setup>
import { i18n } from "@/i18n";
import { ref } from "vue";
const props = defineProps<{
modelValue: boolean;
}>();
const el = ref<HTMLElement>();
const emit = defineEmits<{
(ev: "update:modelValue", v: boolean): void;
}>();
@ -20,6 +20,14 @@ const emit = defineEmits<{
const toggle = () => {
emit("update:modelValue", !props.modelValue);
};
function focus() {
el.value.focus();
}
defineExpose({
focus,
});
</script>
<style lang="scss" scoped>
.fade {
@ -28,6 +36,7 @@ const toggle = () => {
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
> span {
display: inline-block;
background: var(--panel);

View File

@ -40,6 +40,12 @@
disableAnim: disableMfm,
}"
>
<XShowMoreButton
ref="showMoreButton"
v-if="isLong && collapsed"
v-model="collapsed"
v-on:keydown="focusFooter"
></XShowMoreButton>
<XCwButton
ref="cwButton"
v-if="note.cw && !showContent"
@ -50,7 +56,7 @@
<div
class="body"
v-bind="{
'aria-label': !showContent ? '' : null,
'aria-hidden': !showContent ? 'true' : null,
tabindex: !showContent ? '-1' : null,
}"
>
@ -115,16 +121,16 @@
</div>
</template>
<div
v-if="note.cw && !showContent"
v-if="note.cw && !showContent || showMoreButton && collapsed"
tabindex="0"
v-on:focus="cwButton?.focus()"
v-on:focus="cwButton?.focus(); showMoreButton?.focus()"
></div>
</div>
<XShowMoreButton
v-if="isLong"
v-if="isLong && !collapsed"
v-model="collapsed"
></XShowMoreButton>
<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
<XCwButton v-if="note.cw && showContent" v-model="showContent" :note="note" />
</div>
<MkButton
v-if="hasMfm && defaultStore.state.animatedMfm"
@ -171,6 +177,7 @@ const emit = defineEmits<{
}>();
const cwButton = ref<HTMLElement>();
const showMoreButton = ref<HTMLElement>();
const isLong =
!props.detailedView &&
props.note.cw == null &&