From 01a3eabc4e1deb00b29398777d453d5b3583583b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Mon, 3 Mar 2025 17:46:38 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=A2=E3=83=8B?= =?UTF-8?q?=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E8=A8=AD=E5=AE=9A?= =?UTF-8?q?=E3=81=A7=E7=94=BB=E9=9D=A2=E4=B8=8A=E3=81=AE=E3=82=A8=E3=83=95?= =?UTF-8?q?=E3=82=A7=E3=82=AF=E3=83=88=E3=82=82=E8=80=83=E6=85=AE=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#15576)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * enhance(frontend): アニメーション設定で画面上のエフェクトも考慮するように * Update Changelog --- CHANGELOG.md | 1 + packages/frontend/src/components/MkEmojiPicker.vue | 2 +- packages/frontend/src/components/MkNote.vue | 2 +- packages/frontend/src/components/MkNoteDetailed.vue | 2 +- packages/frontend/src/components/MkPostForm.vue | 2 +- packages/frontend/src/directives/ripple.ts | 2 ++ packages/frontend/src/scripts/get-note-menu.ts | 6 +++--- 7 files changed, 10 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index caf2ff49e..9b733e46f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ ### Client - Enhance: モデレーターがセンシティブ設定を変更する際に確認ダイアログを出すように - Enhance: ユーザーページのノート一覧と前後のノート表示でチャンネルのノートを含めるように +- Enhance: 「UIのアニメーションを減らす」で画面上のエフェクトも減らせるように - Fix: 削除して編集の削除タイミングを投稿後になるように `#14498` - Fix: フォローされたときのメッセージがちらつくことがある問題を修正 - Fix: 投稿ダイアログがサイズ限界を超えた際にスクロールできない問題を修正 diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index 5da161dae..62a100067 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/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); diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 193dfe5b7..8e1d85466 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/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); diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index d5bd4ad13..27d8a399c 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/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); diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue index 4e29f0c0d..255aa6ca1 100644 --- a/packages/frontend/src/components/MkPostForm.vue +++ b/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); diff --git a/packages/frontend/src/directives/ripple.ts b/packages/frontend/src/directives/ripple.ts index a043ff212..99845c57c 100644 --- a/packages/frontend/src/directives/ripple.ts +++ b/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(); diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts index 4b7dc426f..de7ed1567 100644 --- a/packages/frontend/src/scripts/get-note-menu.ts +++ b/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);