diff options
Diffstat (limited to 'packages/frontend/src/components/MkSubNoteContent.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSubNoteContent.vue | 30 |
1 files changed, 24 insertions, 6 deletions
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 3a050889c8..3a032a1167 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -15,9 +15,12 @@ <summary>{{ i18n.ts.poll }}</summary> <MkPoll :note="note"/> </details> - <button v-if="collapsed" :class="$style.fade" class="_button" @click="collapsed = false"> + <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> @@ -28,16 +31,15 @@ import MkMediaList from '@/components/MkMediaList.vue'; import MkPoll from '@/components/MkPoll.vue'; import { i18n } from '@/i18n'; import { $i } from '@/account'; +import { shouldCollapsed } from '@/scripts/collapsed'; const props = defineProps<{ note: misskey.entities.Note; }>(); -const collapsed = $ref( - props.note.cw == null && props.note.text != null && ( - (props.note.text.split('\n').length > 9) || - (props.note.text.length > 500) - )); +const isLong = shouldCollapsed(props.note); + +const collapsed = $ref(isLong); </script> <style lang="scss" module> @@ -86,4 +88,20 @@ const collapsed = $ref( font-style: oblique; color: var(--renote); } + +.showLess { + width: 100%; + margin-top: 14px; + position: sticky; + bottom: calc(var(--stickyBottom, 0px) + 14px); +} + +.showLessLabel { + display: inline-block; + background: var(--popup); + padding: 6px 10px; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); +} </style> |