From f34c224a108cc1455496a2b379003bf2dbbee53d Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Fri, 28 Apr 2023 18:18:09 -0400
Subject: [PATCH] bring back Show More component

---
 packages/client/src/components/MkCwButton.vue |  4 +-
 .../src/components/MkShowMoreButton.vue       | 68 +++++++++++++++++++
 .../src/components/MkSubNoteContent.vue       | 50 ++------------
 .../client/src/components/MkUserPreview.vue   | 16 +----
 4 files changed, 75 insertions(+), 63 deletions(-)
 create mode 100644 packages/client/src/components/MkShowMoreButton.vue

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 5e59853b66..107e140e73 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -85,7 +85,6 @@ defineExpose({
 		bottom: 0;
 		left: 0;
 		width: 100%;
-		z-index: 2;
 		> span {
 			display: inline-block;
 			background: var(--panel);
@@ -94,8 +93,7 @@ defineExpose({
 			border-radius: 999px;
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
-		&:hover,
-		&:focus {
+		&:hover {
 			> span {
 				background: var(--panelHighlight);
 			}
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
new file mode 100644
index 0000000000..3516d6f43c
--- /dev/null
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -0,0 +1,68 @@
+<template>
+	<button
+		v-if="modelValue"
+		class="fade _button"
+		@click.stop="toggle"
+	>
+		<span>{{ i18n.ts.showMore }}</span>
+	</button>
+	<button
+		v-if="!modelValue"
+		class="showLess _button"
+		@click.stop="toggle"
+	>
+		<span>{{ i18n.ts.showLess }}</span>
+	</button>
+</template>
+<script lang="ts" setup>
+import { i18n } from "@/i18n";
+
+const props = defineProps<{
+	modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: "update:modelValue", v: boolean): void;
+}>();
+
+const toggle = () => {
+	emit("update:modelValue", !props.modelValue);
+};
+</script>
+<style lang="scss" scoped>
+.fade {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	> span {
+		display: inline-block;
+		background: var(--panel);
+		padding: 0.4em 1em;
+		font-size: 0.8em;
+		border-radius: 999px;
+		box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+	}
+	&:hover {
+		> span {
+			background: var(--panelHighlight);
+		}
+	}
+}
+.showLess {
+	width: 100%;
+	margin-top: 1em;
+	position: sticky;
+	bottom: var(--stickyBottom);
+
+	> span {
+		display: inline-block;
+		background: var(--panel);
+		padding: 6px 10px;
+		font-size: 0.8em;
+		border-radius: 999px;
+		box-shadow: 0 0 7px 7px var(--bg);
+	}
+}
+</style>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index fc587379cf..1d505682b2 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -115,15 +115,8 @@
 					v-on:focus="cwButton?.focus()"
 				></div>
 			</div>
-			<XShowMoreButton
-				v-if="isLong"
-				v-model="collapsed"
-			></XShowMoreButton>
-			<XCwButton
-				v-if="note.cw && showContent"
-				v-model="showContent"
-				:note="note"
-			/>
+			<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
+			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
 		</div>
 	</div>
 </template>
@@ -136,6 +129,7 @@ import XNoteSimple from "@/components/MkNoteSimple.vue";
 import XMediaList from "@/components/MkMediaList.vue";
 import XPoll from "@/components/MkPoll.vue";
 import MkUrlPreview from "@/components/MkUrlPreview.vue";
+import XShowMoreButton from "./MkShowMoreButton.vue";
 import XCwButton from "@/components/MkCwButton.vue";
 import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
 import { i18n } from "@/i18n";
@@ -160,6 +154,7 @@ const isLong =
 	props.note.text != null &&
 	(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
 const collapsed = $ref(props.note.cw == null && isLong);
+
 const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
@@ -287,43 +282,6 @@ function focusFooter(ev) {
 					top: 40px;
 				}
 			}
-
-			:deep(.fade) {
-				display: block;
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				> span {
-					display: inline-block;
-					background: var(--panel);
-					padding: 0.4em 1em;
-					font-size: 0.8em;
-					border-radius: 999px;
-					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-				}
-				&:hover {
-					> span {
-						background: var(--panelHighlight);
-					}
-				}
-			}
-		}
-
-		:deep(.showLess) {
-			width: 100%;
-			margin-top: 1em;
-			position: sticky;
-			bottom: var(--stickyBottom);
-
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 6px 10px;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 0 7px 7px var(--bg);
-			}
 		}
 	}
 }
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index a8a6bb90a3..806ec8880a 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -58,20 +58,7 @@
 						:custom-emojis="user.emojis"
 					/>
 				</div>
-				<button
-					v-if="isLong && collapsed"
-					class="fade _button"
-					@click.stop="collapsed = false"
-				>
-					<span>{{ i18n.ts.showMore }}</span>
-				</button>
-				<button
-					v-if="isLong && !collapsed"
-					class="showLess _button"
-					@click.stop="collapsed = true"
-				>
-					<span>{{ i18n.ts.showLess }}</span>
-				</button>
+				<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
 				<div v-if="user.fields.length > 0" class="fields">
 					<dl
 						v-for="(field, i) in user.fields"
@@ -131,6 +118,7 @@ import * as Acct from "calckey-js/built/acct";
 import type * as misskey from "calckey-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import { userPage } from "@/filters/user";
+import XShowMoreButton from "./MkShowMoreButton.vue";
 import * as os from "@/os";
 import { $i } from "@/account";
 import { i18n } from "@/i18n";