From 527a13b77db229894e12c99ccb29a8ae06cfe898 Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 19 May 2023 09:15:24 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=AA=E3=82=A2?= =?UTF-8?q?=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E5=8F=96=E3=82=8A?= =?UTF-8?q?=E6=B6=88=E3=81=97/=E5=A4=89=E6=9B=B4=E6=99=82=E3=81=AB?= =?UTF-8?q?=E7=A2=BA=E8=AA=8D=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?= =?UTF-8?q?=E3=82=92=E5=87=BA=E3=81=99=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 1 + locales/ja-JP.yml | 2 ++ .../components/MkReactionsViewer.reaction.vue | 17 ++++++++++++----- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 62f37763f..d9ce5fbe6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ - 今後はAPI呼び出し時およびストリーミング接続時に設定するようになります ### Client +- リアクションの取り消し/変更時に確認ダイアログを出すように - 開発者モードを追加 - AiScriptを0.13.3に更新 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 94c00bad3..4067155a3 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1053,6 +1053,8 @@ update: "更新" rolesThatCanBeUsedThisEmojiAsReaction: "リアクションとして使えるロール" rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一つもない場合、誰でもリアクションとして使えます。" rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。" +cancelReactionConfirm: "リアクションを取り消しますか?" +changeReactionConfirm: "リアクションを変更しますか?" _initialAccountSetting: accountCreated: "アカウントの作成が完了しました!" diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue index 9480af510..b521171b2 100644 --- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue +++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue @@ -6,7 +6,7 @@ :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]" @click="toggleReaction()" > - + {{ count }} @@ -22,6 +22,7 @@ import { $i } from '@/account'; import MkReactionEffect from '@/components/MkReactionEffect.vue'; import { claimAchievement } from '@/scripts/achievements'; import { defaultStore } from '@/store'; +import { i18n } from '@/i18n'; const props = defineProps<{ reaction: string; @@ -34,11 +35,17 @@ const buttonEl = shallowRef(); const canToggle = computed(() => !props.reaction.match(/@\w/) && $i); -const toggleReaction = () => { +async function toggleReaction() { if (!canToggle.value) return; const oldReaction = props.note.myReaction; if (oldReaction) { + const confirm = await os.confirm({ + type: 'warning', + text: oldReaction !== props.reaction ? i18n.ts.changeReactionConfirm : i18n.ts.cancelReactionConfirm, + }); + if (confirm.canceled) return; + os.api('notes/reactions/delete', { noteId: props.note.id, }).then(() => { @@ -58,9 +65,9 @@ const toggleReaction = () => { claimAchievement('reactWithoutRead'); } } -}; +} -const anime = () => { +function anime() { if (document.hidden) return; if (!defaultStore.state.animation) return; @@ -68,7 +75,7 @@ const anime = () => { const x = rect.left + 16; const y = rect.top + (buttonEl.value.offsetHeight / 2); os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end'); -}; +} watch(() => props.count, (newCount, oldCount) => { if (oldCount < newCount) anime();