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

refactor: teleport for modals

This commit is contained in:
Fabio Di Stasio 2022-04-25 13:45:07 +02:00
parent 6780401cb7
commit 8b04a2b7dd
18 changed files with 1364 additions and 1340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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>

2
src/renderer/components/ModalEditSchema.vue
View File

@ -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>

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

@ -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>

2
src/renderer/components/ModalFakerRows.vue
View File

@ -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>

2
src/renderer/components/ModalHistory.vue
View File

@ -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>

3
src/renderer/components/ModalImportSchema.vue
View File

@ -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>

2
src/renderer/components/ModalNewSchema.vue
View File

@ -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>

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

@ -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>

2
src/renderer/components/ModalProcessesList.vue
View File

@ -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>

2
src/renderer/components/ModalSettings.vue
View File

@ -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>

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

@ -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>

43
src/renderer/components/Workspace.vue
View File

@ -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>

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

@ -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>

2
src/renderer/scss/_fake-tables.scss
View File

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

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

@ -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;

42
src/renderer/scss/themes/dark-theme.scss
View File

@ -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%);

2
src/renderer/scss/themes/light-theme.scss
View File

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