refactor: teleport for modals

src/renderer/components/BaseConfirmModal.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active" :class="modalSizeClass">
          <a class="modal-overlay" @click="hideModal" />
          <div class="modal-container">
@@ -24,7 +25,7 @@
                   <slot name="body" />
                </div>
             </div>
-         <div v-if="!hideFooter" class="modal-footer">
+            <div v-if="!hideFooter" class="modal-footer pt-0">
                <button
                   class="btn btn-primary mr-2"
                   @click.stop="confirmModal"
@@ -40,6 +41,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalAskCredentials.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active modal-sm">
          <a class="modal-overlay" />
          <div class="modal-container p-0">
@@ -51,6 +52,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalEditSchema.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -63,6 +64,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalExportSchema.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -56,7 +57,7 @@
                               <i class="mdi mdi-database-refresh" />
                            </button>
                            <button
-                           class="btn btn-dark btn-sm"
+                              class="btn btn-dark btn-sm mx-1"
                               :title="$t('message.uncheckAllTables')"
                               :disabled="isRefreshing"
                               @click="uncheckAllTables"
@@ -265,6 +266,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalFakerRows.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -181,6 +182,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalHistory.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0 pb-4">
@@ -93,6 +94,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalImportSchema.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -44,6 +45,8 @@
             </div>
          </div>
       </div>
+      <Teleport to="#window-content" />
+   </teleport>
 </template>
 
 <script>

src/renderer/components/ModalNewSchema.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -63,6 +64,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalNewTableRow.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <a class="modal-overlay" @click.stop="closeModal" />
          <div class="modal-container p-0">
@@ -114,6 +115,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalProcessesList.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div class="modal active">
          <ModalProcessesListContext
             v-if="isContext"
@@ -129,6 +130,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/ModalSettings.vue

@@ -1,4 +1,5 @@
 <template>
+   <Teleport to="#window-content">
       <div id="settings" class="modal active">
          <a class="modal-overlay c-hand" @click="closeModal" />
          <div class="modal-container">
@@ -313,6 +314,7 @@
             </div>
          </div>
       </div>
+   </Teleport>
 </template>
 
 <script>

src/renderer/components/TheNotificationsBoard.vue

@@ -4,7 +4,7 @@
       @mouseenter="clearTimeouts"
       @mouseleave="rearmTimeouts"
    >
-      <transition-group tag="div" name="slide-fade">
+      <TransitionGroup tag="div" name="slide-fade">
          <BaseNotification
             v-for="notification in latestNotifications"
             :key="notification.uid"
@@ -12,7 +12,7 @@
             :status="notification.status"
             @close="removeNotification(notification.uid)"
          />
-      </transition-group>
+      </TransitionGroup>
    </div>
 </template>
 

src/renderer/components/Workspace.vue

@@ -811,48 +811,5 @@ export default {
       }
     }
   }
-
-  .workspace-query-results {
-    overflow: auto;
-    white-space: nowrap;
-
-    .table {
-      width: auto;
-      border-collapse: separate;
-
-      .th {
-        position: sticky;
-        top: 0;
-        border: 2px solid;
-        border-left: none;
-        border-bottom-width: 2px;
-        padding: 0;
-        font-weight: 700;
-        font-size: 0.7rem;
-        z-index: 1;
-
-        > div {
-          padding: 0.1rem 0.2rem;
-          min-width: -webkit-fill-available;
-        }
-      }
-
-      .td {
-        border-right: 2px solid;
-        border-bottom: 2px solid;
-        padding: 0 0.2rem;
-        text-overflow: ellipsis;
-        max-width: 200px;
-        white-space: nowrap;
-        overflow: hidden;
-        font-size: 0.7rem;
-        position: relative;
-
-        &:focus {
-          outline: none;
-        }
-      }
-    }
-  }
 }
 </style>

src/renderer/components/WorkspaceTabQueryTableRow.vue

@@ -152,7 +152,7 @@
          </template>
          <template #body>
             <div class="mb-2">
-               <transition name="jump-down">
+               <Transition name="jump-down">
                   <div v-if="contentInfo.size">
                      <img
                         v-if="isImage"
@@ -173,7 +173,7 @@
                         </button>
                      </div>
                   </div>
-               </transition>
+               </Transition>
                <div class="editor-field-info">
                   <div>
                      <b>{{ $t('word.size') }}</b>: {{ formatBytes(editingContent.length) }}<br>

src/renderer/scss/_fake-tables.scss

@@ -1,7 +1,7 @@
 .table {
   border-collapse: collapse;
-  border-spacing: 0;
   width: 100%;
+  border-spacing: 0;
   display: table;
   table-layout: fixed;
 

src/renderer/scss/main.scss

@@ -87,6 +87,50 @@ option:checked {
   }
 }
 
+
+.workspace-query-results {
+  overflow: auto;
+  white-space: nowrap;
+
+  .table {
+    width: auto;
+    border-collapse: separate;
+
+    .th {
+      position: sticky;
+      top: 0;
+      border: 2px solid;
+      border-left: none;
+      border-bottom-width: 2px;
+      padding: 0;
+      font-weight: 700;
+      font-size: 0.7rem;
+      z-index: 1;
+
+      > div {
+        padding: 0.1rem 0.2rem;
+        min-width: -webkit-fill-available;
+      }
+    }
+
+    .td {
+      border-right: 2px solid;
+      border-bottom: 2px solid;
+      padding: 0 0.2rem;
+      text-overflow: ellipsis;
+      max-width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      font-size: 0.7rem;
+      position: relative;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+
 .workspace-tabs {
   align-content: baseline;
 

src/renderer/scss/themes/dark-theme.scss

@@ -181,6 +181,27 @@
       }
     }
 
+    .workspace-tabs {
+      .tab-block {
+        background: $bg-color-light-dark;
+
+        .tab-item {
+          > a {
+            color: $body-font-color-dark;
+          }
+
+          &.tools-dropdown {
+            background-color: $bg-color-light-dark;
+          }
+        }
+
+        .workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
+          color: $body-font-color-dark;
+        }
+      }
+    }
+  }
+
   .workspace-query-results {
     .table {
       .th {
@@ -212,27 +233,6 @@
     }
   }
   
-    .workspace-tabs {
-      .tab-block {
-        background: $bg-color-light-dark;
-
-        .tab-item {
-          > a {
-            color: $body-font-color-dark;
-          }
-
-          &.tools-dropdown {
-            background-color: $bg-color-light-dark;
-          }
-        }
-
-        .workspace-query-runner .workspace-query-runner-footer .workspace-query-buttons .btn {
-          color: $body-font-color-dark;
-        }
-      }
-    }
-  }
-
   .connection-panel {
     .panel {
       background: rgba($bg-color-light-dark, 50%);

src/renderer/scss/themes/light-theme.scss

@@ -217,6 +217,7 @@
         }
       }
     }
+  }
 
   .workspace-query-results {
     .table {
@@ -248,7 +249,6 @@
       }
     }
   }
-  }
 
   .connection-panel {
     .panel {