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> <style lang="scss" scoped>
._button { ._button {
font-weight: 700; font-weight: 700;
z-index: 2;
> span { > span {
background: var(--cwBg) !important; background: var(--cwBg) !important;
color: var(--cwFg); color: var(--cwFg);

View File

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

View File

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