refactor
This commit is contained in:
FineArchs
parent
af50d7353d
commit
b8243c9448
|
|
@ -289,11 +289,7 @@ const renoteCollapsed = ref(
|
|||
|
||||
// oversized note collapsing
|
||||
const collapsibleArea = ref(null);
|
||||
const collapseSize = ({
|
||||
small: 9,
|
||||
medium: 13.5,
|
||||
large: 18,
|
||||
})[defaultStore.state.collapsingNoteSize] ?? 13.5;
|
||||
const collapseSize = defaultStore.state.collapsingNoteSize;
|
||||
const isLong = ref(true);
|
||||
switch (collapsingNoteCondition) {
|
||||
case 'detailedCalculation':
|
||||
|
|
|
|||
|
|
@ -4,28 +4,30 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="[$style.root, { [$style.collapsed]: collapsed }]">
|
||||
<div>
|
||||
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
|
||||
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||
<Mfm v-if="note.text" :text="note.text" :parsedNodes="ast" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
|
||||
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
|
||||
<div :class="[$style.root, { [$style.collapsed]: collapsed }]" :style="{ 'max-height': collapsed ? `${collapseSize}em` : undefined }">
|
||||
<div ref="collapsibleArea">
|
||||
<div>
|
||||
<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
|
||||
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deletedNote }})</span>
|
||||
<MkA v-if="note.replyId" :class="$style.reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
|
||||
<Mfm v-if="note.text" :text="note.text" :parsedNodes="ast" :author="note.user" :nyaize="'respect'" :emojiUrls="note.emojis"/>
|
||||
<MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
|
||||
</div>
|
||||
<details v-if="note.files && note.files.length > 0">
|
||||
<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
|
||||
<MkMediaList :mediaList="note.files"/>
|
||||
</details>
|
||||
<details v-if="note.poll">
|
||||
<summary>{{ i18n.ts.poll }}</summary>
|
||||
<MkPoll :noteId="note.id" :poll="note.poll"/>
|
||||
</details>
|
||||
<button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
|
||||
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
|
||||
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<details v-if="note.files && note.files.length > 0">
|
||||
<summary>({{ i18n.tsx.withNFiles({ n: note.files.length }) }})</summary>
|
||||
<MkMediaList :mediaList="note.files"/>
|
||||
</details>
|
||||
<details v-if="note.poll">
|
||||
<summary>{{ i18n.ts.poll }}</summary>
|
||||
<MkPoll :noteId="note.id" :poll="note.poll"/>
|
||||
</details>
|
||||
<button v-if="isLong && collapsed" :class="$style.fade" class="_button" @click="collapsed = false">
|
||||
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
||||
</button>
|
||||
<button v-else-if="isLong && !collapsed" :class="$style.showLess" class="_button" @click="collapsed = true">
|
||||
<span :class="$style.showLessLabel">{{ i18n.ts.showLess }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -36,7 +38,8 @@ import * as mfm from 'mfm-js';
|
|||
import MkMediaList from '@/components/MkMediaList.vue';
|
||||
import MkPoll from '@/components/MkPoll.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { shouldCollapsed } from '@/scripts/collapsed.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
import { shouldCollapseLegacy, shouldCollapse } from '@/scripts/collapsed.js';
|
||||
|
||||
const props = defineProps<{
|
||||
note: Misskey.entities.Note;
|
||||
|
|
@ -44,10 +47,34 @@ const props = defineProps<{
|
|||
|
||||
const ast = computed(() => props.note.text ? mfm.parse(props.note.text) : []);
|
||||
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
const isLong = shouldCollapsed(props.note, ast.value);
|
||||
|
||||
const collapsed = ref(isLong);
|
||||
// oversized note collapsing
|
||||
const collapsingNoteCondition = defaultStore.state.collapsingNoteCondition;
|
||||
const collapseSize = defaultStore.state.collapsingNoteSize;
|
||||
const collapsibleArea = ref(null);
|
||||
if (collapsingNoteCondition === 'seeRenderedSize') {
|
||||
onMounted(() => {
|
||||
const current = collapsibleArea.value.clientHeight;
|
||||
const limit = collapseSize * parseFloat(getComputedStyle(collapsibleArea.value).fontSize);
|
||||
isLong.value = current > limit;
|
||||
collapsed.value &&= isLong.value;
|
||||
})
|
||||
}
|
||||
const isLong = ref(true);
|
||||
switch (collapsingNoteCondition) {
|
||||
case 'detailedCalculation':
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
isLong.value = shouldCollapse(props.note, collapseSize, ast.value);
|
||||
break;
|
||||
case 'seeRenderedSize':
|
||||
break;
|
||||
// fail safe
|
||||
case 'legacyCalculation':
|
||||
default:
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
isLong.value = shouldCollapseLegacy(props.note, []);
|
||||
break;
|
||||
}
|
||||
const collapsed = ref(isLong.value);
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
@ -56,7 +83,6 @@ const collapsed = ref(isLong);
|
|||
|
||||
&.collapsed {
|
||||
position: relative;
|
||||
max-height: 9em;
|
||||
overflow: clip;
|
||||
|
||||
> .fade {
|
||||
|
|
|
|||
|
|
@ -100,9 +100,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkRadios>
|
||||
<MkRadios v-model="collapsingNoteSize" v-if="collapsingNoteCondition !== 'legacyCalculation'">
|
||||
<template #label>{{ i18n.ts.collapsingNoteSize }}</template>
|
||||
<option value="large">{{ i18n.ts.large }}</option>
|
||||
<option value="medium">{{ i18n.ts.medium }}</option>
|
||||
<option value="small">{{ i18n.ts.small }}</option>
|
||||
<option :value="18">{{ i18n.ts.large }}</option>
|
||||
<option :value="13.5">{{ i18n.ts.medium }}</option>
|
||||
<option :value="9">{{ i18n.ts.small }}</option>
|
||||
</MkRadios>
|
||||
</div>
|
||||
</FormSection>
|
||||
|
|
|
|||
|
|
@ -384,7 +384,7 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
},
|
||||
collapsingNoteSize: {
|
||||
where: 'device',
|
||||
default: 'medium' as 'small' | 'medium' | 'large',
|
||||
default: 13.5,
|
||||
},
|
||||
collapsingNoteCondition: {
|
||||
where: 'device',
|
||||
|
|
|
|||
Loading…
Reference in New Issue