enhance(frontend): アニメーション設定で画面上のエフェクトも考慮するように (#15576)

* enhance(frontend): アニメーション設定で画面上のエフェクトも考慮するように

* Update Changelog

CHANGELOG.md

@@ -7,6 +7,7 @@
 ### Client
 - Enhance: モデレーターがセンシティブ設定を変更する際に確認ダイアログを出すように
 - Enhance: ユーザーページのノート一覧と前後のノート表示でチャンネルのノートを含めるように
+- Enhance: 「UIのアニメーションを減らす」で画面上のエフェクトも減らせるように
 - Fix: 削除して編集の削除タイミングを投稿後になるように `#14498`
 - Fix: フォローされたときのメッセージがちらつくことがある問題を修正
 - Fix: 投稿ダイアログがサイズ限界を超えた際にスクロールできない問題を修正

packages/frontend/src/components/MkEmojiPicker.vue

@@ -413,7 +413,7 @@ function computeButtonTitle(ev: MouseEvent): void {
 
 function chosen(emoji: string | Misskey.entities.EmojiSimple | UnicodeEmojiDef, ev?: MouseEvent) {
 	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
-	if (el) {
+	if (el && defaultStore.state.animation) {
 		const rect = el.getBoundingClientRect();
 		const x = rect.left + (el.offsetWidth / 2);
 		const y = rect.top + (el.offsetHeight / 2);

packages/frontend/src/components/MkNote.vue

@@ -479,7 +479,7 @@ function react(): void {
 			reaction: '❤️',
 		});
 		const el = reactButton.value;
-		if (el) {
+		if (el && defaultStore.state.animation) {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);

packages/frontend/src/components/MkNoteDetailed.vue

@@ -442,7 +442,7 @@ function react(): void {
 			reaction: '❤️',
 		});
 		const el = reactButton.value;
-		if (el) {
+		if (el && defaultStore.state.animation) {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);

packages/frontend/src/components/MkPostForm.vue

@@ -752,7 +752,7 @@ async function post(ev?: MouseEvent) {
 	if (ev) {
 		const el = (ev.currentTarget ?? ev.target) as HTMLElement | null;
 
-		if (el) {
+		if (el && defaultStore.state.animation) {
 			const rect = el.getBoundingClientRect();
 			const x = rect.left + (el.offsetWidth / 2);
 			const y = rect.top + (el.offsetHeight / 2);

packages/frontend/src/directives/ripple.ts

@@ -4,12 +4,14 @@
  */
 
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { defaultStore } from '@/store.js';
 import { popup } from '@/os.js';
 
 export default {
 	mounted(el, binding, vn) {
 		// 明示的に false であればバインドしない
 		if (binding.value === false) return;
+		if (!defaultStore.state.animation) return;
 
 		el.addEventListener('click', () => {
 			const rect = el.getBoundingClientRect();

packages/frontend/src/scripts/get-note-menu.ts

@@ -550,7 +550,7 @@ export function getRenoteMenu(props: {
 			icon: 'ti ti-repeat',
 			action: () => {
 				const el = props.renoteButton.value;
-				if (el) {
+				if (el && defaultStore.state.animation) {
 					const rect = el.getBoundingClientRect();
 					const x = rect.left + (el.offsetWidth / 2);
 					const y = rect.top + (el.offsetHeight / 2);
@@ -588,7 +588,7 @@ export function getRenoteMenu(props: {
 			icon: 'ti ti-repeat',
 			action: () => {
 				const el = props.renoteButton.value;
-				if (el) {
+				if (el && defaultStore.state.animation) {
 					const rect = el.getBoundingClientRect();
 					const x = rect.left + (el.offsetWidth / 2);
 					const y = rect.top + (el.offsetHeight / 2);
@@ -639,7 +639,7 @@ export function getRenoteMenu(props: {
 					text: channel.name,
 					action: () => {
 						const el = props.renoteButton.value;
-						if (el) {
+						if (el && defaultStore.state.animation) {
 							const rect = el.getBoundingClientRect();
 							const x = rect.left + (el.offsetWidth / 2);
 							const y = rect.top + (el.offsetHeight / 2);