feat: auto focus on first input in modals

This commit is contained in:
Fabio Di Stasio 2020-12-11 18:09:17 +01:00
parent 797ab70e7c
commit 1476e899d1
11 changed files with 69 additions and 3 deletions

View File

@ -19,6 +19,7 @@
</div> </div>
<div class="col-9"> <div class="col-9">
<input <input
ref="firstInput"
v-model="credentials.user" v-model="credentials.user"
class="form-input" class="form-input"
type="text" type="text"
@ -63,6 +64,11 @@ export default {
} }
}; };
}, },
created () {
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
},
methods: { methods: {
closeModal () { closeModal () {
this.$emit('close-asking'); this.$emit('close-asking');

View File

@ -20,6 +20,7 @@
</div> </div>
<div class="col-8 col-sm-12"> <div class="col-8 col-sm-12">
<input <input
ref="firstInput"
v-model="localConnection.name" v-model="localConnection.name"
class="form-input" class="form-input"
type="text" type="text"
@ -172,6 +173,10 @@ export default {
created () { created () {
this.localConnection = Object.assign({}, this.connection); this.localConnection = Object.assign({}, this.connection);
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);

View File

@ -33,7 +33,11 @@
<label class="form-label">{{ $t('word.collation') }}:</label> <label class="form-label">{{ $t('word.collation') }}:</label>
</div> </div>
<div class="col-9"> <div class="col-9">
<select v-model="database.collation" class="form-select"> <select
ref="firstInput"
v-model="database.collation"
class="form-select"
>
<option <option
v-for="collation in collations" v-for="collation in collations"
:key="collation.id" :key="collation.id"
@ -114,6 +118,10 @@ export default {
}; };
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);

View File

@ -20,6 +20,7 @@
</div> </div>
<div class="col-8 col-sm-12"> <div class="col-8 col-sm-12">
<input <input
ref="firstInput"
v-model="connection.name" v-model="connection.name"
class="form-input" class="form-input"
type="text" type="text"
@ -182,6 +183,10 @@ export default {
}, },
created () { created () {
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);

View File

@ -19,6 +19,7 @@
</div> </div>
<div class="col-9"> <div class="col-9">
<input <input
ref="firstInput"
v-model="database.name" v-model="database.name"
class="form-input" class="form-input"
type="text" type="text"
@ -89,6 +90,9 @@ export default {
created () { created () {
this.database = { ...this.database, collation: this.defaultCollation }; this.database = { ...this.database, collation: this.defaultCollation };
window.addEventListener('keydown', this.onKey); window.addEventListener('keydown', this.onKey);
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);

View File

@ -18,6 +18,7 @@
</label> </label>
<div class="column"> <div class="column">
<input <input
ref="firstInput"
v-model="localOptions.name" v-model="localOptions.name"
class="form-input" class="form-input"
type="text" type="text"
@ -112,6 +113,10 @@ export default {
mounted () { mounted () {
this.localOptions.collation = this.defaultCollation; this.localOptions.collation = this.defaultCollation;
this.localOptions.engine = this.defaultEngine; this.localOptions.engine = this.defaultEngine;
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
methods: { methods: {
confirmOptionsChange () { confirmOptionsChange () {

View File

@ -25,6 +25,7 @@
<div class="input-group col-8 col-sm-12"> <div class="input-group col-8 col-sm-12">
<ForeignKeySelect <ForeignKeySelect
v-if="foreignKeys.includes(field.name)" v-if="foreignKeys.includes(field.name)"
ref="formInput"
class="form-select" class="form-select"
:value.sync="localRow[field.name]" :value.sync="localRow[field.name]"
:key-usage="getKeyUsage(field.name)" :key-usage="getKeyUsage(field.name)"
@ -32,6 +33,7 @@
/> />
<input <input
v-else-if="inputProps(field).mask" v-else-if="inputProps(field).mask"
ref="formInput"
v-model="localRow[field.name]" v-model="localRow[field.name]"
v-mask="inputProps(field).mask" v-mask="inputProps(field).mask"
class="form-input" class="form-input"
@ -41,6 +43,7 @@
> >
<input <input
v-else-if="inputProps(field).type === 'file'" v-else-if="inputProps(field).type === 'file'"
ref="formInput"
class="form-input" class="form-input"
type="file" type="file"
:disabled="fieldsToExclude.includes(field.name)" :disabled="fieldsToExclude.includes(field.name)"
@ -49,6 +52,7 @@
> >
<input <input
v-else v-else
ref="formInput"
v-model="localRow[field.name]" v-model="localRow[field.name]"
class="form-input" class="form-input"
:type="inputProps(field).type" :type="inputProps(field).type"
@ -192,6 +196,12 @@ export default {
} }
this.localRow = { ...rowObj }; this.localRow = { ...rowObj };
// Auto focus
setTimeout(() => {
const firstSelectableInput = this.$refs.formInput.find(input => !input.disabled);
firstSelectableInput.focus();
}, 20);
}, },
beforeDestroy () { beforeDestroy () {
window.removeEventListener('keydown', this.onKey); window.removeEventListener('keydown', this.onKey);

View File

@ -108,6 +108,19 @@
</div> </div>
</div> </div>
</form> </form>
<div v-if="!indexesProxy.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-key-outline mdi-48px" />
</div>
<p class="empty-title h5">
{{ $t('message.thereAreNoIndexes') }}
</p>
<div class="empty-action">
<button class="btn btn-primary" @click="addIndex">
{{ $t('message.createNewIndex') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -216,7 +229,7 @@ export default {
}); });
}, },
resetSelectedID () { resetSelectedID () {
this.selectedIndexID = this.indexesProxy[0]._id; this.selectedIndexID = this.indexesProxy.length ? this.indexesProxy[0]._id : '';
} }
} }
}; };

View File

@ -18,6 +18,7 @@
</label> </label>
<div class="column"> <div class="column">
<input <input
ref="firstInput"
v-model="optionsProxy.name" v-model="optionsProxy.name"
class="form-input" class="form-input"
:class="{'is-error': !isTableNameValid}" :class="{'is-error': !isTableNameValid}"
@ -112,6 +113,10 @@ export default {
}, },
created () { created () {
this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions)); this.optionsProxy = JSON.parse(JSON.stringify(this.localOptions));
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
}, },
methods: { methods: {
confirmOptionsChange () { confirmOptionsChange () {

View File

@ -116,7 +116,8 @@ module.exports = {
deleteTable: 'Delete table', deleteTable: 'Delete table',
emptyCorfirm: 'Do you confirm to empty', emptyCorfirm: 'Do you confirm to empty',
unsavedChanges: 'Unsaved changes', unsavedChanges: 'Unsaved changes',
discardUnsavedChanges: 'You have some unsaved changes. By leaving this tab these changes will be discarded.' discardUnsavedChanges: 'You have some unsaved changes. By leaving this tab these changes will be discarded.',
thereAreNoIndexes: 'There are no indexes'
}, },
// Date and Time // Date and Time
short: { short: {

View File

@ -234,3 +234,7 @@ body {
visibility: hidden; visibility: hidden;
} }
} }
.empty {
color: $body-font-color;
}