Merge pull request 'bring back show more component' (#9993) from Freeplay/calckey:notifications into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9993

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,
+		&:hover {
-		&:focus {
 			> span {
 				background: var(--panelHighlight);
 			}

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>

packages/client/src/components/MkSubNoteContent.vue

@@ -115,15 +115,8 @@
 					v-on:focus="cwButton?.focus()"
 				></div>
 			</div>
-			<XShowMoreButton
+			<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
-				v-if="isLong"
+			<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
-				v-model="collapsed"
-			></XShowMoreButton>
-			<XCwButton
-				v-if="note.cw && showContent"
-				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);
-			}
 		}
 	}
 }

packages/client/src/components/MkUserPreview.vue

@@ -58,20 +58,7 @@
 						:custom-emojis="user.emojis"
 					/>
 				</div>
-				<button
+				<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
-					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>
 				<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";