From ac6d6fdeb813e9c99e0d843a24cce81a99fd91da Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 8 Jul 2023 19:01:47 +0900
Subject: enhance(frontend):
 引用対象を「もっと見る」で展開した場合、「閉じる」で畳めるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #11185
---
 .../frontend/src/components/MkSubNoteContent.vue   | 27 +++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src/components/MkSubNoteContent.vue')

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>
-- 
cgit v1.2.3-freya


From a8cd8ed99ecd8b276ac2a08c03fc053419ca55ea Mon Sep 17 00:00:00 2001
From: kabo2468 <28654659+kabo2468@users.noreply.github.com>
Date: Fri, 21 Jul 2023 18:58:57 +0900
Subject: enhance: 自動でたたまれる機能が返信先や引用RNにも適用されるように
 (#10989)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 返信、引用RNでMFMがあったら自動で隠すように

* Update CHANGELOG.md

* Update MkSubNoteContent.vue

* refactor: avoid `Boolean`

* docs: update CHANGELOG.md

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
---
 CHANGELOG.md                                          |  2 ++
 packages/frontend/src/components/MkNote.vue           | 13 ++-----------
 packages/frontend/src/components/MkSubNoteContent.vue |  7 ++-----
 packages/frontend/src/scripts/collapsed.ts            | 19 +++++++++++++++++++
 4 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 packages/frontend/src/scripts/collapsed.ts

(limited to 'packages/frontend/src/components/MkSubNoteContent.vue')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46dd2dd202..438436f01a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,8 @@
 - ロール設定画面でロールIDを確認できるように
 - コンテキストメニュー表示時のパフォーマンスを改善
 - フォロー/フォロワー非公開時の表示を改善
+- 本文にMFMが含まれている場合に自動でたたまれる機能が、返信先や引用RNにも適用されるように
+  - position は対象外になりました
 - AiScriptを0.15.0に更新
 - Fix: サーバーメトリクスが90度傾いている
 - Fix: 非ログイン時にクレデンシャルが必要なページに行くとエラーが出る問題を修正
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7a7406931b..deeae6e940 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -165,6 +165,7 @@ import { getNoteSummary } from '@/scripts/get-note-summary';
 import { MenuItem } from '@/types/menu';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { showMovedDialog } from '@/scripts/show-moved-dialog';
+import { shouldCollapsed } from '@/scripts/collapsed';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -204,17 +205,7 @@ let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note
 const isMyRenote = $i && ($i.id === note.userId);
 const showContent = ref(false);
 const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const isLong = (appearNote.cw == null && appearNote.text != null && (
-	(appearNote.text.includes('$[x2')) ||
-	(appearNote.text.includes('$[x3')) ||
-	(appearNote.text.includes('$[x4')) ||
-	(appearNote.text.includes('$[scale')) ||
-	(appearNote.text.includes('$[position')) ||
-	(appearNote.text.split('\n').length > 9) ||
-	(appearNote.text.length > 500) ||
-	(appearNote.files.length >= 5) ||
-	(urls && urls.length >= 4)
-));
+const isLong = shouldCollapsed(appearNote);
 const collapsed = ref(appearNote.cw == null && isLong);
 const isDeleted = ref(false);
 const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
index c76ce7315d..3a032a1167 100644
--- a/packages/frontend/src/components/MkSubNoteContent.vue
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -31,16 +31,13 @@ import MkMediaList from '@/components/MkMediaList.vue';
 import MkPoll from '@/components/MkPoll.vue';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
+import { shouldCollapsed } from '@/scripts/collapsed';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
 }>();
 
-const isLong =
-	props.note.cw == null && props.note.text != null && (
-		(props.note.text.split('\n').length > 9) ||
-		(props.note.text.length > 500)
-	);
+const isLong = shouldCollapsed(props.note);
 
 const collapsed = $ref(isLong);
 </script>
diff --git a/packages/frontend/src/scripts/collapsed.ts b/packages/frontend/src/scripts/collapsed.ts
new file mode 100644
index 0000000000..1bf56f233b
--- /dev/null
+++ b/packages/frontend/src/scripts/collapsed.ts
@@ -0,0 +1,19 @@
+import * as mfm from 'mfm-js';
+import * as misskey from 'misskey-js';
+import { extractUrlFromMfm } from './extract-url-from-mfm';
+
+export function shouldCollapsed(note: misskey.entities.Note): boolean {
+	const urls = note.text ? extractUrlFromMfm(mfm.parse(note.text)) : null;
+	const collapsed = note.cw == null && note.text != null && (
+		(note.text.includes('$[x2')) ||
+		(note.text.includes('$[x3')) ||
+		(note.text.includes('$[x4')) ||
+		(note.text.includes('$[scale')) ||
+		(note.text.split('\n').length > 9) ||
+		(note.text.length > 500) ||
+		(note.files.length >= 5) ||
+		(!!urls && urls.length >= 4)
+	);
+
+	return collapsed;
+}
-- 
cgit v1.2.3-freya

