diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-07-08 19:01:47 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-07-08 19:01:47 +0900 |
| commit | ac6d6fdeb813e9c99e0d843a24cce81a99fd91da (patch) | |
| tree | 48cdf8bfa7e017288b400e1c54a583c0f01a97c4 /packages/frontend/src/components/MkSubNoteContent.vue | |
| parent | fix(frontend): 長い文章を投稿する際、プレビューが画面か... (diff) | |
| download | sharkey-ac6d6fdeb813e9c99e0d843a24cce81a99fd91da.tar.gz sharkey-ac6d6fdeb813e9c99e0d843a24cce81a99fd91da.tar.bz2 sharkey-ac6d6fdeb813e9c99e0d843a24cce81a99fd91da.zip | |
enhance(frontend): 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように
Resolve #11185
Diffstat (limited to 'packages/frontend/src/components/MkSubNoteContent.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSubNoteContent.vue | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 3a050889c8..c76ce7315d 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> @@ -33,11 +36,13 @@ const props = defineProps<{ note: misskey.entities.Note; }>(); -const collapsed = $ref( +const isLong = props.note.cw == null && props.note.text != null && ( (props.note.text.split('\n').length > 9) || (props.note.text.length > 500) - )); + ); + +const collapsed = $ref(isLong); </script> <style lang="scss" module> @@ -86,4 +91,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> |