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

View File

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

View File

@ -6,7 +6,7 @@
:class="[$style.root, { [$style.reacted]: note.myReaction == reaction, [$style.canToggle]: canToggle, [$style.large]: defaultStore.state.largeNoteReactions }]"
@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>
</button>
</template>
@ -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<HTMLElement>();
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();