From 360c820b9d42ca68a52fa22912b2f6df18412895 Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 30 Dec 2020 09:58:57 +0900 Subject: [PATCH] Resolve #3620 --- locales/ja-JP.yml | 1 + src/client/components/note.vue | 45 +++++++++++++++++++++++++++++++--- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 3899a0bda..99b148253 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -49,6 +49,7 @@ copyUsername: "ユーザー名をコピー" searchUser: "ユーザーを検索" reply: "返信" loadMore: "もっと見る" +showMore: "もっと見る" youGotNewFollower: "フォローされました" receiveFollowRequest: "フォローリクエストされました" followRequestAccepted: "フォローが承認されました" diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 1778acc0d..85b16cd8b 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -46,7 +46,7 @@

-
+
({{ $ts.private }}) @@ -59,6 +59,9 @@
+
{{ appearNote.channel.name }}
@@ -174,6 +177,7 @@ export default defineComponent({ conversation: [], replies: [], showContent: false, + collapsed: false, isDeleted: false, muted: false, faEdit, faBolt, faTimes, faBullhorn, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faBiohazard, faPlug, faSatelliteDish @@ -273,6 +277,12 @@ export default defineComponent({ this.connection = os.stream; } + this.collapsed = this.appearNote.text && ( + (this.appearNote.text.split('\n').length > 8) || + (this.appearNote.text.length > 300) + ); + this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords); + // plugin if (noteViewInterruptors.length > 0) { let result = this.note; @@ -282,8 +292,6 @@ export default defineComponent({ this.$emit('update:note', Object.freeze(result)); } - this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords); - if (this.detail) { os.api('notes/children', { noteId: this.appearNote.id, @@ -1038,6 +1046,37 @@ export default defineComponent({ } > .content { + &.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); + } + } + } + } + > .text { overflow-wrap: break-word;