キー割り当て画面からホットキー設定ダイアログを抜き出してコンポーネント化する #2209
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> | ||
Hiroshiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <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(); | ||
| }; | ||
Hiroshiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| const overwriteHotkey = () => { | ||
Hiroshiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| if (props.duplicatedHotkey) { | ||
| emit("deleteHotkey", props.duplicatedHotkey.action); | ||
| confirmHotkey(); | ||
| } | ||
Hiroshiba marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| }; | ||
| </script> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ちょっと相談が！
今このコンポーネントは表示専用になっていて、内部で処理を一切行なってない形になっています。
例えば「ショートカットキー入力を受け付ける」などの処理は親コンポーネントで行ってる形です。
そういった処理もこのコンポーネントの中に移動することもできそうですが、どの処理を親コンポーネントで行い、どの処理をコンポーネントで行うのが良さそうでしょうか？
結構ここのコンポーネントの切り分けは難しく、今のプルリクエストのよう表示だけを担わせるのもありだと思います。
もうちょっと踏み込んでショートカットキーの入力機構も切り分けたコンポーネントの方にあってもいいかもです。
というのどう思われるかお聞きしたいです！
もし移動した方が良さそうな場合であっても、移動を伴うプルリクエストなので、追加で移動をするのではなく一旦このプルリクエストをマージできると嬉しいです･･･！
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
入力に関する処理も切り分けたコンポーネントに移し替えるのがいいのかなと考えています。
コンポーネントの責務として
とすると、責務がはっきりしやすいのではないかと考えます！
ただ、Vueやフロントエンドの知識に精通しているわけではないので、もしかすると正しいことを言っていない可能性があります... 🙇
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
なるほどです、認識が揃って良かったです！
「本当はこうしたいけど、今はそうなってない」というのがわかるようにコメントを追加するのはどうでしょう？
例えば
recordCombination関数の辺りに「// FIXME: HotkeyRecordingDialog内に移動する」と書いとくとか！で、もしよかったらぜひ入力部分を切り分ける部分も（あとあと）挑戦してみていただけると･･･！！
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
recordCombination以外にも、changeHotkeySettingsも新しく作成したコンポーネントに移動できそうだと考えているため、そちらについてもコメントを追加しておきました。