natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance: add re-collapsing to quoted notes

This commit is contained in:
Johann150 2022-08-15 22:28:13 +02:00 committed by ThatOneCalculator
parent f101791d02
commit 6490f4cf76
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/components/sub-note-content.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="wrmlmaau" :class="{ collapsed }"> <div class="wrmlmaau" :class="{ collapsed, isLong }">
<div class="body"> <div class="body">
<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span> <span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA> <MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
@ -14,9 +14,12 @@
<summary>{{ i18n.ts.poll }}</summary> <summary>{{ i18n.ts.poll }}</summary>
<XPoll :note="note"/> <XPoll :note="note"/>
</details> </details>
<button v-if="collapsed" class="fade _button" @click="collapsed = false"> <button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
<span>{{ i18n.ts.showMore }}</span> <span>{{ i18n.ts.showMore }}</span>
</button> </button>
<button v-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
<span>{{ i18n.ts.showLess }}</span>
</button>
</div> </div>
</template> </template>
@ -31,11 +34,14 @@ const props = defineProps<{
note: misskey.entities.Note; note: misskey.entities.Note;
}>(); }>();
const collapsed = $ref(
const isLong = (
props.note.cw == null && props.note.text != null && ( props.note.cw == null && props.note.text != null && (
(props.note.text.split('\n').length > 9) || (props.note.text.split('\n').length > 9) ||
(props.note.text.length > 500) (props.note.text.length > 500)
)); )
);
const collapsed = $ref(props.note.cw == null && isLong);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -85,5 +91,23 @@ const collapsed = $ref(
} }
} }
} }
&.isLong {
> .showLess {
width: 100%;
margin-top: 1em;
position: sticky;
bottom: 1em;
> span {
display: inline-block;
background: var(--panel);
padding: 6px 10px;
font-size: 0.8em;
border-radius: 999px;
box-shadow: 0 0 7px 7px var(--bg);
}
}
}
} }
</style> </style>