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);
}
}
}