feat: auto focus on first input in modals

antares-sql · Dec 11, 2020 · 1476e89 · 1476e89
1 parent 797ab70
commit 1476e89
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 3 deletions.
diff --git a/src/renderer/components/ModalAskCredentials.vue b/src/renderer/components/ModalAskCredentials.vue
@@ -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');

diff --git a/src/renderer/components/ModalEditConnection.vue b/src/renderer/components/ModalEditConnection.vue
@@ -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);

diff --git a/src/renderer/components/ModalEditDatabase.vue b/src/renderer/components/ModalEditDatabase.vue
@@ -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);

diff --git a/src/renderer/components/ModalNewConnection.vue b/src/renderer/components/ModalNewConnection.vue
@@ -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);

diff --git a/src/renderer/components/ModalNewDatabase.vue b/src/renderer/components/ModalNewDatabase.vue
@@ -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);

diff --git a/src/renderer/components/ModalNewTable.vue b/src/renderer/components/ModalNewTable.vue
@@ -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 () {

diff --git a/src/renderer/components/ModalNewTableRow.vue b/src/renderer/components/ModalNewTableRow.vue
@@ -25,13 +25,15 @@
                         <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)"
                               :disabled="fieldsToExclude.includes(field.name)"
                            />
                            <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);

diff --git a/src/renderer/components/WorkspacePropsIndexesModal.vue b/src/renderer/components/WorkspacePropsIndexesModal.vue
@@ -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 : '';
       }
    }
 };

diff --git a/src/renderer/components/WorkspacePropsOptionsModal.vue b/src/renderer/components/WorkspacePropsOptionsModal.vue
@@ -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 () {

diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
@@ -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: {

diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
@@ -234,3 +234,7 @@ body {
     visibility: hidden;
   }
 }
+
+.empty {
+  color: $body-font-color;
+}