diff --git a/CHANGELOG.md b/CHANGELOG.md index 350658881c..fe6206c72e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## 12.x.x (unreleased) ### Improvements +- クライアント: 返信先やRenoteに対しても自動折りたたみされるように - クライアント: 長いスレッドの表示を改善 - クライアント: アカウント削除に確認ダイアログを出すように diff --git a/packages/client/src/components/sub-note-content.vue b/packages/client/src/components/sub-note-content.vue index 3f03f021cd..0a557c0c6c 100644 --- a/packages/client/src/components/sub-note-content.vue +++ b/packages/client/src/components/sub-note-content.vue @@ -1,5 +1,5 @@ @@ -37,7 +40,14 @@ export default defineComponent({ }, data() { return { + collapsed: false, }; + }, + created() { + this.collapsed = this.note.cw == null && this.note.text && ( + (this.note.text.split('\n').length > 9) || + (this.note.text.length > 500) + ); } }); @@ -58,5 +68,36 @@ export default defineComponent({ color: var(--renote); } } + + &.collapsed { + position: relative; + max-height: 9em; + overflow: hidden; + + > .fade { + display: block; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 64px; + background: linear-gradient(0deg, var(--panel), var(--X15)); + + > span { + display: inline-block; + background: var(--panel); + padding: 6px 10px; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); + } + + &:hover { + > span { + background: var(--panelHighlight); + } + } + } + } }