From c34e7e6e08c66fb4ed539c4d4f967af3843dca7b Mon Sep 17 00:00:00 2001
From: Khsmty <me@khsmty.com>
Date: Wed, 1 Mar 2023 14:55:57 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20Renote=20=E3=81=97=E3=81=9F?=
 =?UTF-8?q?=E6=99=82=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=82=92=E3=83=AA=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=83=AB=E3=82=A8=E3=83=95=E3=82=A7=E3=82=AF=E3=83=88?=
 =?UTF-8?q?=E3=81=A8=20toast=20=E3=81=AB=20(#10116)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(client): Renote した時の表示を toast に

* fix: lint エラー

* enhance(client): Renote した時の表示をリップルエフェクトに

* toast も追加

* rippleeffect のタイミング変更

* toast の位置を header に被らないように
---
 packages/frontend/src/components/MkNote.vue   | 25 +++++++++++++++++--
 .../src/components/MkNoteDetailed.vue         | 25 +++++++++++++++++--
 packages/frontend/src/components/MkToast.vue  |  2 +-
 3 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 7842566b8..b87d46ee9 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -157,6 +157,7 @@ import { useTooltip } from '@/scripts/use-tooltip';
 import { claimAchievement } from '@/scripts/achievements';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { MenuItem } from '@/types/menu';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -256,9 +257,19 @@ function renote(viaKeyboard = false) {
 			text: i18n.ts.inChannelRenote,
 			icon: 'ti ti-repeat',
 			action: () => {
-				os.apiWithDialog('notes/create', {
+				const el = renoteButton.value as HTMLElement | null | undefined;
+				if (el) {
+					const rect = el.getBoundingClientRect();
+					const x = rect.left + (el.offsetWidth / 2);
+					const y = rect.top + (el.offsetHeight / 2);
+					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				}
+					
+				os.api('notes/create', {
 					renoteId: appearNote.id,
 					channelId: appearNote.channelId,
+				}).then(() => {
+					os.toast(i18n.ts.renoted);
 				});
 			},
 		}, {
@@ -277,8 +288,18 @@ function renote(viaKeyboard = false) {
 		text: i18n.ts.renote,
 		icon: 'ti ti-repeat',
 		action: () => {
-			os.apiWithDialog('notes/create', {
+			const el = renoteButton.value as HTMLElement | null | undefined;
+				if (el) {
+					const rect = el.getBoundingClientRect();
+					const x = rect.left + (el.offsetWidth / 2);
+					const y = rect.top + (el.offsetHeight / 2);
+					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				}
+				
+			os.api('notes/create', {
 				renoteId: appearNote.id,
+			}).then(() => {
+				os.toast(i18n.ts.renoted);
 			});
 		},
 	}, {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 2eebe999a..f5f4a2afc 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -161,6 +161,7 @@ import { deepClone } from '@/scripts/clone';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { claimAchievement } from '@/scripts/achievements';
 import { MenuItem } from '@/types/menu';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -250,9 +251,19 @@ function renote(viaKeyboard = false) {
 			text: i18n.ts.inChannelRenote,
 			icon: 'ti ti-repeat',
 			action: () => {
-				os.apiWithDialog('notes/create', {
+				const el = renoteButton.value as HTMLElement | null | undefined;
+				if (el) {
+					const rect = el.getBoundingClientRect();
+					const x = rect.left + (el.offsetWidth / 2);
+					const y = rect.top + (el.offsetHeight / 2);
+					os.popup(MkRippleEffect, { x, y }, {}, 'end');
+				}
+
+				os.api('notes/create', {
 					renoteId: appearNote.id,
 					channelId: appearNote.channelId,
+				}).then(() => {
+					os.toast(i18n.ts.renoted);
 				});
 			},
 		}, {
@@ -271,8 +282,18 @@ function renote(viaKeyboard = false) {
 		text: i18n.ts.renote,
 		icon: 'ti ti-repeat',
 		action: () => {
-			os.apiWithDialog('notes/create', {
+			const el = renoteButton.value as HTMLElement | null | undefined;
+			if (el) {
+				const rect = el.getBoundingClientRect();
+				const x = rect.left + (el.offsetWidth / 2);
+				const y = rect.top + (el.offsetHeight / 2);
+				os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			}
+				
+			os.api('notes/create', {
 				renoteId: appearNote.id,
+			}).then(() => {
+				os.toast(i18n.ts.renoted);
 			});
 		},
 	}, {
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
index 1aa48f88e..6d5970256 100644
--- a/packages/frontend/src/components/MkToast.vue
+++ b/packages/frontend/src/components/MkToast.vue
@@ -53,7 +53,7 @@ onMounted(() => {
 	position: fixed;
 	left: 0;
 	right: 0;
-	top: 0;
+	top: 50px;
 	margin: 0 auto;
 	margin-top: 16px;
 	min-width: 300px;