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

perf: migration from font icons to svg icons

This commit is contained in:
Fabio Di Stasio 2023-09-17 18:49:37 +02:00
parent 9de5f67d18
commit e7bec0aaaf
80 changed files with 2024 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -12,7 +12,9 @@
"dependencies": {
"@electron/remote": "~2.0.1",
"@faker-js/faker": "~6.1.2",
"@jamescoyle/vue-icon": "~0.1.2",
"@mdi/font": "~7.2.96",
"@mdi/js": "~7.2.96",
"@turf/helpers": "~6.5.0",
"@vueuse/core": "~10.4.1",
"ace-builds": "~1.24.1",
@ -2018,6 +2020,11 @@
"node": ">= 14"
}
},
"node_modules/@jamescoyle/vue-icon": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@jamescoyle/vue-icon/-/vue-icon-0.1.2.tgz",
"integrity": "sha512-KFrImXx5TKIi6iQXlnyLEBl4rNosNKbTeRnr70ucTdUaciVmd9qK9d/pZAaKt1Ob/8xNnX2GMp8LisyHdKtEgw=="
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"dev": true,
@ -2105,6 +2112,11 @@
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
"integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w=="
},
"node_modules/@mdi/js": {
"version": "7.2.96",
"resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.2.96.tgz",
"integrity": "sha512-paR9M9ZT7rKbh2boksNUynuSZMHhqRYnEZOm/KrZTjQ4/FzyhjLHuvw/8XYzP+E7fS4+/Ms/82EN1pl/OFsiIA=="
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"dev": true,

2
package.json
View File

@ -122,7 +122,9 @@
"dependencies": {
"@electron/remote": "~2.0.1",
"@faker-js/faker": "~6.1.2",
"@jamescoyle/vue-icon": "~0.1.2",
"@mdi/font": "~7.2.96",
"@mdi/js": "~7.2.96",
"@turf/helpers": "~6.5.0",
"@vueuse/core": "~10.4.1",
"ace-builds": "~1.24.1",

42
src/renderer/components/BaseIcon.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<SvgIcon
:type="type"
:path="iconPath"
:size="size"
:flip="flip"
:rotate="rotate"
/>
</template>
<script setup lang="ts">
import SvgIcon from '@jamescoyle/vue-icon';
import * as Icons from '@mdi/js';
import { computed, PropType } from 'vue';
const props = defineProps({
iconName: {
type: String,
required: true
},
size: {
type: Number,
default: 48
},
type: {
type: String,
default: () => 'mdi'
},
flip: {
type: String as PropType<'horizontal' | 'vertical' | 'both'>,
default: () => null
},
rotate: {
type: String,
default: () => null
}
});
const iconPath = computed(() => {
return (Icons as {[k:string]: string})[props.iconName];
});
</script>

23
src/renderer/components/BaseNotification.vue
View File

@ -1,13 +1,18 @@
<template>
<div class="toast mt-2" :class="notificationStatus.className">
<span class="p-vcentered text-left" :class="{'expanded': isExpanded}">
<i class="mdi mdi-24px mr-2" :class="notificationStatus.iconName" />
<BaseIcon
:icon-name="notificationStatus.iconName"
class="mr-2"
:size="24"
/>
<span class="notification-message">{{ message }}</span>
</span>
<i
<BaseIcon
v-if="isExpandable"
class="mdi mdi-24px c-hand expand-btn"
:class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
:icon-name="isExpanded ? 'mdiChevronUp' : 'mdiChevronDown'"
class=" c-hand expand-btn"
:size="24"
@click="toggleExpand"
/>
<button class="btn btn-clear ml-2" @click="hideToast" />
@ -17,6 +22,8 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import BaseIcon from '@/components/BaseIcon.vue';
const props = defineProps({
message: {
type: String,
@ -36,19 +43,19 @@ const notificationStatus = computed(() => {
switch (props.status) {
case 'success':
className = 'toast-success';
iconName = 'mdi-check';
iconName = 'mdiCheck';
break;
case 'error':
className = 'toast-error';
iconName = 'mdi-alert-rhombus';
iconName = 'mdiAlertRhombus';
break;
case 'warning':
className = 'toast-warning';
iconName = 'mdi-alert';
iconName = 'mdiAlert';
break;
case 'primary':
className = 'toast-primary';
iconName = 'mdi-information-outline';
iconName = 'mdiInformationOutline';
break;
}

76
src/renderer/components/BaseToast.vue
View File

@ -1,76 +0,0 @@
<template>
<div
:style="{display: isVisible ? 'flex' : 'none'}"
class="toast mt-2"
:class="toastStatus.className"
>
<span class="p-vcentered text-left"><i class="mdi mdi-24px mr-1" :class="toastStatus.iconName" /> {{ message }}</span>
<button class="btn btn-clear" @click="hideToast" />
</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
const props = defineProps({
message: {
type: String,
default: ''
},
status: {
type: String,
default: ''
}
});
const isVisible = ref(false);
const message = ref(props.message);
const emit = defineEmits(['close']);
const toastStatus = computed(() => {
let className = '';
let iconName = '';
switch (props.status) {
case 'success':
className = 'toast-success';
iconName = 'mdi-check';
break;
case 'error':
className = 'toast-error';
iconName = 'mdi-alert-rhombus';
break;
case 'warning':
className = 'toast-warning';
iconName = 'mdi-alert';
break;
case 'primary':
className = 'toast-primary';
iconName = 'mdi-information-outline';
break;
}
return { className, iconName };
});
watch(message, () => {
if (message.value)
isVisible.value = true;
else
isVisible.value = false;
});
const hideToast = () => {
isVisible.value = false;
emit('close');
};
</script>
<style scoped>
.toast {
display: flex;
justify-content: space-between;
user-select: text;
word-break: break-all;
}
</style>

19
src/renderer/components/BaseUploadInput.vue
View File

@ -1,14 +1,20 @@
<template>
<label :for="`id_${id}`" class="file-uploader">
<span class="file-uploader-message">
<i class="mdi mdi-folder-open mr-1" />{{ message }}
<BaseIcon
icon-name="mdiFolderOpen"
class="mr-1 mt-1"
:size="18"
/>{{ message }}
</span>
<span class="text-ellipsis file-uploader-value">
{{ lastPart(modelValue, 19) }}
</span>
<i
<BaseIcon
v-if="modelValue"
class="file-uploader-reset mdi mdi-close"
class="file-upload-icon-clear"
icon-name="mdiClose"
:size="18"
@click.prevent="clear"
/>
<form :ref="`form_${id}`">
@ -26,6 +32,7 @@
<script setup lang="ts">
import { uidGen } from 'common/libs/uidGen';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFilters } from '@/composables/useFilters';
const { lastPart } = useFilters();
@ -65,6 +72,12 @@ const clear = () => {
position: relative;
flex: 1 1 auto;
.file-upload-icon-clear {
position: absolute;
right: 4px;
top: 8px;
}
> span {
padding: 0.25rem 0.4rem;
}

7
src/renderer/components/KeyPressDetector.vue
View File

@ -9,13 +9,18 @@
@blur="isFocus = false"
@keydown.prevent.stop="onKey"
>
<i class="form-icon mdi mdi-keyboard-outline mdi-24px" />
<BaseIcon
icon-name="mdiKeyboardOutline"
class="form-icon"
:size="24"
/>
</div>
</template>
<script setup lang="ts">
import { computed, PropType, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import Application from '@/ipc-api/Application';
const { t } = useI18n();

79
src/renderer/components/ModalAllConnections.vue
View File

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-apps mr-1" />
<BaseIcon
icon-name="mdiApps"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('connection.allConnections') }}</span>
</div>
</div>
@ -24,10 +28,17 @@
:placeholder="t('connection.searchForConnections')"
@keypress.esc="searchTerm = ''"
>
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
<i
<BaseIcon
v-if="!searchTerm"
icon-name="mdiMagnify"
class="form-icon pr-4"
:size="18"
/>
<BaseIcon
v-else
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
icon-name="mdiBackspace"
class="form-icon c-hand pr-4"
:size="18"
@click="searchTerm = ''"
/>
</div>
@ -56,9 +67,11 @@
{{ clients.get(connection.client) || connection.client }}
</div>
<div class="all-connections-buttons p-absolute d-flex" :style="'top: 0; right: 0;'">
<i
class="all-connections-delete mdi mdi-delete mdi-18px ml-2"
<BaseIcon
icon-name="mdiDelete"
class="all-connections-delete ml-2"
:title="t('general.delete')"
:size="18"
@click.stop="askToDelete(connection)"
/>
</div>
@ -66,32 +79,57 @@
<div class="panel-body text-center">
<div v-if="connection.databasePath">
<div class="text-ellipsis" :title="connection.databasePath">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
<BaseIcon
icon-name="mdiDatabase"
class="p-relative"
:style="'top:3px'"
:size="18"
/> <span class="text-bold">{{
connection.databasePath
}}</span>
</div>
</div>
<div v-else>
<div class="text-ellipsis" :title="`${connection.host}:${connection.port}`">
<i class="mdi mdi-server d-inline" /> <span class="text-bold">{{ connection.host
<BaseIcon
icon-name="mdiServer"
class="p-relative"
:style="'top:3px'"
:size="18"
/> <span class="text-bold">{{ connection.host
}}:{{ connection.port }}</span>
</div>
</div>
<div v-if="connection.user">
<div class="text-ellipsis">
<i class="mdi mdi-account d-inline" /> <span class="text-bold">{{ connection.user
<BaseIcon
icon-name="mdiAccount"
class="p-relative"
:style="'top:3px'"
:size="18"
/> <span class="text-bold">{{ connection.user
}}</span>
</div>
</div>
<div v-if="connection.schema">
<div class="text-ellipsis">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{ connection.schema
<BaseIcon
icon-name="mdiDatabase"
class="p-relative"
:style="'top:3px'"
:size="18"
/> <span class="text-bold">{{ connection.schema
}}</span>
</div>
</div>
<div v-if="connection.database">
<div class="text-ellipsis">
<i class="mdi mdi-database d-inline" /> <span class="text-bold">{{
<BaseIcon
icon-name="mdiDatabase"
class="p-relative"
:style="'top:3px'"
:size="18"
/> <span class="text-bold">{{
connection.database
}}</span>
</div>
@ -99,11 +137,19 @@
</div>
<div class="panel-footer text-center py-0">
<div v-if="connection.ssl" class="chip bg-success mt-2">
<i class="mdi mdi-shield-key mdi-18px mr-1" />
<BaseIcon
icon-name="mdiShieldKey"
class="mr-1"
:size="18"
/>
SSL
</div>
<div v-if="connection.ssh" class="chip bg-success mt-2">
<i class="mdi mdi-console-network mdi-18px mr-1" />
<BaseIcon
icon-name="mdiConsoleNetwork"
class="mr-1"
:size="18"
/>
SSH
</div>
</div>
@ -130,7 +176,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-server-remove mr-1" /> {{ t('connection.deleteConnection') }}
<BaseIcon
icon-name="mdiServerRemove"
class="mr-1"
:size="24"
/> {{ t('connection.deleteConnection') }}
</div>
</template>
<template #body>
@ -149,6 +199,7 @@ import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-key-variant mr-1" /> {{ t('connection.credentials') }}
<BaseIcon
icon-name="mdiKeyVariant"
class="mr-1"
:size="24"
/> {{ t('connection.credentials') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
@ -59,6 +63,7 @@
import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
const { t } = useI18n();

7
src/renderer/components/ModalAskParameters.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-play mr-1" />
<BaseIcon
icon-name="mdiPlay"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.parameters') }}: {{ localRoutine.name }}</span>
</div>
</template>
@ -54,6 +58,7 @@ import { computed, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFilters } from '@/composables/useFilters';
const { t } = useI18n();

40
src/renderer/components/ModalConnectionAppearance.vue
View File

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-brush-variant mr-1" />
<BaseIcon
icon-name="mdiBrushVariant"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('application.editConnectionAppearance') }}</span>
</div>
</div>
@ -37,11 +41,24 @@
<div
v-for="icon in icons"
:key="icon.name"
class="icon-box"
:title="icon.name"
:class="[icon.code ? `mdi ${icon.code} mdi-36px` : `dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
@click="localConnection.icon = icon.code"
/>
>
<BaseIcon
v-if="icon.code"
:icon-name="camelize(icon.code)"
:size="36"
class="icon-box"
:title="icon.name"
:class="[{'selected': localConnection.icon === icon.code}]"
@click="localConnection.icon = icon.code"
/>
<div
v-else
class="icon-box"
:title="icon.name"
:class="[`dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]"
@click="localConnection.icon = icon.code"
/>
</div>
</div>
</div>
</form>
@ -64,6 +81,7 @@
import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@ -142,6 +160,16 @@ const editFolderAppearance = () => {
closeModal();
};
const camelize = (text: string) => {
const textArr = text.split('-');
for (let i = 0; i < textArr.length; i++) {
if (i === 0) continue;
textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
}
return textArr.join('');
};
const closeModal = () => emit('close');
const onKey =(e: KeyboardEvent) => {

7
src/renderer/components/ModalDiscardChanges.vue
View File

@ -7,7 +7,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-content-save-alert mr-1" /> {{ t('application.unsavedChanges') }}
<BaseIcon
icon-name="mdiContentSaveAlert"
class="mr-1"
:size="24"
/> {{ t('application.unsavedChanges') }}
</div>
</template>
<template #body>
@ -23,6 +27,7 @@ import { onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-edit mr-1" />
<BaseIcon
icon-name="mdiDatabaseEdit"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.editSchema') }}</span>
</div>
</div>
@ -68,6 +72,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import Schema from '@/ipc-api/Schema';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-export mr-1" />
<BaseIcon
icon-name="mdiDatabaseExport"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.exportSchema') }}</span>
</div>
</div>
@ -44,7 +48,11 @@
<div class="column col-8 left">
<div class="columns mb-2 mt-1 p-vcentered">
<div class="column col-auto input-group d-flex text-italic" :style="'flex-grow: 1'">
<i class="input-group-addon mdi mdi-file-document-outline" />
<BaseIcon
icon-name="mdiFileDocumentOutline"
class="input-group-addon"
:size="36"
/>
<input
v-model="chosenFilename"
class="form-input"
@ -56,27 +64,27 @@
<div class="column col-auto col-ml-auto ">
<button
class="btn btn-dark btn-sm"
class="btn btn-dark btn-sm pt-1"
:title="t('general.refresh')"
@click="refresh"
>
<i class="mdi mdi-refresh" />
<BaseIcon icon-name="mdiRefresh" :size="15" />
</button>
<button
class="btn btn-dark btn-sm mx-1"
class="btn btn-dark btn-sm mx-1 pt-1"
:title="t('database.uncheckAllTables')"
:disabled="isRefreshing"
@click="uncheckAllTables"
>
<i class="mdi mdi-checkbox-blank-outline" />
<BaseIcon icon-name="mdiCheckboxBlankOutline" :size="15" />
</button>
<button
class="btn btn-dark btn-sm"
class="btn btn-dark btn-sm pt-1"
:title="t('database.checkAllTables')"
:disabled="isRefreshing"
@click="checkAllTables"
>
<i class="mdi mdi-checkbox-marked-outline" />
<BaseIcon icon-name="mdiCheckboxMarkedOutline" :size="15" />
</button>
</div>
</div>
@ -280,6 +288,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import Application from '@/ipc-api/Application';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
<BaseIcon
icon-name="mdiPlaylistPlus"
:size="24"
class="mr-1"
/>
<span class="cut-text">{{ t('database.insertRow', 2) }}</span>
</div>
</div>
@ -64,7 +68,7 @@
:disabled="isInserting"
>
<span class="input-group-addon">
<i class="mdi mdi-24px mdi-repeat" />
<BaseIcon icon-name="mdiRepeat" :size="24" />
</span>
</div>
<div
@ -105,6 +109,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeMount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import FakerSelect from '@/components/FakerSelect.vue';
import { useFilters } from '@/composables/useFilters';

13
src/renderer/components/ModalFolderAppearance.vue
View File

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-folder-edit mr-1" />
<BaseIcon
icon-name="mdiFolderEdit"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('application.editFolder') }}</span>
</div>
</div>
@ -43,7 +47,11 @@
:style="`background-color: ${color.hex}`"
@click="localFolder.color = color.hex"
>
<i v-if="localFolder.color === color.hex" class="mdi mdi-check" />
<BaseIcon
v-if="localFolder.color === color.hex"
icon-name="mdiCheck"
:size="16"
/>
</div>
</div>
</div>
@ -67,6 +75,7 @@
import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-history mr-1" />
<BaseIcon
icon-name="mdiHistory"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('general.history') }}: {{ connectionName }}</span>
</div>
</div>
@ -24,17 +28,24 @@
type="text"
:placeholder="t('database.searchForQueries')"
>
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" />
<i
<BaseIcon
v-if="!searchTerm"
icon-name="mdiMagnify"
class="form-icon pr-2"
:size="18"
/>
<BaseIcon
v-else
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-4"
icon-name="mdiBackspace"
class="form-icon c-hand pr-2"
:size="18"
@click="searchTerm = ''"
/>
</div>
<div
v-if="history.length"
ref="tableWrapper"
class="vscroll px-1 "
class="vscroll px-1"
:style="{'height': resultsSize+'px'}"
>
<div ref="table">
@ -53,7 +64,11 @@
tabindex="0"
>
<div class="tile-icon">
<i class="mdi mdi-code-tags pr-1" />
<BaseIcon
icon-name="mdiCodeTags"
class="pr-1"
:size="24"
/>
</div>
<div class="tile-content">
<div class="tile-title">
@ -67,13 +82,25 @@
<small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
<div class="tile-history-buttons">
<button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)">
<i class="mdi mdi-open-in-app pr-1" /> {{ t('general.select') }}
<BaseIcon
icon-name="mdiOpenInApp"
class="pr-1"
:size="22"
/> {{ t('general.select') }}
</button>
<button class="btn btn-link pl-1" @click="copyQuery(query.sql)">
<i class="mdi mdi-content-copy pr-1" /> {{ t('general.copy') }}
<BaseIcon
icon-name="mdiContentCopy"
class="pr-1"
:size="22"
/> {{ t('general.copy') }}
</button>
<button class="btn btn-link pl-1" @click="deleteQuery(query)">
<i class="mdi mdi-delete-forever pr-1" /> {{ t('general.delete') }}
<BaseIcon
icon-name="mdiDeleteForever"
class="pr-1"
:size="22"
/> {{ t('general.delete') }}
</button>
</div>
</div>
@ -85,7 +112,7 @@
</div>
<div v-else class="empty">
<div class="empty-icon">
<i class="mdi mdi-history mdi-48px" />
<BaseIcon icon-name="mdiHistory" :size="48" />
</div>
<p class="empty-title h5">
{{ t('database.thereIsNoQueriesYet') }}
@ -102,6 +129,7 @@ import { ConnectionParams } from 'common/interfaces/antares';
import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import { useFilters } from '@/composables/useFilters';
import { useFocusTrap } from '@/composables/useFocusTrap';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-import mr-1" />
<BaseIcon
icon-name="mdiDatabaseImport"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.importSchema') }}</span>
</div>
</div>
@ -57,6 +61,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import Schema from '@/ipc-api/Schema';
import { useNotificationsStore } from '@/stores/notifications';
import { useWorkspacesStore } from '@/stores/workspaces';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-plus mr-1" />
<BaseIcon
icon-name="mdiDatabasePlus"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.createNewSchema') }}</span>
</div>
</div>
@ -71,6 +75,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import Schema from '@/ipc-api/Schema';

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

@ -16,7 +16,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-memory mr-1" />
<BaseIcon
icon-name="mdiMemory"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.processesList') }}: {{ connectionName }}</span>
</div>
</div>
@ -32,11 +36,21 @@
:title="`${t('general.refresh')}`"
@click="getProcessesList"
>
<i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
<i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
<BaseIcon
v-if="!+autorefreshTimer"
icon-name="mdiRefresh"
:size="24"
/>
<BaseIcon
v-else
icon-name="mdiHistory"
flip="horizontal"
class="mr-1"
:size="24"
/>
</button>
<div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
<i class="mdi mdi-24px mdi-menu-down" />
<BaseIcon icon-name="mdiMenuDown" :size="24" />
</div>
<div class="menu px-3">
<span>{{ t('general.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
@ -58,9 +72,9 @@
class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
tabindex="0"
>
<i class="mdi mdi-24px mdi-file-export mr-1" />
<BaseIcon icon-name="mdiFileExport" :size="24" />
<span>{{ t('database.export') }}</span>
<i class="mdi mdi-24px mdi-menu-down" />
<BaseIcon icon-name="mdiMenuDown" :size="24" />
</button>
<ul class="menu text-left">
<li class="menu-item">
@ -95,10 +109,12 @@
<div ref="columnResize" class="column-resizable">
<div class="table-column-title" @click="sort(field)">
<span>{{ field.toUpperCase() }}</span>
<i
<BaseIcon
v-if="currentSort === field"
class="mdi sort-icon"
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
:icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
:size="18"
class="ml-1"
/>
</div>
</div>
@ -139,6 +155,7 @@ import { ipcRenderer } from 'electron';
import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue';
import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue';

32
src/renderer/components/ModalProcessesListContext.vue
View File

@ -4,8 +4,16 @@
@close-context="closeContext"
>
<div v-if="props.selectedRow" class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<span class="d-flex"><BaseIcon
icon-name="mdiContentCopy"
class="text-light mt-1 mr-1"
:size="18"
/> {{ t('general.copy') }}</span>
<BaseIcon
icon-name="mdiChevronRight"
class="text-light"
:size="18"
/>
<div class="context-submenu">
<div
v-if="props.selectedRow"
@ -13,7 +21,12 @@
@click="copyCell"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('database.cell', 1) }}
<BaseIcon
icon-name="mdiNumeric0"
rotate="90deg"
class="text-light mt-1 mr-1"
:size="18"
/> {{ t('database.cell', 1) }}
</span>
</div>
<div
@ -22,7 +35,11 @@
@click="copyRow"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', 1) }}
<BaseIcon
icon-name="mdiTableRow"
class="text-light mt-1 mr-1"
:size="18"
/> {{ t('database.row', 1) }}
</span>
</div>
</div>
@ -33,7 +50,11 @@
@click="killProcess"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-close-circle-outline text-light pr-1" /> {{ t('database.killProcess') }}
<BaseIcon
icon-name="mdiCloseCircleOutline"
class="text-light mt-1 mr-1"
:size="18"
/> {{ t('database.killProcess') }}
</span>
</div>
</BaseContextMenu>
@ -43,6 +64,7 @@
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

7
src/renderer/components/ModalProcessesListRow.vue
View File

@ -24,7 +24,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-information-outline mr-1" /> {{ t('database.processInfo') }}
<BaseIcon
icon-name="mdiInformationOutline"
:size="24"
class="mr-1"
/> {{ t('database.processInfo') }}
</div>
</template>
<template #body>
@ -49,6 +53,7 @@ import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import TextEditor from '@/components/BaseTextEditor.vue';
import { useFilters } from '@/composables/useFilters';

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-cog mr-1" />
<BaseIcon
icon-name="mdiCog"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('application.settings') }}</span>
</div>
</div>
@ -78,7 +82,11 @@
<div class="form-group column col-12">
<div class="col-5 col-sm-12">
<label class="form-label">
<i class="mdi mdi-18px mdi-translate mr-1" />
<BaseIcon
icon-name="mdiTranslate"
class="mr-1"
:size="18"
/>
{{ t('application.language') }}
</label>
</div>
@ -274,7 +282,11 @@
>
<img :src="darkPreview" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name text-light">
<i class="mdi mdi-moon-waning-crescent mdi-48px" />
<BaseIcon
icon-name="mdiMoonWaningCrescent"
class="mr-1"
:size="48"
/>
<div class="h6 mt-4">
{{ t('application.dark') }}
</div>
@ -287,7 +299,11 @@
>
<img :src="lightPreview" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name text-dark">
<i class="mdi mdi-white-balance-sunny mdi-48px" />
<BaseIcon
icon-name="mdiWhiteBalanceSunny"
class="mr-1"
:size="48"
/>
<div class="h6 mt-4">
{{ t('application.light') }}
</div>
@ -389,7 +405,39 @@
<h4>{{ appName }}</h4>
<p class="mb-2">
{{ t('general.version') }} {{ appVersion }}<br>
<a class="c-hand" @click="openOutside('https://github.com/antares-sql/antares')"><i class="mdi mdi-github d-inline" /> GitHub</a> • <a class="c-hand" @click="openOutside('https://fosstodon.org/@AntaresSQL')"><i class="mdi mdi-mastodon d-inline" /> Mastodon</a> • <a class="c-hand" @click="openOutside('https://twitter.com/AntaresSQL')"><i class="mdi mdi-twitter d-inline" /> Twitter</a> • <a class="c-hand" @click="openOutside('https://antares-sql.app/')"><i class="mdi mdi-web d-inline" /> Website</a><br>
<a
class="c-hand"
:style="'align-items: center; display: inline-flex;'"
@click="openOutside('https://github.com/antares-sql/antares')"
><BaseIcon
icon-name="mdiGithub"
class="d-inline mr-1"
:size="16"
/> GitHub</a> • <a
class="c-hand"
:style="'align-items: center; display: inline-flex;'"
@click="openOutside('https://fosstodon.org/@AntaresSQL')"
><BaseIcon
icon-name="mdiMastodon"
class="d-inline mr-1"
:size="16"
/> Mastodon</a> • <a
class="c-hand"
:style="'align-items: center; display: inline-flex;'"
@click="openOutside('https://twitter.com/AntaresSQL')"
><BaseIcon
icon-name="mdiTwitter"
class="d-inline mr-1"
:size="16"
/> Twitter</a> • <a
class="c-hand"
:style="'align-items: center; display: inline-flex;'"
@click="openOutside('https://antares-sql.app/')"
><BaseIcon
icon-name="mdiWeb"
class="d-inline mr-1"
:size="16"
/> Website</a><br>
<small>{{ t('general.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
</p>
<div class="mb-2">
@ -414,6 +462,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import BaseTextEditor from '@/components/BaseTextEditor.vue';
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';

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

@ -8,7 +8,7 @@
/>
<div v-if="isError" class="empty">
<div class="empty-icon">
<i class="mdi mdi-48px mdi-alert-outline" />
<BaseIcon icon-name="mdiAlertOutline" :size="48" />
</div>
</div>
</div>
@ -18,6 +18,7 @@ import { shell } from 'electron';
import { marked } from 'marked';
import { ref } from 'vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import { useApplicationStore } from '@/stores/application';

14
src/renderer/components/ModalSettingsData.vue
View File

@ -12,7 +12,11 @@
class="btn btn-primary d-inline-flex"
@click="isExportModal=true"
>
<i class="mdi mdi-tray-arrow-up mdi-24px pr-2" />
<BaseIcon
icon-name="mdiTrayArrowUp"
class="mr-2"
:size="24"
/>
<span>{{ t('application.exportData') }}</span>
</button>
</div>
@ -30,7 +34,11 @@
class="btn btn-dark d-inline-flex ml-auto"
@click="isImportModal=true"
>
<i class="mdi mdi-tray-arrow-down mdi-24px pr-2" />
<BaseIcon
icon-name="mdiTrayArrowDown"
class="mr-2"
:size="24"
/>
<span>{{ t('application.importData') }}</span>
</button>
</div>
@ -46,10 +54,10 @@
</div>
</template>
<script setup lang="ts">
// import { useApplicationStore } from '@/stores/application';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
import ModalSettingsDataImport from '@/components/ModalSettingsDataImport.vue';

21
src/renderer/components/ModalSettingsDataExport.vue
View File

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-tray-arrow-up mr-1" /> {{ t('application.exportData') }}
<BaseIcon
icon-name="mdiTrayArrowUp"
class="mr-1"
:size="24"
/> {{ t('application.exportData') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
@ -107,8 +111,18 @@
class="btn btn-link input-group-addon"
@click="isPasswordVisible = !isPasswordVisible"
>
<i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
<i v-else class="mdi mdi-eye-off px-1" />
<BaseIcon
v-if="isPasswordVisible"
icon-name="mdiEye"
class="mt-1 mx-1"
:size="16"
/>
<BaseIcon
v-else
icon-name="mdiEyeOff"
class="mt-1 mx-1"
:size="16"
/>
</button>
</div>
<span v-if="isPasswordError" class="form-input-hint">
@ -144,6 +158,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';

28
src/renderer/components/ModalSettingsDataImport.vue
View File

@ -6,7 +6,11 @@
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-tray-arrow-down mr-1" /> {{ t('application.importData') }}
<BaseIcon
icon-name="mdiTrayArrowDown"
class="mr-1"
:size="24"
/> {{ t('application.importData') }}
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
@ -20,7 +24,7 @@
:model-value="filePath"
:message="t('general.browse')"
accept=".antares"
@clear="filePath = ''"
@clear="clearPath"
@change="filesChange($event)"
/>
</div>
@ -42,8 +46,18 @@
class="btn btn-link input-group-addon"
@click="isPasswordVisible = !isPasswordVisible"
>
<i v-if="isPasswordVisible" class="mdi mdi-eye px-1" />
<i v-else class="mdi mdi-eye-off px-1" />
<BaseIcon
v-if="isPasswordVisible"
icon-name="mdiEye"
class="mt-1 mx-1"
:size="16"
/>
<BaseIcon
v-else
icon-name="mdiEyeOff"
class="mt-1 mx-1"
:size="16"
/>
</button>
</div>
<span v-if="isPasswordError" class="form-input-hint">
@ -86,6 +100,7 @@ import { storeToRefs } from 'pinia';
import { onBeforeUnmount, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseUploadInput from '@/components/BaseUploadInput.vue';
import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@ -125,6 +140,11 @@ const filesChange = ({ target } : {target: HTMLInputElement }) => {
};
};
const clearPath = () => {
filePath.value = '';
fileContent.value = null;
};
const importData = () => {
if (options.value.passkey.length < 8)
isPasswordError.value = true;

51
src/renderer/components/ModalSettingsShortcuts.vue
View File

@ -2,10 +2,18 @@
<div class="p-relative">
<div class="shortcuts-tools pb-2 px-2">
<button class="btn btn-dark btn-sm d-flex ml-2" @click="showAddModal">
<i class="mdi mdi-24px mdi-plus mr-1" /><span>{{ t('application.addShortcut') }}</span>
<BaseIcon
icon-name="mdiPlus"
class="mr-1"
:size="24"
/><span>{{ t('application.addShortcut') }}</span>
</button>
<button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true">
<i class="mdi mdi-24px mdi-undo mr-1" /><span>{{ t('application.restoreDefaults') }}</span>
<BaseIcon
icon-name="mdiUndo"
class="mr-1"
:size="24"
/><span>{{ t('application.restoreDefaults') }}</span>
</button>
</div>
<div class="container workspace-query-results">
@ -43,10 +51,20 @@
/>
<div class="td py-1 pr-2">
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2" @click="showEditModal({...shortcut, index: i})">
<span>{{ t('general.edit') }}</span><i class="mdi mdi-pencil ml-1" />
<span>{{ t('general.edit') }}</span>
<BaseIcon
icon-name="mdiPencil"
class="ml-1"
:size="16"
/>
</button>
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
<span>{{ t('general.delete') }}</span><i class="mdi mdi-delete-outline ml-1" />
<span>{{ t('general.delete') }}</span>
<BaseIcon
icon-name="mdiDeleteOutline"
class="ml-1"
:size="16"
/>
</button>
</div>
</div>
@ -65,7 +83,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.addShortcut') }}
<BaseIcon
icon-name="mdiPlus"
class="mr-1"
:size="24"
/> {{ t('application.addShortcut') }}
</div>
</template>
<template #body>
@ -99,7 +121,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('application.editShortcut') }}
<BaseIcon
icon-name="mdiPencil"
class="mr-1"
:size="24"
/> {{ t('application.editShortcut') }}
</div>
</template>
<template #body>
@ -132,7 +158,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-delete mr-1" /> {{ t('application.deleteShortcut') }}
<BaseIcon
icon-name="mdiDelete"
class="mr-1"
:size="24"
/> {{ t('application.deleteShortcut') }}
</div>
</template>
<template #body>
@ -150,7 +180,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-undo mr-1" /> {{ t('application.restoreDefaults') }}
<BaseIcon
icon-name="mdiUndo"
class="mr-1"
:size="24"
/> {{ t('application.restoreDefaults') }}
</div>
</template>
<template #body>
@ -169,6 +203,7 @@ import { Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import { useFilters } from '@/composables/useFilters';
import Application from '@/ipc-api/Application';

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

@ -1,7 +1,7 @@
<template>
<div class="empty">
<div class="empty-icon">
<i class="mdi mdi-48px mdi-cloud-download" />
<BaseIcon icon-name="mdiCloudDownload" :size="48" />
</div>
<p class="empty-title h5">
{{ updateMessage }}
@ -58,6 +58,7 @@ import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useApplicationStore } from '@/stores/application';
import { useSettingsStore } from '@/stores/settings';

33
src/renderer/components/SettingBarConnections.vue
View File

@ -41,12 +41,28 @@
@dragleave="coveredElement = false"
@change="createFolder"
/>
<i v-if="coveredElement === element.uid && draggedElement !== coveredElement" class="settingbar-element-icon mdi mdi-folder-plus mdi-36px" />
<BaseIcon
v-if="coveredElement === element.uid && draggedElement !== coveredElement"
class="settingbar-element-icon"
icon-name="mdiFolderPlus"
:size="36"
/>
<template v-else>
<div class="settingbar-element-icon-wrapper">
<i
<div
v-if="element.icon"
class="settingbar-element-icon"
:class="[getStatusBadge(element.uid)]"
>
<BaseIcon
:icon-name="camelize(element.icon)"
:size="36"
/>
</div>
<div
v-else
class="settingbar-element-icon dbi"
:class="[element.icon ? `mdi ${element.icon} mdi-36px`: `dbi-${element.client}`, getStatusBadge(element.uid)]"
:class="[`dbi-${element.client}`, getStatusBadge(element.uid)]"
/>
<small class="settingbar-element-name">{{ element.name || getConnectionName(element.uid) }}</small>
</div>
@ -75,6 +91,7 @@ import { storeToRefs } from 'pinia';
import { computed, PropType, Ref, ref, watch } from 'vue';
import * as Draggable from 'vuedraggable';
import BaseIcon from '@/components/BaseIcon.vue';
import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -148,6 +165,16 @@ const getStatusBadge = (uid: string) => {
}
};
const camelize = (text: string) => {
const textArr = text.split('-');
for (let i = 0; i < textArr.length; i++) {
if (i === 0) continue;
textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
}
return textArr.join('');
};
watch(() => dummyNested.value.length, () => {
dummyNested.value = [];
});

41
src/renderer/components/SettingBarConnectionsFolder.vue
View File

@ -38,8 +38,16 @@
:style="`color: ${folder.color};`"
@click="closeFolder"
>
<i class="folder-icon-open mdi mdi-folder-open mdi-36px" />
<i class="folder-icon-close mdi mdi-folder mdi-36px" />
<BaseIcon
class="folder-icon-open"
icon-name="mdiFolderOpen"
:size="36"
/>
<BaseIcon
class="folder-icon-close"
icon-name="mdiFolder"
:size="36"
/>
</div>
</template>
<template #item="{ element }">
@ -55,9 +63,20 @@
@click="emit('select-workspace', element)"
@contextmenu.stop="emit('context', {event: $event, content: getConnectionOrderByUid(element)})"
>
<i
<div
v-if="getConnectionOrderByUid(element).icon"
class="folder-element-icon"
:class="[getStatusBadge(element)]"
>
<BaseIcon
:icon-name="camelize(getConnectionOrderByUid(element).icon)"
:size="36"
/>
</div>
<div
v-else
class="folder-element-icon dbi"
:class="[getConnectionOrderByUid(element)?.icon ? `mdi ${getConnectionOrderByUid(element).icon}`: `dbi-${getConnectionOrderByUid(element)?.client}`, getStatusBadge(element)]"
:class="[`dbi-${getConnectionOrderByUid(element).client}`, getStatusBadge(element)]"
/>
<small v-if="isOpen" class="folder-element-name">{{ getConnectionOrderByUid(element)?.name || getConnectionName(element) }}</small>
</div>
@ -80,6 +99,7 @@ import { storeToRefs } from 'pinia';
import { computed, PropType, ref, watch } from 'vue';
import * as Draggable from 'vuedraggable';
import BaseIcon from '@/components/BaseIcon.vue';
import SettingBarConnections from '@/components/SettingBarConnections.vue';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -177,6 +197,16 @@ const dragStop = () => {
emit('folder-drag', false);
};
const camelize = (text: string) => {
const textArr = text.split('-');
for (let i = 0; i < textArr.length; i++) {
if (i === 0) continue;
textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
}
return textArr.join('');
};
watch(() => dummyNested.value.length, () => {
dummyNested.value = [];
});
@ -389,7 +419,8 @@ emit('folder-sort');// To apply changes on component key change
&:not(.opened){
.folder-element {
.folder-element-icon {
.folder-element-icon,
.folder-element-icon svg {
width: 21px;
height: 21px;
font-size: 16px;

35
src/renderer/components/SettingBarContext.vue
View File

@ -8,20 +8,40 @@
class="context-element"
@click="disconnect"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-power text-light pr-1" /> {{ t('connection.disconnect') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPower"
:size="18"
/> {{ t('connection.disconnect') }}</span>
</div>
<div
v-if="!contextConnection.isFolder"
class="context-element"
@click="duplicateConnection"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiContentDuplicate"
:size="18"
/> {{ t('general.duplicate') }}</span>
</div>
<div class="context-element" @click.stop="showAppearanceModal">
<span class="d-flex"><i class="mdi mdi-18px mdi-brush-variant text-light pr-1" /> {{ t('application.appearance') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiBrushVariant"
:size="18"
/> {{ t('application.appearance') }}</span>
</div>
<div class="context-element" @click="showConfirmModal">
<span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('general.delete') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDelete"
:size="18"
/> {{ t('general.delete') }}</span>
</div>
<ConfirmModal
@ -31,7 +51,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mr-1" :class="[contextConnection.isFolder ? 'mdi-folder-remove' : 'mdi-server-remove']" /> {{ t(contextConnection.isFolder ? 'application.deleteFolder' : 'connection.deleteConnection') }}
<BaseIcon
class="text-light mr-1"
:icon-name="contextConnection.isFolder ? 'mdiFolderRemove' : 'mdiServerRemove'"
:size="24"
/> {{ t(contextConnection.isFolder ? 'application.deleteFolder' : 'connection.deleteConnection') }}
</div>
</template>
<template #body>
@ -60,6 +84,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalConnectionAppearance from '@/components/ModalConnectionAppearance.vue';
import ModalFolderAppearance from '@/components/ModalFolderAppearance.vue';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';

41
src/renderer/components/TheFooter.vue
View File

@ -7,19 +7,35 @@
<div class="footer-left-elements">
<ul class="footer-elements">
<li class="footer-element">
<i class="mdi mdi-18px mdi-database mr-1" />
<BaseIcon
icon-name="mdiServer"
class="mr-1"
:size="18"
/>
<small>{{ versionString }}</small>
</li>
<li v-if="connectionInfos && connectionInfos.readonly" class="footer-element">
<i class="mdi mdi-18px mdi-lock mr-1" />
<BaseIcon
icon-name="mdiLock"
class="mr-1"
:size="18"
/>
<small>{{ t('connection.readOnlyMode') }}</small>
</li>
<li v-if="connectionInfos && connectionInfos.ssl" class="footer-element">
<i class="mdi mdi-18px mdi-shield-key mr-1" />
<BaseIcon
icon-name="mdiShieldKey"
class="mr-1"
:size="18"
/>
<small>SSL</small>
</li>
<li v-if="connectionInfos && connectionInfos.ssh" class="footer-element">
<i class="mdi mdi-18px mdi-console-network mr-1" />
<BaseIcon
icon-name="mdiConsoleNetwork"
class="mr-1"
:size="18"
/>
<small>SSH</small>
</li>
</ul>
@ -32,11 +48,19 @@
class="footer-element footer-link"
@click="toggleConsole()"
>
<i class="mdi mdi-18px mdi-console-line mr-1" />
<BaseIcon
icon-name="mdiConsoleLine"
class="mr-1"
:size="18"
/>
<small>{{ t('application.console') }}</small>
</li>
<li class="footer-element footer-link" @click="openOutside('https://www.paypal.com/paypalme/fabiodistasio')">
<i class="mdi mdi-18px mdi-coffee mr-1" />
<BaseIcon
icon-name="mdiCoffee"
class="mr-1"
:size="18"
/>
<small>{{ t('general.donate') }}</small>
</li>
<li
@ -44,14 +68,14 @@
:title="t('application.reportABug')"
@click="openOutside('https://github.com/antares-sql/antares/issues')"
>
<i class="mdi mdi-18px mdi-bug" />
<BaseIcon icon-name="mdiBug" :size="18" />
</li>
<li
class="footer-element footer-link"
:title="t('application.about')"
@click="showSettingModal('about')"
>
<i class="mdi mdi-18px mdi-information-outline" />
<BaseIcon icon-name="mdiInformationOutline" :size="18" />
</li>
</ul>
</div>
@ -64,6 +88,7 @@ import { storeToRefs } from 'pinia';
import { computed, ComputedRef } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useApplicationStore } from '@/stores/application';
import { useConnectionsStore } from '@/stores/connections';
import { useConsoleStore } from '@/stores/console';

7
src/renderer/components/TheScratchpad.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-notebook-edit-outline mr-1" /> {{ t('application.scratchpad') }}
<BaseIcon
icon-name="mdiNotebookEditOutline"
class="mr-1"
:size="24"
/> {{ t('application.scratchpad') }}
</div>
</template>
<template #body>
@ -34,6 +38,7 @@ import { Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import TextEditor from '@/components/BaseTextEditor.vue';
import { useApplicationStore } from '@/stores/application';
import { useScratchpadStore } from '@/stores/scratchpad';

27
src/renderer/components/TheSettingBar.vue
View File

@ -28,7 +28,11 @@
@click="emit('show-connections-modal')"
>
<div class="settingbar-element-icon-wrapper">
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
<BaseIcon
icon-name="mdiDotsHorizontal"
class="settingbar-element-icon text-light"
:size="24"
/>
</div>
</li>
<li
@ -42,7 +46,11 @@
@click="selectWorkspace('NEW')"
>
<div class="settingbar-element-icon-wrapper">
<i class="settingbar-element-icon mdi mdi-24px mdi-plus text-light" />
<BaseIcon
icon-name="mdiPlus"
class="settingbar-element-icon text-light"
:size="24"
/>
</div>
</li>
</ul>
@ -60,7 +68,11 @@
class="settingbar-element btn btn-link"
@click="showScratchpad"
>
<i class="settingbar-element-icon mdi mdi-24px mdi-notebook-edit-outline text-light" />
<BaseIcon
icon-name="mdiNotebookEditOutline"
class="settingbar-element-icon text-light"
:size="24"
/>
</li>
<li
v-tooltip="{
@ -72,9 +84,11 @@
@click="showSettingModal('general')"
>
<div class="settingbar-element-icon-wrapper">
<i
class="settingbar-element-icon mdi mdi-24px mdi-cog text-light"
:class="{ ' badge badge-update': hasUpdates }"
<BaseIcon
icon-name="mdiCog"
class="settingbar-element-icon text-light"
:class="{ 'badge badge-update': hasUpdates }"
:size="24"
/>
</div>
</li>
@ -89,6 +103,7 @@ import { storeToRefs } from 'pinia';
import { computed, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import SettingBarConnections from '@/components/SettingBarConnections.vue';
import SettingBarContext from '@/components/SettingBarContext.vue';
import { useApplicationStore } from '@/stores/application';

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

@ -21,14 +21,14 @@
class="titlebar-element"
@click="openDevTools"
>
<i class="mdi mdi-24px mdi-code-tags" />
<BaseIcon icon-name="mdiCodeTags" :size="24" />
</div>
<div
v-if="isDevelopment"
class="titlebar-element"
@click="reload"
>
<i class="mdi mdi-24px mdi-refresh" />
<BaseIcon icon-name="mdiRefresh" :size="24" />
</div>
<div v-if="isWindows" :style="'width: 140px;'" />
</div>
@ -42,6 +42,7 @@ import { storeToRefs } from 'pinia';
import { computed, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces';

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

@ -40,7 +40,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-18px mdi-code-tags mr-1" />
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiCodeTags"
:size="18"
/>
<span>
<span>{{ cutText(element.content || 'Query', 20, true) }} #{{ element.index }}</span>
<span
@ -57,7 +61,11 @@
class="tab-link"
@dblclick="openAsPermanentTab(element)"
>
<i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<BaseIcon
class="mt-1 mr-1"
:icon-name="element.elementType === 'view' ? 'mdiTableEye' : 'mdiTable'"
:size="18"
/>
<span :title="`${t('general.data').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
<span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
<span
@ -70,7 +78,11 @@
</a>
<a v-else-if="element.type === 'data'" class="tab-link">
<i class="mdi mdi-18px mr-1" :class="element.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<BaseIcon
class="mt-1 mr-1"
:icon-name="element.elementType === 'view' ? 'mdiTableEye' : 'mdiTable'"
:size="18"
/>
<span :title="`${t('general.data').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ cutText(element.elementName, 20, true) }}
<span
@ -87,7 +99,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newTable') }}
<span
@ -104,7 +120,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-wrench-cog mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiWrenchCog"
:size="18"
/>
<span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ cutText(element.elementName, 20, true) }}
<span
@ -121,7 +141,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-wrench-cog mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiWrenchCog"
:size="18"
/>
<span :title="`${t('application.settings').toUpperCase()}: ${t(`database.view`)}`">
{{ cutText(element.elementName, 20, true) }}
<span
@ -138,7 +162,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newView') }}
<span
@ -155,7 +183,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newTrigger') }}
<span
@ -172,7 +204,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newRoutine') }}
<span
@ -189,7 +225,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newFunction') }}
<span
@ -206,7 +246,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newTriggerFunction') }}
<span
@ -223,7 +267,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-shape-square-plus mdi-18px mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiShapeSquarePlus"
:size="18"
/>
<span :title="`${t('general.new').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ t('database.newScheduler') }}
<span
@ -241,7 +289,11 @@
:class="{'badge': element.isChanged}"
@dblclick="openAsPermanentTab(element)"
>
<i class="mdi mdi-18px mdi-wrench-cog mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiWrenchCog"
:size="18"
/>
<span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
<span class=" text-italic">{{ cutText(element.elementName, 20, true) }}</span>
<span
@ -258,7 +310,11 @@
class="tab-link"
:class="{'badge': element.isChanged}"
>
<i class="mdi mdi-18px mdi-wrench-cog mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiWrenchCog"
:size="18"
/>
<span :title="`${t('application.settings').toUpperCase()}: ${t(`database.${element.elementType}`)}`">
{{ cutText(element.elementName, 20, true) }}
<span
@ -281,18 +337,26 @@
tabindex="0"
:title="t('general.tools')"
>
<i class="mdi mdi-24px mdi-tools" />
<BaseIcon icon-name="mdiTools" :size="24" />
</a>
<ul v-if="hasTools" class="menu text-left text-uppercase">
<li class="menu-item">
<a class="c-hand p-vcentered" @click="showProcessesModal">
<i class="mdi mdi-memory mr-1 tool-icon" />
<BaseIcon
icon-name="mdiMemory"
:size="18"
class="mr-1 tool-icon"
/>
<span>{{ t('database.processesList') }}</span>
</a>
</li>
<li class="menu-item">
<a class="c-hand p-vcentered" @click="toggleConsole">
<i class="mdi mdi-console-line mr-1 tool-icon" />
<BaseIcon
icon-name="mdiConsoleLine"
:size="18"
class="mr-1 tool-icon"
/>
<span>{{ t('application.console') }}</span>
</a>
</li>
@ -302,7 +366,11 @@
title="Coming..."
>
<a class="c-hand p-vcentered disabled">
<i class="mdi mdi-shape mr-1 tool-icon" />
<BaseIcon
icon-name="mdiShape"
:size="18"
class="mr-1 tool-icon"
/>
<span>{{ t('database.variables') }}</span>
</a>
</li>
@ -312,7 +380,11 @@
title="Coming..."
>
<a class="c-hand p-vcentered disabled">
<i class="mdi mdi-account-group mr-1 tool-icon" />
<BaseIcon
icon-name="mdiAccountGroup"
:size="18"
class="mr-1 tool-icon"
/>
<span>{{ t('database.manageUsers') }}</span>
</a>
</li>
@ -326,7 +398,7 @@
:title="t('application.openNewTab')"
@click="addQueryTab"
>
<i class="mdi mdi-24px mdi-plus" />
<BaseIcon icon-name="mdiPlus" :size="24" />
</a>
</li>
</template>
@ -495,6 +567,7 @@ import { computed, onMounted, Prop, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import * as Draggable from 'vuedraggable';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalDiscardChanges from '@/components/ModalDiscardChanges.vue';
import ModalProcessesList from '@/components/ModalProcessesList.vue';
import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel.vue';

13
src/renderer/components/WorkspaceAddConnectionPanel.vue
View File

@ -384,7 +384,11 @@
:disabled="isBusy"
@click="startTest"
>
<i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
<BaseIcon
icon-name="mdiLightningBolt"
:size="24"
class="mr-1"
/>
{{ t('connection.testConnection') }}
</button>
<button
@ -393,7 +397,11 @@
:disabled="isBusy"
@click="saveConnection"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
icon-name="mdiContentSave"
:size="24"
class="mr-1"
/>
{{ t('general.save') }}
</button>
</div>
@ -413,6 +421,7 @@ import { uidGen } from 'common/libs/uidGen';
import { computed, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import BaseUploadInput from '@/components/BaseUploadInput.vue';
import ModalAskCredentials from '@/components/ModalAskCredentials.vue';

19
src/renderer/components/WorkspaceEditConnectionPanel.vue
View File

@ -386,7 +386,11 @@
:disabled="isBusy"
@click="startTest"
>
<i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
<BaseIcon
icon-name="mdiLightningBolt"
:size="24"
class="mr-1"
/>
{{ t('connection.testConnection') }}
</button>
<button
@ -395,7 +399,11 @@
:disabled="isBusy || !hasChanges"
@click="saveConnection"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
icon-name="mdiContentSave"
:size="24"
class="mr-1"
/>
{{ t('general.save') }}
</button>
<button
@ -405,7 +413,11 @@
:disabled="isBusy"
@click="startConnection"
>
<i class="mdi mdi-24px mdi-connection mr-1" />
<BaseIcon
icon-name="mdiConnection"
:size="24"
class="mr-1"
/>
{{ t('connection.connect') }}
</button>
</div>
@ -424,6 +436,7 @@ import { ConnectionParams } from 'common/interfaces/antares';
import { computed, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import BaseUploadInput from '@/components/BaseUploadInput.vue';
import ModalAskCredentials from '@/components/ModalAskCredentials.vue';

7
src/renderer/components/WorkspaceEmptyState.vue
View File

@ -8,7 +8,11 @@
</p>
<div class="empty-action">
<button class="btn btn-primary d-flex" @click="emit('new-tab')">
<i class="mdi mdi-24px mdi-tab-plus mr-2" />
<BaseIcon
icon-name="mdiTabPlus"
:size="24"
class="mr-2"
/>
{{ t('application.openNewTab') }}
</button>
</div>
@ -19,6 +23,7 @@ import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useSettingsStore } from '@/stores/settings';
import { useWorkspacesStore } from '@/stores/workspaces';

62
src/renderer/components/WorkspaceExploreBar.vue
View File

@ -23,23 +23,33 @@
</div>
<span v-else class="workspace-explorebar-title">{{ connectionName }}</span>
<span v-if="workspace.connectionStatus === 'connected'" class="workspace-explorebar-tools">
<i
v-if="customizations.schemas"
class="mdi mdi-18px mdi-database-plus c-hand mr-2"
:title="t('database.createNewSchema')"
@click="showNewDBModal"
/>
<i
class="mdi mdi-18px mdi-refresh c-hand mr-2"
:class="{'rotate':isRefreshing}"
:title="t('general.refresh')"
@click="refresh"
/>
<i
class="mdi mdi-18px mdi-power c-hand"
:title="t('connection.disconnect')"
@click="disconnectWorkspace(connection.uid)"
/>
<div :title="t('database.createNewSchema')">
<BaseIcon
v-if="customizations.schemas"
icon-name="mdiDatabasePlus"
:size="18"
class="c-hand mr-2"
@click="showNewDBModal"
/>
</div>
<div :title="t('general.refresh')">
<BaseIcon
v-if="customizations.schemas"
icon-name="mdiRefresh"
:size="18"
class="c-hand mr-2"
:class="{'rotate':isRefreshing}"
@click="refresh"
/>
</div>
<div :title="t('connection.disconnect')">
<BaseIcon
icon-name="mdiPower"
:size="18"
class="c-hand"
@click="disconnectWorkspace(connection.uid)"
/>
</div>
</span>
</div>
<div class="workspace-explorebar-search">
@ -49,7 +59,7 @@
:title="t('application.switchSearchMethod')"
@click="toggleSearchMethod"
>
<i class="mdi mdi-18px" :class="[searchMethod === 'elements' ? 'mdi-shape' : 'mdi-database']" />
<BaseIcon :icon-name="searchMethod === 'elements' ? 'mdiShape' : 'mdiDatabase'" :size="18" />
</div>
<input
ref="searchInput"
@ -58,10 +68,17 @@
type="text"
:placeholder="searchMethod === 'elements' ? t('database.searchForElements') : t('database.searchForSchemas')"
>
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px" />
<i
<BaseIcon
v-if="!searchTerm"
class="form-icon"
icon-name="mdiMagnify"
:size="18"
/>
<BaseIcon
v-else
class="form-icon c-hand mdi mdi-backspace mdi-18px pr-1"
class="form-icon c-hand pr-1"
icon-name="mdiBackspace"
:size="18"
@click="searchTerm = ''"
/>
</div>
@ -140,6 +157,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import ModalNewSchema from '@/components/ModalNewSchema.vue';
import MiscContext from '@/components/WorkspaceExploreBarMiscContext.vue';
@ -526,7 +544,7 @@ const toggleSearchMethod = () => {
display: flex;
align-items: center;
> i {
svg {
opacity: 0.6;
transition: opacity 0.2s;
display: flex;

46
src/renderer/components/WorkspaceExploreBarMiscContext.vue
View File

@ -8,7 +8,12 @@
class="context-element"
@click="runElementCheck"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.run') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPlay"
:size="18"
/> {{ t('general.run') }}</span>
</div>
<div
v-if="selectedMisc.type === 'trigger' && customizations.triggerEnableDisable"
@ -16,10 +21,18 @@
@click="toggleTrigger"
>
<span v-if="!selectedMisc.enabled" class="d-flex">
<i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.enable') }}
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPlay"
:size="18"
/> {{ t('general.enable') }}
</span>
<span v-else class="d-flex">
<i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('general.disable') }}
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPause"
:size="18"
/> {{ t('general.disable') }}
</span>
</div>
<div
@ -28,14 +41,27 @@
@click="toggleScheduler"
>
<span v-if="!selectedMisc.enabled" class="d-flex">
<i class="mdi mdi-18px mdi-play text-light pr-1" /> {{ t('general.enable') }}
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPlay"
:size="18"
/> {{ t('general.enable') }}
</span>
<span v-else class="d-flex">
<i class="mdi mdi-18px mdi-pause text-light pr-1" /> {{ t('general.disable') }}
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPause"
:size="18"
/> {{ t('general.disable') }}
</span>
</div>
<div class="context-element" @click="showDeleteModal">
<span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ t('general.delete') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableRemove"
:size="18"
/> {{ t('general.delete') }}</span>
</div>
<ConfirmModal
v-if="isDeleteModal"
@ -44,7 +70,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-delete mr-1" />
<BaseIcon
class="text-light mr-1"
icon-name="mdiDelete"
:size="24"
/>
<span class="cut-text">{{ deleteMessage }}</span>
</div>
</template>
@ -72,6 +102,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue';
import Functions from '@/ipc-api/Functions';
import Routines from '@/ipc-api/Routines';
@ -119,6 +150,7 @@ const deleteMessage = computed(() => {
switch (props.selectedMisc.type) {
case 'trigger':
return t('database.deleteTrigger');
case 'routine':
case 'procedure':
return t('database.deleteRoutine');
case 'function':

36
src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
View File

@ -8,35 +8,60 @@
class="context-element"
@click="emit('open-create-trigger-tab')"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('database.createNewTrigger') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableCog"
:size="18"
/> {{ t('database.createNewTrigger') }}</span>
</div>
<div
v-if="['procedure', 'routine'].includes(props.selectedMisc)"
class="context-element"
@click="emit('open-create-routine-tab')"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle text-light pr-1" /> {{ t('database.createNewRoutine') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiSyncCircle"
:size="18"
/> {{ t('database.createNewRoutine') }}</span>
</div>
<div
v-if="props.selectedMisc === 'function'"
class="context-element"
@click="emit('open-create-function-tab')"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box text-light pr-1" /> {{ t('database.createNewFunction') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiArrowRightBoldBox"
:size="18"
/> {{ t('database.createNewFunction') }}</span>
</div>
<div
v-if="props.selectedMisc === 'triggerFunction'"
class="context-element"
@click="emit('open-create-trigger-function-tab')"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise text-light pr-1" /> {{ t('database.createNewFunction') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiCogClockwise"
:size="18"
/> {{ t('database.createNewFunction') }}</span>
</div>
<div
v-if="props.selectedMisc === 'scheduler'"
class="context-element"
@click="emit('open-create-scheduler-tab')"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ t('database.createNewScheduler') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiCalendarClock"
:size="18"
/> {{ t('database.createNewScheduler') }}</span>
</div>
</BaseContextMenu>
</template>
@ -45,6 +70,7 @@
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

102
src/renderer/components/WorkspaceExploreBarSchema.vue
View File

@ -7,8 +7,17 @@
@contextmenu.prevent="showSchemaContext($event, database.name)"
>
<div v-if="isLoading" class="icon loading" />
<i v-else class="icon mdi mdi-18px mdi-chevron-right" />
<i class="database-icon mdi mdi-18px mdi-database mr-1" />
<BaseIcon
v-else
class="icon"
icon-name="mdiChevronRight"
:size="18"
/>
<BaseIcon
class="database-icon mr-1"
icon-name="mdiDatabase"
:size="18"
/>
<div class="">
<span v-html="highlightWord(database.name, 'schemas')" />
<div
@ -16,7 +25,11 @@
class="schema-size tooltip tooltip-left mr-1"
:data-tooltip="formatBytes(database.size)"
>
<i class="mdi mdi-information-outline pr-2" />
<BaseIcon
class="mr-2"
icon-name="mdiInformationOutline"
:size="18"
/>
</div>
</div>
</summary>
@ -34,10 +47,11 @@
>
<a class="table-name">
<div v-if="checkLoadingStatus(table.name, 'table')" class="icon loading mr-1" />
<i
<BaseIcon
v-else
class="table-icon mdi mdi-18px mr-1"
:class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'"
class="table-icon mr-1"
:icon-name="table.type === 'view' ? 'mdiTableEye' : 'mdiTable'"
:size="18"
/>
<span v-html="highlightWord(table.name)" />
</a>
@ -59,7 +73,11 @@
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger}"
@contextmenu.prevent="showMiscFolderContext($event, 'trigger')"
>
<i class="misc-icon mdi mdi-18px mdi-folder-cog mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiFolderCog"
:size="18"
/>
{{ t('database.trigger', 2) }}
</summary>
<div class="accordion-body">
@ -76,7 +94,12 @@
>
<a class="table-name">
<div v-if="checkLoadingStatus(trigger.name, 'trigger')" class="icon loading mr-1" />
<i v-else class="table-icon mdi mdi-table-cog mdi-18px mr-1" />
<BaseIcon
v-else
class="table-icon mr-1"
icon-name="mdiTableCog"
:size="18"
/>
<span v-html="highlightWord(trigger.name)" />
</a>
<div
@ -84,7 +107,11 @@
class="tooltip tooltip-left disabled-indicator"
:data-tooltip="t('general.disabled')"
>
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
<BaseIcon
class="table-icon mr-1"
icon-name="mdiPause"
:size="18"
/>
</div>
</li>
</ul>
@ -100,7 +127,11 @@
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.routine}"
@contextmenu.prevent="showMiscFolderContext($event, 'routine')"
>
<i class="misc-icon mdi mdi-18px mdi-folder-sync mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiFolderSync"
:size="18"
/>
{{ t('database.storedRoutine', 2) }}
</summary>
<div class="accordion-body">
@ -116,7 +147,11 @@
@contextmenu.prevent="showMiscContext($event, {...routine, type: 'routine'})"
>
<a class="table-name">
<i class="table-icon mdi mdi-sync-circle mdi-18px mr-1" />
<BaseIcon
class="table-icon mr-1"
icon-name="mdiSyncCircle"
:size="18"
/>
<span v-html="highlightWord(routine.name)" />
</a>
</li>
@ -133,7 +168,11 @@
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction}"
@contextmenu.prevent="showMiscFolderContext($event, 'triggerFunction')"
>
<i class="misc-icon mdi mdi-18px mdi-folder-refresh mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiFolderRefresh"
:size="18"
/>
{{ t('database.triggerFunction', 2) }}
</summary>
<div class="accordion-body">
@ -149,7 +188,11 @@
@contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
>
<a class="table-name">
<i class="table-icon mdi mdi-cog-clockwise mdi-18px mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiCogClockwise"
:size="18"
/>
<span v-html="highlightWord(func.name)" />
</a>
</li>
@ -166,7 +209,11 @@
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function}"
@contextmenu.prevent="showMiscFolderContext($event, 'function')"
>
<i class="misc-icon mdi mdi-18px mdi-folder-move mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiFolderMove"
:size="18"
/>
{{ t('database.function', 2) }}
</summary>
<div class="accordion-body">
@ -182,7 +229,11 @@
@contextmenu.prevent="showMiscContext($event, {...func, type: 'function'})"
>
<a class="table-name">
<i class="table-icon mdi mdi-arrow-right-bold-box mdi-18px mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiArrowRightBoldBox"
:size="18"
/>
<span v-html="highlightWord(func.name)" />
</a>
</li>
@ -199,7 +250,11 @@
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler}"
@contextmenu.prevent="showMiscFolderContext($event, 'scheduler')"
>
<i class="misc-icon mdi mdi-18px mdi-folder-clock mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiFolderClock"
:size="18"
/>
{{ t('database.scheduler', 2) }}
</summary>
<div class="accordion-body">
@ -216,7 +271,11 @@
>
<a class="table-name">
<div v-if="checkLoadingStatus(scheduler.name, 'scheduler')" class="icon loading mr-1" />
<i v-else class="table-icon mdi mdi-calendar-clock mdi-18px mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiCalendarClock"
:size="18"
/>
<span v-html="highlightWord(scheduler.name)" />
</a>
<div
@ -224,7 +283,11 @@
class="tooltip tooltip-left disabled-indicator"
:data-tooltip="t('general.disabled')"
>
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
<BaseIcon
class="misc-icon mr-1"
icon-name="mdiPause"
:size="18"
/>
</div>
</li>
</ul>
@ -243,6 +306,7 @@ import { storeToRefs } from 'pinia';
import { computed, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useSettingsStore } from '@/stores/settings';
import { Breadcrumb, useWorkspacesStore, WorkspaceStructure } from '@/stores/workspaces';
@ -594,7 +658,7 @@ defineExpose({ selectSchema, schemaAccordion });
display: flex;
align-items: center;
height: 100%;
opacity: 0.2;
opacity: 0.4;
transition: opacity 0.2s;
&:hover {

97
src/renderer/components/WorkspaceExploreBarSchemaContext.vue
View File

@ -4,57 +4,101 @@
@close-context="closeContext"
>
<div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ t('general.add') }}</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiPlus"
:size="18"
/> {{ t('general.add') }}</span>
<BaseIcon
class="text-light ml-1"
icon-name="mdiChevronRight"
:size="18"
/>
<div class="context-submenu">
<div
v-if="workspace.customizations.tableAdd"
class="context-element"
@click="openCreateTableTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table text-light pr-1" /> {{ t('database.table') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTable"
:size="18"
/> {{ t('database.table') }}</span>
</div>
<div
v-if="workspace.customizations.viewAdd"
class="context-element"
@click="openCreateViewTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-eye text-light pr-1" /> {{ t('database.view') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableEye"
:size="18"
/> {{ t('database.view') }}</span>
</div>
<div
v-if="workspace.customizations.triggerAdd"
class="context-element"
@click="openCreateTriggerTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-cog text-light pr-1" /> {{ t('database.trigger', 1) }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableCog"
:size="18"
/> {{ t('database.trigger', 1) }}</span>
</div>
<div
v-if="workspace.customizations.routineAdd"
class="context-element"
@click="openCreateRoutineTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-sync-circle pr-1" /> {{ t('database.storedRoutine', 1) }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiSyncCircle"
:size="18"
/> {{ t('database.storedRoutine', 1) }}</span>
</div>
<div
v-if="workspace.customizations.functionAdd"
class="context-element"
@click="openCreateFunctionTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-arrow-right-bold-box pr-1" /> {{ t('database.function', 1) }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiArrowRightBoldBox"
:size="18"
/> {{ t('database.function', 1) }}</span>
</div>
<div
v-if="workspace.customizations.triggerFunctionAdd"
class="context-element"
@click="openCreateTriggerFunctionTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-cog-clockwise pr-1" /> {{ t('database.triggerFunction', 1) }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiCogClockwise"
:size="18"
/> {{ t('database.triggerFunction', 1) }}</span>
</div>
<div
v-if="workspace.customizations.schedulerAdd"
class="context-element"
@click="openCreateSchedulerTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-calendar-clock text-light pr-1" /> {{ t('database.scheduler', 1) }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiCalendarClock"
:size="18"
/> {{ t('database.scheduler', 1) }}</span>
</div>
</div>
</div>
@ -63,28 +107,48 @@
class="context-element"
@click="showExportSchemaModal"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-database-export text-light pr-1" /> {{ t('database.export') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDatabaseExport"
:size="18"
/> {{ t('database.export') }}</span>
</div>
<div
v-if="workspace.customizations.schemaImport"
class="context-element"
@click="initImport"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-database-import text-light pr-1" /> {{ t('database.import') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDatabaseImport"
:size="18"
/> {{ t('database.import') }}</span>
</div>
<div
v-if="workspace.customizations.schemaEdit"
class="context-element"
@click="showEditModal"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-database-edit text-light pr-1" /> {{ t('database.editSchema') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDatabaseEdit"
:size="18"
/> {{ t('database.editSchema') }}</span>
</div>
<div
v-if="workspace.customizations.schemaDrop"
class="context-element"
@click="showDeleteModal"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-database-remove text-light pr-1" /> {{ t('database.deleteSchema') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDatabaseRemove"
:size="18"
/> {{ t('database.deleteSchema') }}</span>
</div>
<ConfirmModal
@ -94,7 +158,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-remove mr-1" />
<BaseIcon
class="text-light mr-1"
icon-name="mdiDatabaseRemove"
:size="24"
/>
<span class="cut-text">{{ t('database.deleteSchema') }}</span>
</div>
</template>
@ -125,6 +193,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalEditSchema from '@/components/ModalEditSchema.vue';
import ModalImportSchema from '@/components/ModalImportSchema.vue';
import Application from '@/ipc-api/Application';

55
src/renderer/components/WorkspaceExploreBarTableContext.vue
View File

@ -8,38 +8,68 @@
class="context-element"
@click="openTableSettingTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-wrench-cog text-light pr-1" /> {{ t('application.settings') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiWrenchCog"
:size="18"
/> {{ t('application.settings') }}</span>
</div>
<div
v-if="selectedTable && selectedTable.type === 'table' && customizations.schemaExport"
class="context-element"
@click="showTableExportModal"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-arrow-right text-light pr-1" /> {{ t('database.exportTable') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableArrowRight"
:size="18"
/> {{ t('database.exportTable') }}</span>
</div>
<div
v-if="selectedTable && selectedTable.type === 'view' && customizations.viewSettings"
class="context-element"
@click="openViewSettingTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-wrench-cog text-light pr-1" /> {{ t('application.settings') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiWrenchCog"
:size="18"
/> {{ t('application.settings') }}</span>
</div>
<div
v-if="selectedTable && selectedTable.type === 'table' && customizations.tableDuplicate"
class="context-element"
@click="duplicateTable"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-multiple text-light pr-1" /> {{ t('database.duplicateTable') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableMultiple"
:size="18"
/> {{ t('database.duplicateTable') }}</span>
</div>
<div
v-if="selectedTable && selectedTable.type === 'table'"
class="context-element"
@click="showEmptyModal"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-table-off text-light pr-1" /> {{ t('database.emptyTable') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableOff"
:size="18"
/> {{ t('database.emptyTable') }}</span>
</div>
<div class="context-element" @click="showDeleteModal">
<span class="d-flex"><i class="mdi mdi-18px mdi-table-remove text-light pr-1" /> {{ t('database.deleteTable') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiTableRemove"
:size="18"
/> {{ t('database.deleteTable') }}</span>
</div>
<ConfirmModal
@ -49,7 +79,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-table-off mr-1" /> <span class="cut-text">{{ t('database.emptyTable') }}</span>
<BaseIcon
class="text-light mr-1"
icon-name="mdiTableOff"
:size="24"
/> <span class="cut-text">{{ t('database.emptyTable') }}</span>
</div>
</template>
<template #body>
@ -70,7 +104,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-table-remove mr-1" />
<BaseIcon
class="text-light mr-1"
icon-name="mdiTableRemove"
:size="24"
/>
<span class="cut-text">{{ selectedTable.type === 'table' ? t('database.deleteTable') : t('database.deleteView') }}</span>
</div>
</template>
@ -90,6 +128,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import Tables from '@/ipc-api/Tables';
import { useNotificationsStore } from '@/stores/notifications';
import { useSchemaExportStore } from '@/stores/schemaExport';

8
src/renderer/components/WorkspaceQueryConsole.vue
View File

@ -35,7 +35,12 @@
@close-context="isContext = false"
>
<div class="context-element" @click="copyQuery">
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiContentCopy"
:size="18"
/> {{ t('general.copy') }}</span>
</div>
</BaseContextMenu>
</template>
@ -46,6 +51,7 @@ import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useConsoleStore } from '@/stores/console';
const { t } = useI18n();

25
src/renderer/components/WorkspaceTabNewFunction.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,20 +22,32 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
<div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showParamsModal">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span>{{ t('database.parameters') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -182,6 +198,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

25
src/renderer/components/WorkspaceTabNewRoutine.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,20 +22,32 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
<div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showParamsModal">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span>{{ t('database.parameters') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -154,6 +170,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

25
src/renderer/components/WorkspaceTabNewScheduler.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,19 +22,31 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
<div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showTimingModal">
<i class="mdi mdi-24px mdi-timer mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiTimer"
:size="24"
/>
<span>{{ t('database.timing') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -131,6 +147,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

38
src/renderer/components/WorkspaceTabNewTable.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
@ -30,7 +38,11 @@
:title="t('database.addNewField')"
@click="addField"
>
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlaylistPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -39,7 +51,12 @@
:title="t('database.manageIndexes')"
@click="showIntdexesModal"
>
<i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKey"
rotate="45deg"
:size="24"
/>
<span>{{ t('database.indexes') }}</span>
</button>
<button
@ -48,13 +65,21 @@
:title="t('database.manageForeignKeys')"
@click="showForeignModal"
>
<i class="mdi mdi-24px mdi-key-link mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyLink"
:size="24"
/>
<span>{{ t('database.foreignKeys') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -169,6 +194,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue';

8
src/renderer/components/WorkspaceTabNewTableEmptyState.vue
View File

@ -5,7 +5,11 @@
</p>
<div class="empty-action">
<button class="btn btn-gray d-flex" @click="emit('new-field')">
<i class="mdi mdi-24px mdi-playlist-plus mr-2" />
<BaseIcon
class="mr-2"
icon-name="mdiPlaylistPlus"
:size="24"
/>
{{ t('database.addNewField') }}
</button>
</div>
@ -15,6 +19,8 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();
const emit = defineEmits(['new-field']);
</script>

19
src/renderer/components/WorkspaceTabNewTrigger.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

22
src/renderer/components/WorkspaceTabNewTriggerFunction.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,10 +22,23 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
</div>
<div class="container">
@ -99,6 +116,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

19
src/renderer/components/WorkspaceTabNewView.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -109,6 +121,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

31
src/renderer/components/WorkspaceTabPropsFunction.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
@ -29,17 +37,29 @@
:disabled="isChanged"
@click="runFunctionCheck"
>
<i class="mdi mdi-24px mdi-play mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlay"
:size="24"
/>
<span>{{ t('general.run') }}</span>
</button>
<button class="btn btn-dark btn-sm" @click="showParamsModal">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span>{{ t('database.parameters') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -199,6 +219,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue';

40
src/renderer/components/WorkspaceTabPropsFunctionParamsModal.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span class="cut-text">{{ t('database.parameters') }} "{{ func }}"</span>
</div>
</template>
@ -19,7 +23,11 @@
<div class="panel-header pt-0 pl-0">
<div class="d-flex">
<button class="btn btn-dark btn-sm d-flex" @click="addParameter">
<i class="mdi mdi-24px mdi-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -28,7 +36,11 @@
:disabled="!isChanged"
@click.prevent="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
@ -43,7 +55,12 @@
>
<div class="tile-icon">
<div>
<i class="mdi mdi-hexagon mdi-24px" :class="typeClass(param.type)" />
<BaseIcon
class="mt-2"
icon-name="mdiHexagon"
:class="typeClass(param.type)"
:size="24"
/>
</div>
</div>
<div class="tile-content">
@ -58,7 +75,11 @@
:title="t('general.delete')"
@click.prevent="removeParameter(param._antares_id)"
>
<i class="mdi mdi-close" />
<BaseIcon
icon-name="mdiClose"
:size="18"
class="mt-2"
/>
</button>
</div>
</div>
@ -147,7 +168,11 @@
</form>
<div v-if="!parametersProxy.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-dots-horizontal mdi-48px" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="48"
/>
</div>
<p class="empty-title h5">
{{ t('database.thereAreNoParameters') }}
@ -170,6 +195,7 @@ import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n();
@ -307,7 +333,7 @@ onUnmounted(() => {
overflow: auto;
}
.remove-field .mdi {
.remove-field svg {
pointer-events: none;
}
</style>

31
src/renderer/components/WorkspaceTabPropsRoutine.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
@ -29,17 +37,29 @@
:disabled="isChanged"
@click="runRoutineCheck"
>
<i class="mdi mdi-24px mdi-play mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlay"
:size="24"
/>
<span>{{ t('general.run') }}</span>
</button>
<button class="btn btn-dark btn-sm" @click="showParamsModal">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span>{{ t('database.parameters') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -171,6 +191,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue';

40
src/renderer/components/WorkspaceTabPropsRoutineParamsModal.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-dots-horizontal mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="24"
/>
<span class="cut-text">{{ t('database.parameters') }} "{{ routine }}"</span>
</div>
</template>
@ -19,7 +23,11 @@
<div class="panel-header pt-0 pl-0">
<div class="d-flex">
<button class="btn btn-dark btn-sm d-flex" @click="addParameter">
<i class="mdi mdi-24px mdi-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -28,7 +36,11 @@
:disabled="!isChanged"
@click.prevent="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
@ -43,7 +55,12 @@
>
<div class="tile-icon">
<div>
<i class="mdi mdi-hexagon mdi-24px" :class="typeClass(param.type)" />
<BaseIcon
class="mt-2"
icon-name="mdiHexagon"
:class="typeClass(param.type)"
:size="24"
/>
</div>
</div>
<div class="tile-content">
@ -58,7 +75,11 @@
:title="t('general.delete')"
@click.prevent="removeParameter(param._antares_id)"
>
<i class="mdi mdi-close" />
<BaseIcon
icon-name="mdiClose"
:size="18"
class="mt-2"
/>
</button>
</div>
</div>
@ -135,7 +156,11 @@
</form>
<div v-if="!parametersProxy.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-dots-horizontal mdi-48px" />
<BaseIcon
class="mr-1"
icon-name="mdiDotsHorizontal"
:size="48"
/>
</div>
<p class="empty-title h5">
{{ t('database.thereAreNoParameters') }}
@ -158,6 +183,7 @@ import { computed, onMounted, onUnmounted, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n();
@ -295,7 +321,7 @@ onUnmounted(() => {
overflow: auto;
}
.remove-field .mdi {
.remove-field svg {
pointer-events: none;
}
</style>

25
src/renderer/components/WorkspaceTabPropsScheduler.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,19 +22,31 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
<div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showTimingModal">
<i class="mdi mdi-24px mdi-timer mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiTimer"
:size="24"
/>
<span>{{ t('database.timing') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -129,6 +145,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

25
src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-timer mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiTimer"
:size="24"
/>
<span class="cut-text">{{ t('database.timing') }} "{{ localOptions.name }}"</span>
</div>
</template>
@ -76,7 +80,11 @@
class="form-input"
>
<span class="input-group-addon p-vcentered">
<i class="form-icon mdi mdi-calendar" />
<BaseIcon
icon-name="mdiCalendar"
:size="18"
class="form-icon"
/>
</span>
</div>
</div>
@ -97,7 +105,11 @@
class="form-input"
>
<span class="input-group-addon p-vcentered">
<i class="form-icon mdi mdi-calendar" />
<BaseIcon
icon-name="mdiCalendar"
:size="18"
class="form-icon"
/>
</span>
</div>
</div>
@ -115,7 +127,11 @@
class="form-input"
>
<span class="input-group-addon p-vcentered">
<i class="form-icon mdi mdi-calendar" />
<BaseIcon
icon-name="mdiCalendar"
:size="18"
class="form-icon"
/>
</span>
</div>
</div>
@ -141,6 +157,7 @@ import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n();

44
src/renderer/components/WorkspaceTabPropsTable.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
@ -30,7 +38,11 @@
:title="t('database.addNewField')"
@click="addField"
>
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlaylistPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -39,7 +51,12 @@
:title="t('database.manageIndexes')"
@click="showIntdexesModal"
>
<i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKey"
rotate="45deg"
:size="24"
/>
<span>{{ t('database.indexes') }}</span>
</button>
<button
@ -48,7 +65,11 @@
:title="t('database.manageIndexes')"
@click="showForeignModal"
>
<i class="mdi mdi-24px mdi-key-link mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyLink"
:size="24"
/>
<span>{{ t('database.foreignKeys') }}</span>
</button>
@ -60,13 +81,21 @@
:disabled="isSaving"
@click="showDdlModal"
>
<i class="mdi mdi-24px mdi-code-tags mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiCodeTags"
:size="24"
/>
<span>{{ t('database.ddl') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -200,6 +229,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import WorkspaceTabPropsTableDdlModal from '@/components/WorkspaceTabPropsTableDdlModal.vue';

59
src/renderer/components/WorkspaceTabPropsTableContext.vue
View File

@ -4,8 +4,17 @@
@close-context="closeContext"
>
<div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ t('database.createNewIndex') }}</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiKeyPlus"
:size="18"
/> {{ t('database.createNewIndex') }}</span>
<BaseIcon
class="text-light mt-1"
icon-name="mdiChevronRight"
:size="18"
/>
<div class="context-submenu">
<div
v-for="index in indexTypes"
@ -14,13 +23,29 @@
:class="{'disabled': index === 'PRIMARY' && hasPrimary}"
@click="addNewIndex(index)"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index}`" /> {{ index }}</span>
<span class="d-flex">
<BaseIcon
class="column-key pr-1 mt-1 mr-1"
:class="`key-${index}`"
icon-name="mdiKey"
rotate="45deg"
:size="20"
/> {{ index }}</span>
</div>
</div>
</div>
<div v-if="indexes.length" class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-key-arrow-right text-light pr-1" /> {{ t('database.addToIndex') }}</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiKeyArrowRight"
:size="18"
/> {{ t('database.addToIndex') }}</span>
<BaseIcon
class="text-light mt-1"
icon-name="mdiChevronRight"
:size="18"
/>
<div class="context-submenu">
<div
v-for="index in indexes"
@ -29,15 +54,32 @@
:class="{'disabled': index.fields.includes(selectedField.name)}"
@click="addToIndex(index._antares_id)"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-key column-key pr-1" :class="`key-${index.type}`" /> {{ index.name }}</span>
<span class="d-flex">
<BaseIcon
class="column-key pr-1 mt-1 mr-1"
:class="`key-${index.type}`"
icon-name="mdiKey"
rotate="45deg"
:size="20"
/> {{ index.name }}</span>
</div>
</div>
</div>
<div class="context-element" @click="duplicateField">
<span class="d-flex"><i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiContentDuplicate"
:size="18"
/> {{ t('general.duplicate') }}</span>
</div>
<div class="context-element" @click="deleteField">
<span class="d-flex"><i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('database.deleteField') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDelete"
:size="18"
/> {{ t('database.deleteField') }}</span>
</div>
</BaseContextMenu>
</template>
@ -48,6 +90,7 @@ import { computed, Prop } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

7
src/renderer/components/WorkspaceTabPropsTableDdlModal.vue
View File

@ -9,7 +9,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-code-tags mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiCodeTags"
:size="24"
/>
<span class="cut-text">{{ t('database.ddl') }} "{{ table }}"</span>
</div>
</template>
@ -32,6 +36,7 @@ import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseTextEditor from '@/components/BaseTextEditor.vue';
import Tables from '@/ipc-api/Tables';
import { useNotificationsStore } from '@/stores/notifications';

58
src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
View File

@ -8,7 +8,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-key-link mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyLink"
:size="24"
/>
<span class="cut-text">{{ t('database.foreignKeys') }} "{{ table }}"</span>
</div>
</template>
@ -19,7 +23,11 @@
<div class="panel-header pt-0 pl-0">
<div class="d-flex">
<button class="btn btn-dark btn-sm d-flex" @click="addForeign">
<i class="mdi mdi-24px mdi-link-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiLinkPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -28,7 +36,11 @@
:disabled="!isChanged"
@click.prevent="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
@ -43,7 +55,11 @@
>
<div class="tile-icon">
<div>
<i class="mdi mdi-key-link mdi-24px" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyLink"
:size="24"
/>
</div>
</div>
<div class="tile-content">
@ -51,14 +67,26 @@
{{ foreign.constraintName }}
</div>
<small class="tile-subtitle text-gray d-flex">
<i class="mdi mdi-link-variant mr-1" />
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiLinkVariant"
:size="18"
/>
<div class="fk-details-wrapper">
<span v-if="foreign.table !== ''" class="fk-details">
<i class="mdi mdi-table mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiTable"
:size="14"
/>
<span>{{ foreign.table }}.{{ foreign.field }}</span>
</span>
<span v-if="foreign.refTable !== ''" class="fk-details">
<i class="mdi mdi-table mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiTable"
:size="14"
/>
<span>{{ foreign.refTable }}.{{ foreign.refField }}</span>
</span>
</div>
@ -70,7 +98,11 @@
:title="t('general.delete')"
@click.prevent="removeIndex(foreign._antares_id)"
>
<i class="mdi mdi-close" />
<BaseIcon
icon-name="mdiClose"
:size="18"
class="mt-2"
/>
</button>
</div>
</div>
@ -171,7 +203,11 @@
<div v-if="!foreignProxy.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-key-link mdi-48px" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyLink"
:size="48"
/>
</div>
<p class="empty-title h5">
{{ t('database.thereAreNoForeign') }}
@ -195,6 +231,7 @@ import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import Tables from '@/ipc-api/Tables';
import { useNotificationsStore } from '@/stores/notifications';
@ -383,7 +420,7 @@ onUnmounted(() => {
overflow: auto;
}
.remove-field .mdi {
.remove-field svg {
pointer-events: none;
}
@ -394,6 +431,7 @@ onUnmounted(() => {
display: flex;
line-height: 1;
align-items: baseline;
align-items: center;
> span {
overflow: hidden;

41
src/renderer/components/WorkspaceTabPropsTableIndexesModal.vue
View File

@ -8,7 +8,12 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKey"
rotate="45deg"
:size="24"
/>
<span class="cut-text">{{ t('database.indexes') }} "{{ table }}"</span>
</div>
</template>
@ -19,7 +24,11 @@
<div class="panel-header pt-0 pl-0">
<div class="d-flex">
<button class="btn btn-dark btn-sm d-flex" @click="addIndex">
<i class="mdi mdi-24px mdi-key-plus mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyPlus"
:size="24"
/>
<span>{{ t('general.add') }}</span>
</button>
<button
@ -28,7 +37,11 @@
:disabled="!isChanged"
@click.prevent="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
@ -43,7 +56,12 @@
>
<div class="tile-icon">
<div>
<i class="mdi mdi-key mdi-24px column-key" :class="`key-${index.type}`" />
<BaseIcon
class="mt-2 column-key"
icon-name="mdiKey"
:class="`key-${index.type}`"
:size="24"
/>
</div>
</div>
<div class="tile-content">
@ -58,7 +76,11 @@
:title="t('general.delete')"
@click.prevent="removeIndex(index._antares_id)"
>
<i class="mdi mdi-close" />
<BaseIcon
icon-name="mdiClose"
:size="18"
class="mt-2"
/>
</button>
</div>
</div>
@ -116,7 +138,11 @@
</form>
<div v-if="!indexesProxy.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-key-outline mdi-48px" />
<BaseIcon
class="mr-1"
icon-name="mdiKeyOutline"
:size="48"
/>
</div>
<p class="empty-title h5">
{{ t('database.thereAreNoIndexes') }}
@ -140,6 +166,7 @@ import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n();
@ -270,7 +297,7 @@ onUnmounted(() => {
overflow: auto;
}
.remove-field .mdi {
.remove-field svg {
pointer-events: none;
}
</style>

45
src/renderer/components/WorkspaceTabPropsTableRow.vue
View File

@ -2,25 +2,43 @@
<div class="tr" @contextmenu.prevent="!editingField ? emit('contextmenu', $event, localRow._antares_id) : null">
<div class="td p-0" tabindex="0">
<div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'">
<i v-if="customizations.sortableFields" class="mdi mdi-drag-horizontal row-draggable-icon" />
<BaseIcon
v-if="customizations.sortableFields"
icon-name="mdiDragHorizontal"
:size="22"
class="row-draggable-icon"
/>
{{ localRow.order }}
</div>
</div>
<div class="td p-0" tabindex="0">
<div class="text-center">
<i
<div class="text-center" :style="'display: flex; justify-content: center; align-items: center'">
<div
v-for="(index, i) in indexes"
:key="`${index.name}-${i}`"
:title="index.type"
class="d-inline-block mdi mdi-key column-key c-help"
:class="`key-${index.type}`"
/>
<i
class="p-vcentered"
>
<BaseIcon
icon-name="mdiKey"
rotate="45deg"
:size="14"
class="d-inline-block column-key c-help"
:class="`key-${index.type}`"
/>
</div>
<div
v-for="foreign in foreigns"
:key="foreign"
:title="foreign"
class="d-inline-block mdi mdi-key-link c-help"
/>
class="p-vcentered"
>
<BaseIcon
class="d-inline-block c-help"
icon-name="mdiKeyLink"
:size="16"
/>
</div>
</div>
</div>
<div class="td p-0" tabindex="0">
@ -227,7 +245,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-playlist-edit mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlaylistEdit"
:size="24"
/>
<span class="cut-text">{{ t('database.default') }} "{{ row.name }}"</span>
</div>
</template>
@ -331,6 +353,7 @@ import { computed, nextTick, onMounted, Prop, PropType, Ref, ref, watch } from '
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import { useWorkspacesStore } from '@/stores/workspaces';
@ -558,7 +581,7 @@ const editOFF = () => {
const checkLengthScale = (e: KeyboardEvent & { target: HTMLInputElement }) => {
e = (e) || window.event as KeyboardEvent & { target: HTMLInputElement };
const charCode = (e.which) ? e.which : e.code;
const charCode = (e.which) ? e.which : Number(e.code);
if (((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 44) || (charCode === 44 && e.target.value.includes(',')))
e.preventDefault();

19
src/renderer/components/WorkspaceTabPropsTrigger.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

22
src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,10 +22,23 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
</div>
<div class="container">
@ -87,6 +104,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

19
src/renderer/components/WorkspaceTabPropsView.vue
View File

@ -9,7 +9,11 @@
:class="{'loading':isSaving}"
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiContentSave"
:size="24"
/>
<span>{{ t('general.save') }}</span>
</button>
<button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -107,6 +119,7 @@ import { ipcRenderer } from 'electron';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue';

86
src/renderer/components/WorkspaceTabQuery.vue
View File

@ -27,7 +27,11 @@
:title="t('general.cancel')"
@click="killTabQuery()"
>
<i class="mdi mdi-24px mdi-window-close" />
<BaseIcon
class="mr-1"
icon-name="mdiWindowCLose"
:size="24"
/>
<span class="d-invisible pr-1">{{ t('general.run') }}</span>
</button>
<button
@ -37,7 +41,11 @@
:disabled="!query"
@click="runQuery(query)"
>
<i class="mdi mdi-24px mdi-play pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiPlay"
:size="24"
/>
<span>{{ t('general.run') }}</span>
</button>
</div>
@ -47,7 +55,11 @@
:class="{'loading':isQuering}"
@click="commitTab()"
>
<i class="mdi mdi-24px mdi-cube-send pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiCubeSend"
:size="24"
/>
<span>{{ t('database.commit') }}</span>
</button>
<button
@ -56,7 +68,11 @@
:class="{'loading':isQuering}"
@click="rollbackTab()"
>
<i class="mdi mdi-24px mdi-undo-variant pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiUndoVariant"
:size="24"
/>
<span>{{ t('database.rollback') }}</span>
</button>
<button
@ -64,7 +80,11 @@
:disabled="!query || isQuering"
@click="clear()"
>
<i class="mdi mdi-24px mdi-delete-sweep pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiDeleteSweep"
:size="24"
/>
<span>{{ t('general.clear') }}</span>
</button>
@ -75,7 +95,11 @@
:disabled="!query || isQuering"
@click="beautify()"
>
<i class="mdi mdi-24px mdi-brush pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiBrush"
:size="24"
/>
<span>{{ t('general.format') }}</span>
</button>
<button
@ -83,7 +107,11 @@
:disabled="isQuering"
@click="openHistoryModal()"
>
<i class="mdi mdi-24px mdi-history pr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiHistory"
:size="24"
/>
<span>{{ t('general.history') }}</span>
</button>
<div class="dropdown table-dropdown pr-2">
@ -92,9 +120,17 @@
class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
tabindex="0"
>
<i class="mdi mdi-24px mdi-file-export mr-1" />
<BaseIcon
class="mr-1"
icon-name="mdiFileExport"
:size="24"
/>
<span>{{ t('database.export') }}</span>
<i class="mdi mdi-24px mdi-menu-down" />
<BaseIcon
class="mr-1"
icon-name="mdiMenuDown"
:size="24"
/>
</button>
<ul class="menu text-left">
<li class="menu-item">
@ -112,7 +148,11 @@
</ul>
</div>
<div class="input-group pr-2" :title="t('database.commitMode')">
<i class="input-group-addon addon-sm mdi mdi-24px mdi-source-commit p-0" />
<BaseIcon
class="input-group-addon addon-sm p-0"
icon-name="mdiSourceCommit"
:size="28"
/>
<BaseSelect
v-model="autocommit"
:options="[{value: true, label: t('database.autoCommit')}, {value: false, label: t('database.manualCommit')}]"
@ -128,24 +168,41 @@
class="d-flex"
:title="t('database.queryDuration')"
>
<i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ durationsCount / 1000 }}s</b>
<BaseIcon
class="mr-1 mt-1"
icon-name="mdiTimerSand"
rotate="180deg"
:size="16"
/> <b>{{ durationsCount / 1000 }}s</b>
</div>
<div
v-if="resultsCount"
class="d-flex"
:title="t('general.results')"
>
<i class="mdi mdi-equal pr-1" /> <b>{{ resultsCount.toLocaleString() }}</b>
<BaseIcon
class="mr-1 mt-1"
icon-name="mdiEqual"
:size="16"
/> <b>{{ resultsCount.toLocaleString() }}</b>
</div>
<div
v-if="hasAffected"
class="d-flex"
:title="t('database.affectedRows')"
>
<i class="mdi mdi-target pr-1" /> <b>{{ affectedCount }}</b>
<BaseIcon
class="mr-1 mt-1"
icon-name="mdiTarget"
:size="16"
/> <b>{{ affectedCount }}</b>
</div>
<div class="input-group" :title="t('database.schema')">
<i class="input-group-addon addon-sm mdi mdi-24px mdi-database" />
<BaseIcon
class="input-group-addon addon-sm p-0 px-1"
icon-name="mdiDatabase"
:size="28"
/>
<BaseSelect
v-model="selectedSchema"
@ -190,6 +247,7 @@ import { format } from 'sql-formatter';
import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import ModalHistory from '@/components/ModalHistory.vue';

50
src/renderer/components/WorkspaceTabQueryTable.vue
View File

@ -45,19 +45,28 @@
>
<div ref="columnResize" class="column-resizable">
<div class="table-column-title" @click="sort(field.name)">
<i
v-if="field.key"
class="mdi mdi-key column-key c-help"
:class="`key-${field.key}`"
:title="keyName(field.key)"
/>
<div v-if="field.key" :title="keyName(field.key)">
<BaseIcon
icon-name="mdiKey"
rotate="45deg"
:size="14"
class="column-key c-help mt-1 mr-1"
:class="`key-${field.key}`"
/>
</div>
<span>{{ field.alias || field.name }}</span>
<i
<BaseIcon
v-if="isSortable && currentSort === field.name || currentSort === `${field.table}.${field.name}`"
class="mdi sort-icon"
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'"
:icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
:size="18"
class="sort-icon ml-1"
/>
<BaseIcon
v-else
icon-name="mdiMinus"
:size="18"
class="sort-icon d-invisible"
/>
<i v-else class="mdi sort-icon mdi-minus d-invisible" />
</div>
</div>
</div>
@ -101,7 +110,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-delete mr-1" />
<BaseIcon
icon-name="mdiDelete"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.deleteRows', selectedRows.length) }}</span>
</div>
</template>
@ -119,7 +132,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-file-export mr-1" />
<BaseIcon
icon-name="mdiFileExport"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('database.sqlExportOptions') }}</span>
</div>
</template>
@ -160,7 +177,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-file-export mr-1" />
<BaseIcon
icon-name="mdiFileExport"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('application.csvExportOptions') }}</span>
</div>
</template>
@ -241,6 +262,7 @@ import { Component, computed, nextTick, onMounted, onUnmounted, onUpdated, Prop,
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import TableContext from '@/components/WorkspaceTabQueryTableContext.vue';
@ -555,6 +577,8 @@ const copyRow = (format: string) => {
if (selectedRows.value.length === 1) {
const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
const rowToCopy = unproxify(row);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete rowToCopy._antares_id;
contentToCopy = rowToCopy;
}

81
src/renderer/components/WorkspaceTabQueryTableContext.vue
View File

@ -4,8 +4,17 @@
@close-context="closeContext"
>
<div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<span class="d-flex">
<BaseIcon
icon-name="mdiContentCopy"
class="mr-1 mt-1"
:size="18"
/> {{ t('general.copy') }}</span>
<BaseIcon
icon-name="mdiChevronRight"
class="mt-1 text-light"
:size="18"
/>
<div class="context-submenu">
<div
v-if="selectedRows.length === 1"
@ -13,32 +22,57 @@
@click="copyCell"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-numeric-0 mdi-rotate-90 text-light pr-1" /> {{ t('database.cell', 1) }}
<BaseIcon
icon-name="mdiNumeric0"
class="mr-1 mt-1 text-light"
rotate="90deg"
:size="18"
/> {{ t('database.cell', 1) }}
</span>
</div>
<div class="context-element" @click="copyRow('html')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} ({{ t('database.table') }})
<BaseIcon
icon-name="mdiTableRow"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.row', selectedRows.length) }} ({{ t('database.table') }})
</span>
</div>
<div class="context-element" @click="copyRow('json')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (JSON)
<BaseIcon
icon-name="mdiTableRow"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.row', selectedRows.length) }} (JSON)
</span>
</div>
<div class="context-element" @click="copyRow('csv')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (CSV)
<BaseIcon
icon-name="mdiTableRow"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.row', selectedRows.length) }} (CSV)
</span>
</div>
<div class="context-element" @click="copyRow('php')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (PHP)
<BaseIcon
icon-name="mdiTableRow"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.row', selectedRows.length) }} (PHP)
</span>
</div>
<div class="context-element" @click="copyRow('sql')">
<span class="d-flex">
<i class="mdi mdi-18px mdi-table-row text-light pr-1" /> {{ t('database.row', selectedRows.length) }} (SQL INSERT)
<BaseIcon
icon-name="mdiTableRow"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.row', selectedRows.length) }} (SQL INSERT)
</span>
</div>
</div>
@ -49,7 +83,11 @@
@click="duplicateRow"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-content-duplicate text-light pr-1" /> {{ t('general.duplicate') }}
<BaseIcon
icon-name="mdiContentDuplicate"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('general.duplicate') }}
</span>
</div>
<div
@ -57,9 +95,17 @@
class="context-element"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-auto-fix text-light pr-1" /> {{ t('database.fillCell') }}
<BaseIcon
icon-name="mdiAutoFix"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.fillCell') }}
</span>
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" />
<BaseIcon
icon-name="mdiChevronRight"
class="mt-1 text-light"
:size="18"
/>
<div class="context-submenu">
<div
v-for="method in fakerMethods[fakerGroup]"
@ -79,7 +125,11 @@
@click="setNull"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-null text-light pr-1" /> {{ t('database.setNull') }}
<BaseIcon
icon-name="mdiNull"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.setNull') }}
</span>
</div>
<div
@ -88,7 +138,11 @@
@click="showConfirmModal"
>
<span class="d-flex">
<i class="mdi mdi-18px mdi-delete text-light pr-1" /> {{ t('database.deleteRows', selectedRows.length) }}
<BaseIcon
icon-name="mdiDelete"
class="mr-1 mt-1 text-light"
:size="18"
/> {{ t('database.deleteRows', selectedRows.length) }}
</span>
</div>
</BaseContextMenu>
@ -100,6 +154,7 @@ import { computed, Prop } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

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

@ -81,7 +81,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-playlist-edit mr-1" /> <span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
<BaseIcon
icon-name="mdiPlaylistEdit"
class="mr-1"
:size="24"
/> <span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
</div>
</template>
<template #body>
@ -129,7 +133,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-map mr-1" /> <span class="cut-text">"{{ editingField }}"</span>
<BaseIcon
icon-name="mdiMap"
class="mr-1"
:size="24"
/> <span class="cut-text">"{{ editingField }}"</span>
</div>
</template>
<template #body>
@ -144,7 +152,11 @@
>
<template #header>
<div class="d-flex">
<i class="mdi mdi-24px mdi-playlist-edit mr-1" />
<BaseIcon
icon-name="mdiPlaylistEdit"
class="mr-1"
:size="24"
/>
<span class="cut-text">{{ t('general.edit') }} "{{ editingField }}"</span>
</div>
</template>
@ -158,16 +170,24 @@
class="img-responsive p-centered bg-checkered"
>
<div v-else class="text-center">
<i class="mdi mdi-36px mdi-file" />
<BaseIcon icon-name="mdiFile" :size="36" />
</div>
<div class="editor-buttons mt-2">
<button class="btn btn-link btn-sm" @click="downloadFile">
<span>{{ t('general.download') }}</span>
<i class="mdi mdi-24px mdi-download ml-1" />
<BaseIcon
icon-name="mdiDownload"
class="ml-1"
:size="24"
/>
</button>
<button class="btn btn-link btn-sm" @click="prepareToDelete">
<span>{{ t('general.delete') }}</span>
<i class="mdi mdi-24px mdi-delete-forever ml-1" />
<BaseIcon
icon-name="mdiDeleteForever"
class="ml-1"
:size="24"
/>
</button>
</div>
</div>
@ -225,6 +245,7 @@ import { computed, nextTick, onBeforeUnmount, Prop, Ref, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseMap from '@/components/BaseMap.vue';
import BaseSelect from '@/components/BaseSelect.vue';
import TextEditor from '@/components/BaseTextEditor.vue';

55
src/renderer/components/WorkspaceTabTable.vue
View File

@ -11,11 +11,22 @@
:title="`${t('general.refresh')}`"
@click="reloadTable"
>
<i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" />
<i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" />
<BaseIcon
v-if="!+autorefreshTimer"
class="mr-1"
icon-name="mdiRefresh"
:size="24"
/>
<BaseIcon
v-else
class="mr-1"
icon-name="mdiHistory"
flip="horizontal"
:size="24"
/>
</button>
<div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0">
<i class="mdi mdi-24px mdi-menu-down" />
<BaseIcon icon-name="mdiMenuDown" :size="24" />
</div>
<div class="menu px-3">
<span>{{ t('general.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span>
@ -38,7 +49,7 @@
:title="t('application.previousResultsPage')"
@click="pageChange('prev')"
>
<i class="mdi mdi-24px mdi-skip-previous" />
<BaseIcon icon-name="mdiSkipPrevious" :size="24" />
</button>
<div class="dropdown" :class="{'active': isPageMenu}">
<div @click="openPageMenu">
@ -64,7 +75,7 @@
:title="t('application.nextResultsPage')"
@click="pageChange('next')"
>
<i class="mdi mdi-24px mdi-skip-next" />
<BaseIcon icon-name="mdiSkipNext" :size="24" />
</button>
</div>
@ -77,7 +88,7 @@
:class="{'btn-primary': isSearch, 'btn-dark': !isSearch}"
@click="isSearch = !isSearch"
>
<i class="mdi mdi-24px mdi-magnify" />
<BaseIcon icon-name="mdiMagnify" :size="24" />
</button>
<button
v-if="isTable"
@ -85,7 +96,11 @@
:disabled="isQuering"
@click="showFakerModal()"
>
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
<BaseIcon
icon-name="mdiPlaylistPlus"
class="mr-1"
:size="24"
/>
<span>{{ t('database.insertRow', 2) }}</span>
</button>
@ -95,9 +110,13 @@
class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
tabindex="0"
>
<i class="mdi mdi-24px mdi-file-export mr-1" />
<BaseIcon
icon-name="mdiFileExport"
class="mr-1"
:size="24"
/>
<span>{{ t('database.export') }}</span>
<i class="mdi mdi-24px mdi-menu-down" />
<BaseIcon icon-name="mdiMenuDown" :size="24" />
</button>
<ul class="menu text-left">
<li class="menu-item">
@ -123,7 +142,7 @@
:title="t('application.settings')"
@click="openTableSettingTab()"
>
<i class="mdi mdi-24px mdi-cog" />
<BaseIcon icon-name="mdiCog" :size="24" />
<!-- <span>{{ t('application.settings') }}</span> -->
</button>
</div>
@ -133,7 +152,12 @@
class="d-flex"
:title="t('database.queryDuration')"
>
<i class="mdi mdi-timer-sand mdi-rotate-180 pr-1" /> <b>{{ results[0].duration / 1000 }}s</b>
<BaseIcon
class="mr-1 mt-1"
icon-name="mdiTimerSand"
rotate="180deg"
:size="16"
/> <b>{{ results[0].duration / 1000 }}s</b>
</div>
<div v-if="results.length && results[0].rows">
{{ t('general.results') }}: <b>{{ localeString(results[0].rows.length) }}</b>
@ -147,7 +171,11 @@
</b>
</div>
<div class="d-flex" :title="t('database.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
<BaseIcon
class="mt-1 mr-1"
icon-name="mdiDatabase"
:size="18"
/><b>{{ schema }}</b>
</div>
</div>
</div>
@ -163,7 +191,7 @@
<BaseLoader v-if="isQuering" />
<div v-if="!isQuering && !results[0]?.rows.length" class="empty">
<div class="empty-icon">
<i class="mdi mdi-48px mdi-island" />
<BaseIcon icon-name="mdiIsland" :size="56" />
</div>
<p class="h4 empty-subtitle">
{{ t('database.noResultsPresent') }}
@ -206,6 +234,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue';
import ModalFakerRows from '@/components/ModalFakerRows.vue';
import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable.vue';

13
src/renderer/components/WorkspaceTabTableFilters.vue
View File

@ -43,7 +43,11 @@
type="button"
@click="removeRow(index)"
>
<i class="mdi mdi-minus-circle-outline" />
<BaseIcon
icon-name="mdiMinusCircleOutline"
class="mt-1"
:size="16"
/>
</button>
</div>
<div class="workspace-table-filters-buttons">
@ -58,7 +62,11 @@
type="button"
@click="addRow"
>
<i class="mdi mdi-plus-circle-outline" />
<BaseIcon
icon-name="mdiPlusCircleOutline"
class="mt-1"
:size="16"
/>
</button>
</div>
</form>
@ -72,6 +80,7 @@ import { TableFilterClausole } from 'common/interfaces/tableApis';
import { computed, Prop, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n();

29
src/renderer/components/WorkspaceTabsContext.vue
View File

@ -4,19 +4,39 @@
@close-context="closeContext"
>
<div class="context-element" @click.stop="closeAllTabs">
<span class="d-flex"><i class="mdi mdi-18px mdi-asterisk text-light pr-1" /> {{ t('application.closeAllTabs') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiAsterisk"
:size="18"
/> {{ t('application.closeAllTabs') }}</span>
</div>
<div class="context-element" @click.stop="closeOtherTabs">
<span class="d-flex"><i class="mdi mdi-18px mdi-not-equal text-light pr-1" /> {{ t('application.closeOtherTabs') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiNotEqual"
:size="18"
/> {{ t('application.closeOtherTabs') }}</span>
</div>
<div class="context-element" @click.stop="closeLeftTabs">
<span class="d-flex"><i class="mdi mdi-18px mdi-less-than text-light pr-1" /> {{ t('application.closeTabsToLeft') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiLessThan"
:size="18"
/> {{ t('application.closeTabsToLeft') }}</span>
</div>
<div class="context-element" @click.stop="closeRightTabs">
<span class="d-flex"><i class="mdi mdi-18px mdi-greater-than text-light pr-1" /> {{ t('application.closeTabsToRight') }}</span>
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiGreaterThan"
:size="18"
/> {{ t('application.closeTabsToRight') }}</span>
</div>
</BaseContextMenu>
</template>
@ -25,6 +45,7 @@
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n();

5
src/renderer/scss/_table-keys.scss
View File

@ -1,10 +1,5 @@
/* stylelint-disable selector-class-pattern */
.column-key {
transform: rotate(45deg);
font-size: 0.7rem;
line-height: 1.5;
margin-right: 0.2rem;
&.key-pri,
&.key-PRIMARY {
color: goldenrod;

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

@ -295,6 +295,12 @@ option:checked {
}
}
.has-icon-left svg.form-icon,
.has-icon-right svg.form-icon {
width: auto;
height: auto;
}
.form-select {
cursor: pointer;

31
src/renderer/untyped.d.ts vendored
View File

@ -79,3 +79,34 @@ declare module 'vuedraggable' {// <- to export as default
}>;
export = draggableComponent;
}
declare let SvgIcon: import('vue').DefineComponent<{
type: {
type: StringConstructor;
default: string;
};
path: {
type: StringConstructor;
default: string;
};
size: {
type: NumberConstructor;
optional: boolean;
};
viewbox: {
type: StringConstructor;
optional: boolean;
};
flip: {
type: StringConstructor;
optional: boolean;
};
rotate: {
type: StringConstructor;
optional: boolean;
};
}>;
declare module '@jamescoyle/vue-icon' {
export default SvgIcon;
}