forked from VOICEVOX/voicevox
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
リファクタリング: キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する
- Loading branch information
Showing
2 changed files
with
140 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,129 @@ | ||
| <template> | ||
| <QDialog | ||
| noEscDismiss | ||
| noShake | ||
| transitionShow="none" | ||
| transitionHide="none" | ||
| :modelValue="isHotkeyDialogOpened" | ||
| @update:modelValue="closeHotkeyDialog" | ||
| > | ||
| <QCard class="q-py-sm q-px-md"> | ||
| <QCardSection align="center"> | ||
| <div class="text-h6">ショートカットキーを入力してください</div> | ||
| </QCardSection> | ||
| <QCardSection align="center"> | ||
| <template v-for="(hotkey, index) in lastRecord.split(' ')" :key="index"> | ||
| <span v-if="index !== 0"> + </span> | ||
| <!-- | ||
| Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する | ||
| Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している | ||
| --> | ||
| <QChip :ripple="false" color="surface"> | ||
| {{ hotkey === "Meta" ? "Cmd" : hotkey }} | ||
| </QChip> | ||
| </template> | ||
| <span v-if="lastRecord !== '' && confirmBtnEnabled"> +</span> | ||
| <div v-if="duplicatedHotkey != undefined" class="text-warning q-mt-lg"> | ||
| <div class="text-warning"> | ||
| ショートカットキーが次の操作と重複しています | ||
| </div> | ||
| <div class="q-mt-sm text-weight-bold text-warning"> | ||
| 「{{ duplicatedHotkey.action }}」 | ||
| </div> | ||
| </div> | ||
| </QCardSection> | ||
| <QCardActions align="center"> | ||
| <QBtn | ||
| padding="xs md" | ||
| label="キャンセル" | ||
| unelevated | ||
| color="surface" | ||
| textColor="display" | ||
| class="q-mt-sm" | ||
| @click="closeHotkeyDialog" | ||
| /> | ||
| <QBtn | ||
| padding="xs md" | ||
| label="ショートカットキーを未設定にする" | ||
| unelevated | ||
| color="surface" | ||
| textColor="display" | ||
| class="q-mt-sm" | ||
| @click=" | ||
| emit('deleteHotkey', props.lastAction); | ||
| closeHotkeyDialog(); | ||
| " | ||
| /> | ||
| <QBtn | ||
| v-if="duplicatedHotkey == undefined" | ||
| padding="xs md" | ||
| label="OK" | ||
| unelevated | ||
| color="primary" | ||
| textColor="display-on-primary" | ||
| class="q-mt-sm" | ||
| :disabled="confirmBtnEnabled" | ||
| @click="confirmHotkey" | ||
| /> | ||
| <QBtn | ||
| v-else | ||
| padding="xs md" | ||
| label="上書きする" | ||
| unelevated | ||
| color="primary" | ||
| textColor="display-on-primary" | ||
| class="q-mt-sm" | ||
| :disabled="confirmBtnEnabled" | ||
| @click="overwriteHotkey" | ||
| /> | ||
| </QCardActions> | ||
| </QCard> | ||
| </QDialog> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { computed, defineProps, defineEmits } from "vue"; | ||
| import { HotkeyCombination } from "@/type/preload"; | ||
| const props = defineProps<{ | ||
| isHotkeyDialogOpened: boolean; | ||
| lastAction: string; | ||
| lastRecord: HotkeyCombination; | ||
| duplicatedHotkey?: { action: string }; | ||
| }>(); | ||
| const emit = defineEmits<{ | ||
| (e: "update:modelValue", value: boolean): void; | ||
| (e: "deleteHotkey", action: string): void; | ||
| ( | ||
| e: "changeHotkeySettings", | ||
| action: string, | ||
| combination: HotkeyCombination, | ||
| ): void; | ||
| }>(); | ||
| const confirmBtnEnabled = computed(() => { | ||
| return ( | ||
| props.lastRecord == "" || | ||
| ["Ctrl", "Shift", "Alt", "Meta"].includes( | ||
| props.lastRecord.split(" ")[props.lastRecord.split(" ").length - 1], | ||
| ) | ||
| ); | ||
| }); | ||
| const closeHotkeyDialog = () => { | ||
| emit("update:modelValue", false); | ||
| }; | ||
| const confirmHotkey = () => { | ||
| emit("changeHotkeySettings", props.lastAction, props.lastRecord); | ||
| closeHotkeyDialog(); | ||
| }; | ||
| const overwriteHotkey = () => { | ||
| if (props.duplicatedHotkey) { | ||
| emit("deleteHotkey", props.duplicatedHotkey.action); | ||
| confirmHotkey(); | ||
| } | ||
| }; | ||
| </script> |