diff --git a/CHANGELOG.md b/CHANGELOG.md index 5629d36442..35162f6b0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ - オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外) - 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように - フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように +- 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように - Fix: サーバーメトリクスが90度傾いている - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正 - Fix: sparkle内にリンクを入れるとクリック不能になる問題の修正 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>