diff --git a/src/components/settings/AddKeyBind.vue b/src/components/settings/AddKeyBind.vue index 5050332..2f969e3 100644 --- a/src/components/settings/AddKeyBind.vue +++ b/src/components/settings/AddKeyBind.vue @@ -3,11 +3,13 @@ import AutoComplete from 'primevue/autocomplete' import { HEYNOTE_COMMANDS } from '@/src/editor/commands' + import RecordKeyInput from './RecordKeyInput.vue' export default { name: "AddKeyBind", components: { AutoComplete, + RecordKeyInput, }, data() { return { @@ -34,6 +36,7 @@ mounted() { window.addEventListener("keydown", this.onKeyDown) + this.$refs.keys.$el.focus() }, beforeUnmount() { window.removeEventListener("keydown", this.onKeyDown) @@ -41,7 +44,7 @@ methods: { onKeyDown(event) { - if (event.key === "Escape") { + if (event.key === "Escape" && document.activeElement !== this.$refs.keys.$el) { this.$emit("close") } }, @@ -63,11 +66,18 @@ }, onSave() { + if (this.key === "" || this.command === "") { + return + } this.$emit("save", { key: this.key, command: this.command.name, }) - } + }, + + focusCommandSelector() { + this.$refs.autocomplete.$el.querySelector("input").focus() + }, }, } @@ -80,11 +90,12 @@
- +
@@ -93,9 +104,11 @@ forceSelection v-model="command" :suggestions="commandSuggestions" + :autoOptionFocus="true" optionLabel="key" :delay="0" @complete="onCommandSearch" + ref="autocomplete" emptySearchMessage="No commands found" class="command-autocomplete" > @@ -163,6 +176,8 @@ .field //width: 50% margin-bottom: 20px + &:last-child + margin-bottom: 0 label display: block margin-bottom: 8px diff --git a/src/components/settings/RecordKeyInput.vue b/src/components/settings/RecordKeyInput.vue new file mode 100644 index 0000000..632beab --- /dev/null +++ b/src/components/settings/RecordKeyInput.vue @@ -0,0 +1,88 @@ + + + diff --git a/src/components/settings/Settings.vue b/src/components/settings/Settings.vue index b5ffe6d..d9ef2ad 100644 --- a/src/components/settings/Settings.vue +++ b/src/components/settings/Settings.vue @@ -26,7 +26,7 @@ }, data() { - console.log("settings:", this.initialSettings) + //console.log("settings:", this.initialSettings) return { keymaps: [ { name: "Default", value: "default" }, diff --git a/src/css/autocomplete.sass b/src/css/autocomplete.sass index 0979886..ba1f94d 100644 --- a/src/css/autocomplete.sass +++ b/src/css/autocomplete.sass @@ -15,13 +15,14 @@ --p-autocomplete-dropdown-border-radius: var(--p-inputtext-border-radius) --p-autocomplete-dropdown-hover-border-color: var(--p-inputtext-hover-border-color) --p-autocomplete-dropdown-active-border-color: var(--p-inputtext-active-border-color) - --p-autocomplete-option-focus-background: #f1f1f1 + --p-autocomplete-dropdown-hover-background: #f1f1f1 + --p-autocomplete-option-focus-background: var(--highlight-color) + --p-autocomplete-option-focus-color: #fff +dark-mode --p-inputtext-background: #202020 --p-inputtext-border-color: #444 - --p-autocomplete-option-focus-background: #555 - --p-autocomplete-option-focus-color: #fff + --p-autocomplete-dropdown-hover-background: #2a2a2a .p-inputtext.p-inputtext font-size: 12px