Поправки поведения диалога на "Enter"

This commit is contained in:
Book Pauk
2020-11-01 14:41:40 +07:00
parent 4b632da5af
commit 25c12309f2

View File

@@ -40,7 +40,9 @@
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
</q-select> </q-select>
<q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги" @focus="onInputFocus"> <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
@focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(libs.startLink)" size="12px"> <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(libs.startLink)" size="12px">
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
@@ -71,8 +73,8 @@
</template> </template>
<div class="q-mx-md row"> <div class="q-mx-md row">
<q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" @keydown="bookmarkLinkKeyDown"
placeholder="Ссылка для закладки" maxlength="2000" @focus="onInputFocus"> placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus">
</q-input> </q-input>
<q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px" <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
@@ -84,8 +86,8 @@
</div> </div>
<div class="q-mx-md q-mt-md"> <div class="q-mx-md q-mt-md">
<q-input class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkDesc" <q-input class="col q-mr-sm" ref="bookmarkDesc" outlined dense bg-color="white" v-model="bookmarkDesc" @keydown="bookmarkDescKeyDown"
placeholder="Описание" style="width: 400px" maxlength="100" @focus="onInputFocus"> placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus">
</q-input> </q-input>
</div> </div>
@@ -432,7 +434,7 @@ class ExternalLibs extends Vue {
return url; return url;
} }
onInputFocus(event) { selectAllOnFocus(event) {
if (event.target.select) if (event.target.select)
event.target.select(); event.target.select();
} }
@@ -483,7 +485,24 @@ class ExternalLibs extends Vue {
this.updateBookmarkLink(); this.updateBookmarkLink();
} }
bookmarkLinkKeyDown(event) {
if (event.key == 'Enter') {
this.$refs.bookmarkDesc.focus();
event.preventDefault();
}
}
bookmarkDescKeyDown(event) {
if (event.key == 'Enter') {
this.okAddBookmark();
event.preventDefault();
}
}
async okAddBookmark() { async okAddBookmark() {
if (!this.bookmarkLink)
return;
const link = this.addProtocol(this.bookmarkLink); const link = this.addProtocol(this.bookmarkLink);
let index = -1; let index = -1;
try { try {
@@ -558,16 +577,21 @@ class ExternalLibs extends Vue {
this.sendMessage({type: 'close'}); this.sendMessage({type: 'close'});
} }
bookUrlKeyDown(event) {
if (event.key == 'Enter') {
this.submitUrl();
event.preventDefault();
}
}
keyHook() { keyHook() {
if (this.$root.rootRoute() == '/external-libs') { if (this.$root.rootRoute() == '/external-libs') {
if (this.$refs.dialogAddBookmark.active) if (this.$refs.dialogAddBookmark.active)
return false; return false;
//недостатки сторонних ui if (event.type == 'keydown' && event.key == 'F4') {
const input = this.$refs.input.$refs.input; this.addBookmark()
if (document.activeElement === input && event.type == 'keydown' && event.key == 'Enter') { return;
this.submitUrl();
return true;
} }
if (event.type == 'keydown' && event.key == 'Escape' && if (event.type == 'keydown' && event.key == 'Escape' &&