fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/components/ModalAskCredentials.vue
View File

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

5
src/renderer/components/ModalEditConnection.vue
View File

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

10
src/renderer/components/ModalEditDatabase.vue
View File

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

5
src/renderer/components/ModalNewConnection.vue
View File

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

4
src/renderer/components/ModalNewDatabase.vue
View File

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

5
src/renderer/components/ModalNewTable.vue
View File

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

10
src/renderer/components/ModalNewTableRow.vue
View File

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

15
src/renderer/components/WorkspacePropsIndexesModal.vue
View File

@ -108,6 +108,19 @@
</div>
</div>
</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>
@ -216,7 +229,7 @@ export default {
});
},
resetSelectedID () {
this.selectedIndexID = this.indexesProxy[0]._id;
this.selectedIndexID = this.indexesProxy.length ? this.indexesProxy[0]._id : '';
}
}
};

5
src/renderer/components/WorkspacePropsOptionsModal.vue
View File

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

3
src/renderer/i18n/en-US.js
View File

@ -116,7 +116,8 @@ module.exports = {
deleteTable: 'Delete table',
emptyCorfirm: 'Do you confirm to empty',
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
short: {

4
src/renderer/scss/main.scss
View File

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