enhance(frontend): リアクションの取り消し/変更時に確認ダイアログを出すように

This commit is contained in:
syuilo 2023-05-19 09:15:24 +09:00
parent a3423bad60
commit 527a13b77d
3 changed files with 15 additions and 5 deletions

View File

@ -21,6 +21,7 @@
- 今後はAPI呼び出し時およびストリーミング接続時に設定するようになります - 今後はAPI呼び出し時およびストリーミング接続時に設定するようになります
### Client ### Client
- リアクションの取り消し/変更時に確認ダイアログを出すように
- 開発者モードを追加 - 開発者モードを追加
- AiScriptを0.13.3に更新 - AiScriptを0.13.3に更新
- Fix: URLプレビューで情報が取得できなかった際の挙動を修正 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正

View File

@ -1053,6 +1053,8 @@ update: "更新"
rolesThatCanBeUsedThisEmojiAsReaction: "リアクションとして使えるロール" rolesThatCanBeUsedThisEmojiAsReaction: "リアクションとして使えるロール"
rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一つもない場合、誰でもリアクションとして使えます。" rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一つもない場合、誰でもリアクションとして使えます。"
rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。" rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
cancelReactionConfirm: "リアクションを取り消しますか?"
changeReactionConfirm: "リアクションを変更しますか?"
_initialAccountSetting: _initialAccountSetting:
accountCreated: "アカウントの作成が完了しました!" accountCreated: "アカウントの作成が完了しました!"

View File

@ -6,7 +6,7 @@
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]" :class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]"
@click="toggleReaction()" @click="toggleReaction()"
> >
<MkReactionIcon :class="$style.icon" :reaction="reaction" :emoji-url="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/> <MkReactionIcon :class="$style.icon" :reaction="reaction" :emojiUrl="note.reactionEmojis[reaction.substr(1, reaction.length - 2)]"/>
<span :class="$style.count">{{ count }}</span> <span :class="$style.count">{{ count }}</span>
</button> </button>
</template> </template>
@ -22,6 +22,7 @@ import { $i } from '@/account';
import MkReactionEffect from '@/components/MkReactionEffect.vue'; import MkReactionEffect from '@/components/MkReactionEffect.vue';
import { claimAchievement } from '@/scripts/achievements'; import { claimAchievement } from '@/scripts/achievements';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
const props = defineProps<{ const props = defineProps<{
reaction: string; reaction: string;
@ -34,11 +35,17 @@ const buttonEl = shallowRef<HTMLElement>();
const canToggle = computed(() => !props.reaction.match(/@\w/) && $i); const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
const toggleReaction = () => { async function toggleReaction() {
if (!canToggle.value) return; if (!canToggle.value) return;
const oldReaction = props.note.myReaction; const oldReaction = props.note.myReaction;
if (oldReaction) { 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', { os.api('notes/reactions/delete', {
noteId: props.note.id, noteId: props.note.id,
}).then(() => { }).then(() => {
@ -58,9 +65,9 @@ const toggleReaction = () => {
claimAchievement('reactWithoutRead'); claimAchievement('reactWithoutRead');
} }
} }
}; }
const anime = () => { function anime() {
if (document.hidden) return; if (document.hidden) return;
if (!defaultStore.state.animation) return; if (!defaultStore.state.animation) return;
@ -68,7 +75,7 @@ const anime = () => {
const x = rect.left + 16; const x = rect.left + 16;
const y = rect.top + (buttonEl.value.offsetHeight / 2); const y = rect.top + (buttonEl.value.offsetHeight / 2);
os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end'); os.popup(MkReactionEffect, { reaction: props.reaction, x, y }, {}, 'end');
}; }
watch(() => props.count, (newCount, oldCount) => { watch(() => props.count, (newCount, oldCount) => {
if (oldCount < newCount) anime(); if (oldCount < newCount) anime();