feat: query tabs auto focus

antares-sql · Dec 11, 2020 · f81312a · f81312a
1 parent 3ed5ea0
commit f81312a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/src/renderer/components/QueryEditor.vue b/src/renderer/components/QueryEditor.vue
@@ -14,7 +14,8 @@ monaco.languages.registerCompletionItemProvider('sql', completionItemProvider(mo
 export default {
    name: 'QueryEditor',
    props: {
-      value: String
+      value: String,
+      autoFocus: { type: Boolean, default: false }
    },
    data () {
       return {
@@ -40,6 +41,12 @@ export default {
          const content = this.editor.getValue();
          this.$emit('update:value', content);
       });
+
+      if (this.autoFocus) {
+         setTimeout(() => {
+            this.editor.focus();
+         }, 20);
+      }
    },
    beforeDestroy () {
       this.editor && this.editor.dispose();

diff --git a/src/renderer/components/WorkspacePropsTable.vue b/src/renderer/components/WorkspacePropsTable.vue
@@ -29,14 +29,14 @@
                   </div>
                </div>
                <div class="th">
-                  <div class="column-resizable">
+                  <div class="column-resizable min-100">
                      <div class="table-column-title">
                         {{ $t('word.name') }}
                      </div>
                   </div>
                </div>
                <div class="th">
-                  <div class="column-resizable">
+                  <div class="column-resizable min-100">
                      <div class="table-column-title">
                         {{ $t('word.type') }}
                      </div>
@@ -231,4 +231,8 @@ export default {
 .vscroll {
   overflow: auto;
 }
+
+.min-100 {
+  min-width: 100px !important;
+}
 </style>
diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue
@@ -1,7 +1,11 @@
 <template>
    <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
       <div class="workspace-query-runner column col-12">
-         <QueryEditor v-if="isSelected" :value.sync="query" />
+         <QueryEditor
+            v-if="isSelected"
+            :auto-focus="true"
+            :value.sync="query"
+         />
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
                <button

diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js
@@ -111,11 +111,10 @@ export default {
             }
             : workspace);
       },
-      NEW_TAB (state, uid) {
+      NEW_TAB (state, { uid, tab }) {
          tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
-
          const newTab = {
-            uid: uidGen('T'),
+            uid: tab,
             index: tabIndex[uid],
             selected: false,
             type: 'query',
@@ -338,7 +337,10 @@ export default {
          lastBreadcrumbs = { ...breadcrumbsObj, ...payload };
       },
       newTab ({ commit }, uid) {
-         commit('NEW_TAB', uid);
+         const tab = uidGen('T');
+
+         commit('NEW_TAB', { uid, tab });
+         commit('SELECT_TAB', { uid, tab });
       },
       removeTab ({ commit }, payload) {
          commit('REMOVE_TAB', payload);