From d589e827f34222496a6c3c08832e6116ae943e1f Mon Sep 17 00:00:00 2001 From: Balazs Nadasdi Date: Thu, 28 Apr 2022 15:47:02 +0000 Subject: [PATCH 1/5] feat: option to collapse long notes Closes #8559 --- locales/ja-JP.yml | 1 + packages/client/src/components/note.vue | 25 ++++++++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 6326094dd80d..9c2d56a8c549 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -52,6 +52,7 @@ searchUser: "ユーザーを検索" reply: "返信" loadMore: "もっと見る" showMore: "もっと見る" +showLess: "TODO" youGotNewFollower: "フォローされました" receiveFollowRequest: "フォローリクエストされました" followRequestAccepted: "フォローが承認されました" diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index 3cd7a819d4a7..c1114a8aca05 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -46,7 +46,7 @@

-
+
({{ i18n.ts.private }}) @@ -66,9 +66,12 @@
- +
{{ appearNote.channel.name }}
@@ -166,7 +169,8 @@ const reactButton = ref(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); const isMyRenote = $i && ($i.id === note.userId); const showContent = ref(false); -const collapsed = ref(appearNote.cw == null && appearNote.text != null && ( +const collapsed = ref(true); +const isLong = ref(appearNote.cw == null && appearNote.text != null && ( (appearNote.text.split('\n').length > 9) || (appearNote.text.length > 500) )); @@ -452,6 +456,21 @@ function readPromo() { } > .content { + &.isLong { + > .showLess { + width: 100%; + margin-top: 1em; + + > 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%); + } + } + } &.collapsed { position: relative; max-height: 9em; From ad4846756e3137676ec5d92d9f1e5a935dc7f563 Mon Sep 17 00:00:00 2001 From: Balazs Nadasdi Date: Thu, 28 Apr 2022 16:00:01 +0000 Subject: [PATCH 2/5] do not collapse if cw exists --- packages/client/src/components/note.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index c1114a8aca05..017d28a2e6d3 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -169,7 +169,7 @@ const reactButton = ref(); let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note); const isMyRenote = $i && ($i.id === note.userId); const showContent = ref(false); -const collapsed = ref(true); +const collapsed = ref(appearNote.cw == null); const isLong = ref(appearNote.cw == null && appearNote.text != null && ( (appearNote.text.split('\n').length > 9) || (appearNote.text.length > 500) From 9ebffb3d634d5515c4a44b1ca20a9e812cae5d0a Mon Sep 17 00:00:00 2001 From: Balazs Nadasdi Date: Thu, 28 Apr 2022 16:03:16 +0000 Subject: [PATCH 3/5] =?UTF-8?q?use=20'=E9=96=89=E3=81=98=E3=82=8B'=20to=20?= =?UTF-8?q?close=20/=20show=20less.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/ja-JP.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 9c2d56a8c549..f1298bf5c1fa 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -52,7 +52,7 @@ searchUser: "ユーザーを検索" reply: "返信" loadMore: "もっと見る" showMore: "もっと見る" -showLess: "TODO" +showLess: "閉じる" youGotNewFollower: "フォローされました" receiveFollowRequest: "フォローリクエストされました" followRequestAccepted: "フォローが承認されました" From 8df44bbc0905f07c3ae805fcdd32eccf8de0fecd Mon Sep 17 00:00:00 2001 From: Balazs Nadasdi Date: Fri, 29 Apr 2022 09:44:28 +0000 Subject: [PATCH 4/5] make it sticky --- packages/client/src/components/note.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index 017d28a2e6d3..cd505e1bb0cb 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -460,6 +460,8 @@ function readPromo() { > .showLess { width: 100%; margin-top: 1em; + position: sticky; + bottom: 1em; > span { display: inline-block; @@ -467,7 +469,8 @@ function readPromo() { padding: 6px 10px; font-size: 0.8em; border-radius: 999px; - box-shadow: 0 2px 6px rgb(0 0 0 / 20%); + box-shadow: 0 2px 6px rgb(0 0 0 / 40%); + border: 1px solid var(--renote); } } } From 8d1815097a2df6beac4e3cf61ed44d2903010809 Mon Sep 17 00:00:00 2001 From: Balazs Nadasdi Date: Fri, 29 Apr 2022 11:02:39 +0000 Subject: [PATCH 5/5] Change style of the Show less button --- packages/client/src/components/note.vue | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue index cd505e1bb0cb..a29cddba2311 100644 --- a/packages/client/src/components/note.vue +++ b/packages/client/src/components/note.vue @@ -469,8 +469,7 @@ function readPromo() { padding: 6px 10px; font-size: 0.8em; border-radius: 999px; - box-shadow: 0 2px 6px rgb(0 0 0 / 40%); - border: 1px solid var(--renote); + box-shadow: 0 0 7px 7px var(--bg); } } }