From 01de9c0a3b502ed5683971fccaca86f51e438359 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Sun, 28 May 2023 00:17:23 -0400
Subject: [PATCH] Add bottom fade to show less & hide buttons

---
 packages/client/src/components/MkCwButton.vue |  3 ++-
 .../src/components/MkGalleryPostPreview.vue   |  1 +
 .../src/components/MkShowMoreButton.vue       |  6 +++++-
 .../src/components/MkSubNoteContent.vue       | 21 +++++++++++++++++++
 .../src/pages/admin/emoji-edit-dialog.vue     |  1 +
 .../client/src/pages/user/index.photos.vue    |  1 +
 packages/client/src/ui/_common_/upload.vue    |  1 +
 packages/client/src/widgets/photos.vue        |  2 ++
 8 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index 9239d44298..9a709ea76c 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -104,7 +104,8 @@ defineExpose({
 		width: 100%;
 		margin-top: 1em;
 		position: sticky;
-		bottom: var(--stickyBottom);
+		bottom: calc(var(--stickyBottom) - 1em);
+		padding: 20px;
 
 		> span {
 			display: inline-block;
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index f171417f7b..2ef339a8fe 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/packages/client/src/components/MkGalleryPostPreview.vue
@@ -59,6 +59,7 @@ const props = defineProps<{
 		transition: all 0.5s ease;
 
 		> .img {
+			position: relative;
 			width: 100%;
 			height: 100%;
 			object-fit: cover;
diff --git a/packages/client/src/components/MkShowMoreButton.vue b/packages/client/src/components/MkShowMoreButton.vue
index 3ec7086881..4ad6f0a491 100644
--- a/packages/client/src/components/MkShowMoreButton.vue
+++ b/packages/client/src/components/MkShowMoreButton.vue
@@ -41,6 +41,8 @@ defineExpose({
 	bottom: 0;
 	left: 0;
 	width: 100%;
+	padding: 20px;
+	margin-bottom: -10px;
 	z-index: 5;
 	> span {
 		display: inline-block;
@@ -60,7 +62,9 @@ defineExpose({
 	width: 100%;
 	margin-top: 1em;
 	position: sticky;
-	bottom: var(--stickyBottom);
+	bottom: calc(var(--stickyBottom) - 1em);
+	padding: 20px;
+	z-index: 5;
 
 	> span {
 		display: inline-block;
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index b2058ab4d0..432aa3e50b 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -151,6 +151,7 @@
 				<i class="ph-stop ph-bold"></i> {{ i18n.ts._mfm.stop }}
 			</template>
 		</MkButton>
+		<div v-if="(isLong && !collapsed) || (props.note.cw && showContent)" class="fade"></div>
 	</div>
 </template>
 
@@ -371,5 +372,25 @@ function focusFooter(ev) {
 		margin-left: 0;
 		margin-right: 0.4rem;
 	}
+	> .fade {
+		position: absolute;
+		inset: 0;
+		bottom: -400px;
+		display: flex;
+		align-items: flex-end;
+		z-index: 4;
+		pointer-events: none;
+		&::before {
+			content: "";
+			display: block;
+			height: 100px;
+			position: sticky;
+			bottom: 0;
+			width: 100%;
+			background: var(--panel);
+			mask: linear-gradient(to top, var(--gradient));
+			-webkit-mask: linear-gradient(to top, var(--gradient));
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 73c3bab340..053f3d3e72 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -114,6 +114,7 @@ async function del() {
 <style lang="scss" scoped>
 .yigymqpb {
 	> .img {
+		position: relative;
 		display: block;
 		height: 64px;
 		margin: 0 auto;
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 5b1753560a..77bab8f64f 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -98,6 +98,7 @@ onMounted(() => {
 		grid-gap: 6px;
 
 		> .img {
+			position: relative;
 			height: 128px;
 			border-radius: 6px;
 			overflow: clip;
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 272b81ba18..0fde3aa024 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -102,6 +102,7 @@ const zIndex = os.claimZIndex("high");
 	border-top: none;
 }
 .mk-uploader > ol > li > .img {
+	position: relative;
 	display: block;
 	background-size: cover;
 	background-position: center center;
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index ef160f8c6d..f8f794221d 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -114,6 +114,7 @@ defineExpose<WidgetComponentExpose>({
 	}
 
 	.img {
+		position: relative;
 		border: solid 4px transparent;
 		border-radius: 8px;
 	}
@@ -126,6 +127,7 @@ defineExpose<WidgetComponentExpose>({
 	padding: 8px;
 
 	.img {
+		position: relative;
 		flex: 1 1 33%;
 		width: 33%;
 		height: 80px;