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": { "dependencies": {
"@electron/remote": "~2.0.1", "@electron/remote": "~2.0.1",
"@faker-js/faker": "~6.1.2", "@faker-js/faker": "~6.1.2",
"@jamescoyle/vue-icon": "~0.1.2",
"@mdi/font": "~7.2.96", "@mdi/font": "~7.2.96",
"@mdi/js": "~7.2.96",
"@turf/helpers": "~6.5.0", "@turf/helpers": "~6.5.0",
"@vueuse/core": "~10.4.1", "@vueuse/core": "~10.4.1",
"ace-builds": "~1.24.1", "ace-builds": "~1.24.1",
@ -2018,6 +2020,11 @@
"node": ">= 14" "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": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3", "version": "0.3.3",
"dev": true, "dev": true,
@ -2105,6 +2112,11 @@
"resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz", "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.2.96.tgz",
"integrity": "sha512-e//lmkmpFUMZKhmCY9zdjRe4zNXfbOIJnn6xveHbaV2kSw5aJ5dLXUxcRt1Gxfi7ZYpFLUWlkG2MGSFAiqAu7w==" "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": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"dev": true, "dev": true,

2
package.json
View File

@ -122,7 +122,9 @@
"dependencies": { "dependencies": {
"@electron/remote": "~2.0.1", "@electron/remote": "~2.0.1",
"@faker-js/faker": "~6.1.2", "@faker-js/faker": "~6.1.2",
"@jamescoyle/vue-icon": "~0.1.2",
"@mdi/font": "~7.2.96", "@mdi/font": "~7.2.96",
"@mdi/js": "~7.2.96",
"@turf/helpers": "~6.5.0", "@turf/helpers": "~6.5.0",
"@vueuse/core": "~10.4.1", "@vueuse/core": "~10.4.1",
"ace-builds": "~1.24.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> <template>
<div class="toast mt-2" :class="notificationStatus.className"> <div class="toast mt-2" :class="notificationStatus.className">
<span class="p-vcentered text-left" :class="{'expanded': isExpanded}"> <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 class="notification-message">{{ message }}</span>
</span> </span>
<i <BaseIcon
v-if="isExpandable" v-if="isExpandable"
class="mdi mdi-24px c-hand expand-btn" :icon-name="isExpanded ? 'mdiChevronUp' : 'mdiChevronDown'"
:class="isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" class=" c-hand expand-btn"
:size="24"
@click="toggleExpand" @click="toggleExpand"
/> />
<button class="btn btn-clear ml-2" @click="hideToast" /> <button class="btn btn-clear ml-2" @click="hideToast" />
@ -17,6 +22,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import BaseIcon from '@/components/BaseIcon.vue';
const props = defineProps({ const props = defineProps({
message: { message: {
type: String, type: String,
@ -36,19 +43,19 @@ const notificationStatus = computed(() => {
switch (props.status) { switch (props.status) {
case 'success': case 'success':
className = 'toast-success'; className = 'toast-success';
iconName = 'mdi-check'; iconName = 'mdiCheck';
break; break;
case 'error': case 'error':
className = 'toast-error'; className = 'toast-error';
iconName = 'mdi-alert-rhombus'; iconName = 'mdiAlertRhombus';
break; break;
case 'warning': case 'warning':
className = 'toast-warning'; className = 'toast-warning';
iconName = 'mdi-alert'; iconName = 'mdiAlert';
break; break;
case 'primary': case 'primary':
className = 'toast-primary'; className = 'toast-primary';
iconName = 'mdi-information-outline'; iconName = 'mdiInformationOutline';
break; 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> <template>
<label :for="`id_${id}`" class="file-uploader"> <label :for="`id_${id}`" class="file-uploader">
<span class="file-uploader-message"> <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>
<span class="text-ellipsis file-uploader-value"> <span class="text-ellipsis file-uploader-value">
{{ lastPart(modelValue, 19) }} {{ lastPart(modelValue, 19) }}
</span> </span>
<i <BaseIcon
v-if="modelValue" v-if="modelValue"
class="file-uploader-reset mdi mdi-close" class="file-upload-icon-clear"
icon-name="mdiClose"
:size="18"
@click.prevent="clear" @click.prevent="clear"
/> />
<form :ref="`form_${id}`"> <form :ref="`form_${id}`">
@ -26,6 +32,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { uidGen } from 'common/libs/uidGen'; import { uidGen } from 'common/libs/uidGen';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFilters } from '@/composables/useFilters'; import { useFilters } from '@/composables/useFilters';
const { lastPart } = useFilters(); const { lastPart } = useFilters();
@ -65,6 +72,12 @@ const clear = () => {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
.file-upload-icon-clear {
position: absolute;
right: 4px;
top: 8px;
}
> span { > span {
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
} }

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

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

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

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

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

@ -8,7 +8,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.parameters') }}: {{ localRoutine.name }}</span>
</div> </div>
</template> </template>
@ -54,6 +58,7 @@ import { computed, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFilters } from '@/composables/useFilters'; import { useFilters } from '@/composables/useFilters';
const { t } = useI18n(); const { t } = useI18n();

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2"> <div class="modal-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('application.editConnectionAppearance') }}</span>
</div> </div>
</div> </div>
@ -37,11 +41,24 @@
<div <div
v-for="icon in icons" v-for="icon in icons"
:key="icon.name" :key="icon.name"
class="icon-box" >
:title="icon.name" <BaseIcon
:class="[icon.code ? `mdi ${icon.code} mdi-36px` : `dbi dbi-${connection.client}`, {'selected': localConnection.icon === icon.code}]" v-if="icon.code"
@click="localConnection.icon = 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>
</div> </div>
</form> </form>
@ -64,6 +81,7 @@
import { onBeforeUnmount, PropType, Ref, ref } from 'vue'; import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify'; import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@ -142,6 +160,16 @@ const editFolderAppearance = () => {
closeModal(); 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 closeModal = () => emit('close');
const onKey =(e: KeyboardEvent) => { const onKey =(e: KeyboardEvent) => {

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

@ -7,7 +7,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -23,6 +27,7 @@ import { onBeforeUnmount } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

@ -6,7 +6,11 @@
<div class="modal-header pl-2"> <div class="modal-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.editSchema') }}</span>
</div> </div>
</div> </div>
@ -68,6 +72,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import Schema from '@/ipc-api/Schema'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.exportSchema') }}</span>
</div> </div>
</div> </div>
@ -44,7 +48,11 @@
<div class="column col-8 left"> <div class="column col-8 left">
<div class="columns mb-2 mt-1 p-vcentered"> <div class="columns mb-2 mt-1 p-vcentered">
<div class="column col-auto input-group d-flex text-italic" :style="'flex-grow: 1'"> <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 <input
v-model="chosenFilename" v-model="chosenFilename"
class="form-input" class="form-input"
@ -56,27 +64,27 @@
<div class="column col-auto col-ml-auto "> <div class="column col-auto col-ml-auto ">
<button <button
class="btn btn-dark btn-sm" class="btn btn-dark btn-sm pt-1"
:title="t('general.refresh')" :title="t('general.refresh')"
@click="refresh" @click="refresh"
> >
<i class="mdi mdi-refresh" /> <BaseIcon icon-name="mdiRefresh" :size="15" />
</button> </button>
<button <button
class="btn btn-dark btn-sm mx-1" class="btn btn-dark btn-sm mx-1 pt-1"
:title="t('database.uncheckAllTables')" :title="t('database.uncheckAllTables')"
:disabled="isRefreshing" :disabled="isRefreshing"
@click="uncheckAllTables" @click="uncheckAllTables"
> >
<i class="mdi mdi-checkbox-blank-outline" /> <BaseIcon icon-name="mdiCheckboxBlankOutline" :size="15" />
</button> </button>
<button <button
class="btn btn-dark btn-sm" class="btn btn-dark btn-sm pt-1"
:title="t('database.checkAllTables')" :title="t('database.checkAllTables')"
:disabled="isRefreshing" :disabled="isRefreshing"
@click="checkAllTables" @click="checkAllTables"
> >
<i class="mdi mdi-checkbox-marked-outline" /> <BaseIcon icon-name="mdiCheckboxMarkedOutline" :size="15" />
</button> </button>
</div> </div>
</div> </div>
@ -280,6 +288,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import Application from '@/ipc-api/Application'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.insertRow', 2) }}</span>
</div> </div>
</div> </div>
@ -64,7 +68,7 @@
:disabled="isInserting" :disabled="isInserting"
> >
<span class="input-group-addon"> <span class="input-group-addon">
<i class="mdi mdi-24px mdi-repeat" /> <BaseIcon icon-name="mdiRepeat" :size="24" />
</span> </span>
</div> </div>
<div <div
@ -105,6 +109,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeMount, onMounted, Prop, Ref, ref, watch } from 'vue'; import { computed, onBeforeMount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import FakerSelect from '@/components/FakerSelect.vue'; import FakerSelect from '@/components/FakerSelect.vue';
import { useFilters } from '@/composables/useFilters'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('application.editFolder') }}</span>
</div> </div>
</div> </div>
@ -43,7 +47,11 @@
:style="`background-color: ${color.hex}`" :style="`background-color: ${color.hex}`"
@click="localFolder.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> </div>
</div> </div>
@ -67,6 +75,7 @@
import { onBeforeUnmount, PropType, Ref, ref } from 'vue'; import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify'; import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('general.history') }}: {{ connectionName }}</span>
</div> </div>
</div> </div>
@ -24,17 +28,24 @@
type="text" type="text"
:placeholder="t('database.searchForQueries')" :placeholder="t('database.searchForQueries')"
> >
<i v-if="!searchTerm" class="form-icon mdi mdi-magnify mdi-18px pr-4" /> <BaseIcon
<i v-if="!searchTerm"
icon-name="mdiMagnify"
class="form-icon pr-2"
:size="18"
/>
<BaseIcon
v-else 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 = ''" @click="searchTerm = ''"
/> />
</div> </div>
<div <div
v-if="history.length" v-if="history.length"
ref="tableWrapper" ref="tableWrapper"
class="vscroll px-1 " class="vscroll px-1"
:style="{'height': resultsSize+'px'}" :style="{'height': resultsSize+'px'}"
> >
<div ref="table"> <div ref="table">
@ -53,7 +64,11 @@
tabindex="0" tabindex="0"
> >
<div class="tile-icon"> <div class="tile-icon">
<i class="mdi mdi-code-tags pr-1" /> <BaseIcon
icon-name="mdiCodeTags"
class="pr-1"
:size="24"
/>
</div> </div>
<div class="tile-content"> <div class="tile-content">
<div class="tile-title"> <div class="tile-title">
@ -67,13 +82,25 @@
<small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small> <small class="tile-subtitle">{{ query.schema }} · {{ formatDate(query.date) }}</small>
<div class="tile-history-buttons"> <div class="tile-history-buttons">
<button class="btn btn-link pl-1" @click.stop="$emit('select-query', query.sql)"> <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>
<button class="btn btn-link pl-1" @click="copyQuery(query.sql)"> <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>
<button class="btn btn-link pl-1" @click="deleteQuery(query)"> <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> </button>
</div> </div>
</div> </div>
@ -85,7 +112,7 @@
</div> </div>
<div v-else class="empty"> <div v-else class="empty">
<div class="empty-icon"> <div class="empty-icon">
<i class="mdi mdi-history mdi-48px" /> <BaseIcon icon-name="mdiHistory" :size="48" />
</div> </div>
<p class="empty-title h5"> <p class="empty-title h5">
{{ t('database.thereIsNoQueriesYet') }} {{ 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 { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue'; import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import { useFilters } from '@/composables/useFilters'; import { useFilters } from '@/composables/useFilters';
import { useFocusTrap } from '@/composables/useFocusTrap'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.importSchema') }}</span>
</div> </div>
</div> </div>
@ -57,6 +61,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import Schema from '@/ipc-api/Schema'; import Schema from '@/ipc-api/Schema';
import { useNotificationsStore } from '@/stores/notifications'; import { useNotificationsStore } from '@/stores/notifications';
import { useWorkspacesStore } from '@/stores/workspaces'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.createNewSchema') }}</span>
</div> </div>
</div> </div>
@ -71,6 +75,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import Schema from '@/ipc-api/Schema'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.processesList') }}: {{ connectionName }}</span>
</div> </div>
</div> </div>
@ -32,11 +36,21 @@
:title="`${t('general.refresh')}`" :title="`${t('general.refresh')}`"
@click="getProcessesList" @click="getProcessesList"
> >
<i v-if="!+autorefreshTimer" class="mdi mdi-24px mdi-refresh mr-1" /> <BaseIcon
<i v-else class="mdi mdi-24px mdi-history mdi-flip-h mr-1" /> v-if="!+autorefreshTimer"
icon-name="mdiRefresh"
:size="24"
/>
<BaseIcon
v-else
icon-name="mdiHistory"
flip="horizontal"
class="mr-1"
:size="24"
/>
</button> </button>
<div class="btn btn-dark btn-sm dropdown-toggle pl-0 pr-0" tabindex="0"> <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>
<div class="menu px-3"> <div class="menu px-3">
<span>{{ t('general.autoRefresh') }}: <b>{{ +autorefreshTimer ? `${autorefreshTimer}s` : 'OFF' }}</b></span> <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" class="btn btn-dark btn-sm dropdown-toggle d-flex mr-0 pr-0"
tabindex="0" tabindex="0"
> >
<i class="mdi mdi-24px mdi-file-export mr-1" /> <BaseIcon icon-name="mdiFileExport" :size="24" />
<span>{{ t('database.export') }}</span> <span>{{ t('database.export') }}</span>
<i class="mdi mdi-24px mdi-menu-down" /> <BaseIcon icon-name="mdiMenuDown" :size="24" />
</button> </button>
<ul class="menu text-left"> <ul class="menu text-left">
<li class="menu-item"> <li class="menu-item">
@ -95,10 +109,12 @@
<div ref="columnResize" class="column-resizable"> <div ref="columnResize" class="column-resizable">
<div class="table-column-title" @click="sort(field)"> <div class="table-column-title" @click="sort(field)">
<span>{{ field.toUpperCase() }}</span> <span>{{ field.toUpperCase() }}</span>
<i
<BaseIcon
v-if="currentSort === field" v-if="currentSort === field"
class="mdi sort-icon" :icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'" :size="18"
class="ml-1"
/> />
</div> </div>
</div> </div>
@ -139,6 +155,7 @@ import { ipcRenderer } from 'electron';
import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue'; import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue'; import ModalProcessesListContext from '@/components/ModalProcessesListContext.vue';
import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue'; import ModalProcessesListRow from '@/components/ModalProcessesListRow.vue';

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

@ -4,8 +4,16 @@
@close-context="closeContext" @close-context="closeContext"
> >
<div v-if="props.selectedRow" class="context-element"> <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> <span class="d-flex"><BaseIcon
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" /> 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 class="context-submenu">
<div <div
v-if="props.selectedRow" v-if="props.selectedRow"
@ -13,7 +21,12 @@
@click="copyCell" @click="copyCell"
> >
<span class="d-flex"> <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> </span>
</div> </div>
<div <div
@ -22,7 +35,11 @@
@click="copyRow" @click="copyRow"
> >
<span class="d-flex"> <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> </span>
</div> </div>
</div> </div>
@ -33,7 +50,11 @@
@click="killProcess" @click="killProcess"
> >
<span class="d-flex"> <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> </span>
</div> </div>
</BaseContextMenu> </BaseContextMenu>
@ -43,6 +64,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

@ -24,7 +24,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -49,6 +53,7 @@ import { Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import TextEditor from '@/components/BaseTextEditor.vue'; import TextEditor from '@/components/BaseTextEditor.vue';
import { useFilters } from '@/composables/useFilters'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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> <span class="cut-text">{{ t('application.settings') }}</span>
</div> </div>
</div> </div>
@ -78,7 +82,11 @@
<div class="form-group column col-12"> <div class="form-group column col-12">
<div class="col-5 col-sm-12"> <div class="col-5 col-sm-12">
<label class="form-label"> <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') }} {{ t('application.language') }}
</label> </label>
</div> </div>
@ -274,7 +282,11 @@
> >
<img :src="darkPreview" class="img-responsive img-fit-cover s-rounded"> <img :src="darkPreview" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name text-light"> <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"> <div class="h6 mt-4">
{{ t('application.dark') }} {{ t('application.dark') }}
</div> </div>
@ -287,7 +299,11 @@
> >
<img :src="lightPreview" class="img-responsive img-fit-cover s-rounded"> <img :src="lightPreview" class="img-responsive img-fit-cover s-rounded">
<div class="theme-name text-dark"> <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"> <div class="h6 mt-4">
{{ t('application.light') }} {{ t('application.light') }}
</div> </div>
@ -389,7 +405,39 @@
<h4>{{ appName }}</h4> <h4>{{ appName }}</h4>
<p class="mb-2"> <p class="mb-2">
{{ t('general.version') }} {{ appVersion }}<br> {{ 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> <small>{{ t('general.author') }} <a class="c-hand" @click="openOutside('https://github.com/Fabio286')">{{ appAuthor }}</a></small><br>
</p> </p>
<div class="mb-2"> <div class="mb-2">
@ -414,6 +462,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import BaseTextEditor from '@/components/BaseTextEditor.vue'; import BaseTextEditor from '@/components/BaseTextEditor.vue';
import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.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 v-if="isError" class="empty">
<div class="empty-icon"> <div class="empty-icon">
<i class="mdi mdi-48px mdi-alert-outline" /> <BaseIcon icon-name="mdiAlertOutline" :size="48" />
</div> </div>
</div> </div>
</div> </div>
@ -18,6 +18,7 @@ import { shell } from 'electron';
import { marked } from 'marked'; import { marked } from 'marked';
import { ref } from 'vue'; import { ref } from 'vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import { useApplicationStore } from '@/stores/application'; import { useApplicationStore } from '@/stores/application';

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

@ -12,7 +12,11 @@
class="btn btn-primary d-inline-flex" class="btn btn-primary d-inline-flex"
@click="isExportModal=true" @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> <span>{{ t('application.exportData') }}</span>
</button> </button>
</div> </div>
@ -30,7 +34,11 @@
class="btn btn-dark d-inline-flex ml-auto" class="btn btn-dark d-inline-flex ml-auto"
@click="isImportModal=true" @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> <span>{{ t('application.importData') }}</span>
</button> </button>
</div> </div>
@ -46,10 +54,10 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { useApplicationStore } from '@/stores/application';
import { ref } from 'vue'; import { ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue'; import ModalSettingsDataExport from '@/components/ModalSettingsDataExport.vue';
import ModalSettingsDataImport from '@/components/ModalSettingsDataImport.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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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>
</div> </div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" /> <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@ -107,8 +111,18 @@
class="btn btn-link input-group-addon" class="btn btn-link input-group-addon"
@click="isPasswordVisible = !isPasswordVisible" @click="isPasswordVisible = !isPasswordVisible"
> >
<i v-if="isPasswordVisible" class="mdi mdi-eye px-1" /> <BaseIcon
<i v-else class="mdi mdi-eye-off px-1" /> 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> </button>
</div> </div>
<span v-if="isPasswordError" class="form-input-hint"> <span v-if="isPasswordError" class="form-input-hint">
@ -144,6 +158,7 @@ import { storeToRefs } from 'pinia';
import { computed, onBeforeUnmount, Ref, ref } from 'vue'; import { computed, onBeforeUnmount, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap'; import { useFocusTrap } from '@/composables/useFocusTrap';
import { unproxify } from '@/libs/unproxify'; import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; 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-header pl-2">
<div class="modal-title h6"> <div class="modal-title h6">
<div class="d-flex"> <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>
</div> </div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" /> <a class="btn btn-clear c-hand" @click.stop="closeModal" />
@ -20,7 +24,7 @@
:model-value="filePath" :model-value="filePath"
:message="t('general.browse')" :message="t('general.browse')"
accept=".antares" accept=".antares"
@clear="filePath = ''" @clear="clearPath"
@change="filesChange($event)" @change="filesChange($event)"
/> />
</div> </div>
@ -42,8 +46,18 @@
class="btn btn-link input-group-addon" class="btn btn-link input-group-addon"
@click="isPasswordVisible = !isPasswordVisible" @click="isPasswordVisible = !isPasswordVisible"
> >
<i v-if="isPasswordVisible" class="mdi mdi-eye px-1" /> <BaseIcon
<i v-else class="mdi mdi-eye-off px-1" /> 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> </button>
</div> </div>
<span v-if="isPasswordError" class="form-input-hint"> <span v-if="isPasswordError" class="form-input-hint">
@ -86,6 +100,7 @@ import { storeToRefs } from 'pinia';
import { onBeforeUnmount, ref } from 'vue'; import { onBeforeUnmount, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseUploadInput from '@/components/BaseUploadInput.vue'; import BaseUploadInput from '@/components/BaseUploadInput.vue';
import { unproxify } from '@/libs/unproxify'; import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; import { SidebarElement, useConnectionsStore } from '@/stores/connections';
@ -125,6 +140,11 @@ const filesChange = ({ target } : {target: HTMLInputElement }) => {
}; };
}; };
const clearPath = () => {
filePath.value = '';
fileContent.value = null;
};
const importData = () => { const importData = () => {
if (options.value.passkey.length < 8) if (options.value.passkey.length < 8)
isPasswordError.value = true; isPasswordError.value = true;

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

@ -2,10 +2,18 @@
<div class="p-relative"> <div class="p-relative">
<div class="shortcuts-tools pb-2 px-2"> <div class="shortcuts-tools pb-2 px-2">
<button class="btn btn-dark btn-sm d-flex ml-2" @click="showAddModal"> <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>
<button class="btn btn-dark btn-sm d-flex ml-2" @click="isConfirmRestoreModal = true"> <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> </button>
</div> </div>
<div class="container workspace-query-results"> <div class="container workspace-query-results">
@ -43,10 +51,20 @@
/> />
<div class="td py-1 pr-2"> <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})"> <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>
<button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)"> <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> </button>
</div> </div>
</div> </div>
@ -65,7 +83,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -99,7 +121,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -132,7 +158,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -150,7 +180,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -169,6 +203,7 @@ import { Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import { useFilters } from '@/composables/useFilters'; import { useFilters } from '@/composables/useFilters';
import Application from '@/ipc-api/Application'; import Application from '@/ipc-api/Application';

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

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

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

@ -41,12 +41,28 @@
@dragleave="coveredElement = false" @dragleave="coveredElement = false"
@change="createFolder" @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> <template v-else>
<div class="settingbar-element-icon-wrapper"> <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="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> <small class="settingbar-element-name">{{ element.name || getConnectionName(element.uid) }}</small>
</div> </div>
@ -75,6 +91,7 @@ import { storeToRefs } from 'pinia';
import { computed, PropType, Ref, ref, watch } from 'vue'; import { computed, PropType, Ref, ref, watch } from 'vue';
import * as Draggable from 'vuedraggable'; import * as Draggable from 'vuedraggable';
import BaseIcon from '@/components/BaseIcon.vue';
import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue'; import SettingBarConnectionsFolder from '@/components/SettingBarConnectionsFolder.vue';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; import { SidebarElement, useConnectionsStore } from '@/stores/connections';
import { useWorkspacesStore } from '@/stores/workspaces'; 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, () => { watch(() => dummyNested.value.length, () => {
dummyNested.value = []; dummyNested.value = [];
}); });

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

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

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

@ -8,20 +8,40 @@
class="context-element" class="context-element"
@click="disconnect" @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>
<div <div
v-if="!contextConnection.isFolder" v-if="!contextConnection.isFolder"
class="context-element" class="context-element"
@click="duplicateConnection" @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>
<div class="context-element" @click.stop="showAppearanceModal"> <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>
<div class="context-element" @click="showConfirmModal"> <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> </div>
<ConfirmModal <ConfirmModal
@ -31,7 +51,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -60,6 +84,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalConnectionAppearance from '@/components/ModalConnectionAppearance.vue'; import ModalConnectionAppearance from '@/components/ModalConnectionAppearance.vue';
import ModalFolderAppearance from '@/components/ModalFolderAppearance.vue'; import ModalFolderAppearance from '@/components/ModalFolderAppearance.vue';
import { SidebarElement, useConnectionsStore } from '@/stores/connections'; import { SidebarElement, useConnectionsStore } from '@/stores/connections';

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

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

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

@ -8,7 +8,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -34,6 +38,7 @@ import { Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import TextEditor from '@/components/BaseTextEditor.vue'; import TextEditor from '@/components/BaseTextEditor.vue';
import { useApplicationStore } from '@/stores/application'; import { useApplicationStore } from '@/stores/application';
import { useScratchpadStore } from '@/stores/scratchpad'; import { useScratchpadStore } from '@/stores/scratchpad';

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

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

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

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

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

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

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

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

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

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

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

@ -8,7 +8,11 @@
</p> </p>
<div class="empty-action"> <div class="empty-action">
<button class="btn btn-primary d-flex" @click="emit('new-tab')"> <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') }} {{ t('application.openNewTab') }}
</button> </button>
</div> </div>
@ -19,6 +23,7 @@ import { storeToRefs } from 'pinia';
import { computed } from 'vue'; import { computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import { useSettingsStore } from '@/stores/settings'; import { useSettingsStore } from '@/stores/settings';
import { useWorkspacesStore } from '@/stores/workspaces'; import { useWorkspacesStore } from '@/stores/workspaces';

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

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

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

@ -8,7 +8,12 @@
class="context-element" class="context-element"
@click="runElementCheck" @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>
<div <div
v-if="selectedMisc.type === 'trigger' && customizations.triggerEnableDisable" v-if="selectedMisc.type === 'trigger' && customizations.triggerEnableDisable"
@ -16,10 +21,18 @@
@click="toggleTrigger" @click="toggleTrigger"
> >
<span v-if="!selectedMisc.enabled" class="d-flex"> <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>
<span v-else class="d-flex"> <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> </span>
</div> </div>
<div <div
@ -28,14 +41,27 @@
@click="toggleScheduler" @click="toggleScheduler"
> >
<span v-if="!selectedMisc.enabled" class="d-flex"> <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>
<span v-else class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="showDeleteModal"> <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> </div>
<ConfirmModal <ConfirmModal
v-if="isDeleteModal" v-if="isDeleteModal"
@ -44,7 +70,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ deleteMessage }}</span>
</div> </div>
</template> </template>
@ -72,6 +102,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue'; import ModalAskParameters from '@/components/ModalAskParameters.vue';
import Functions from '@/ipc-api/Functions'; import Functions from '@/ipc-api/Functions';
import Routines from '@/ipc-api/Routines'; import Routines from '@/ipc-api/Routines';
@ -119,6 +150,7 @@ const deleteMessage = computed(() => {
switch (props.selectedMisc.type) { switch (props.selectedMisc.type) {
case 'trigger': case 'trigger':
return t('database.deleteTrigger'); return t('database.deleteTrigger');
case 'routine':
case 'procedure': case 'procedure':
return t('database.deleteRoutine'); return t('database.deleteRoutine');
case 'function': case 'function':

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

@ -8,35 +8,60 @@
class="context-element" class="context-element"
@click="emit('open-create-trigger-tab')" @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>
<div <div
v-if="['procedure', 'routine'].includes(props.selectedMisc)" v-if="['procedure', 'routine'].includes(props.selectedMisc)"
class="context-element" class="context-element"
@click="emit('open-create-routine-tab')" @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>
<div <div
v-if="props.selectedMisc === 'function'" v-if="props.selectedMisc === 'function'"
class="context-element" class="context-element"
@click="emit('open-create-function-tab')" @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>
<div <div
v-if="props.selectedMisc === 'triggerFunction'" v-if="props.selectedMisc === 'triggerFunction'"
class="context-element" class="context-element"
@click="emit('open-create-trigger-function-tab')" @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>
<div <div
v-if="props.selectedMisc === 'scheduler'" v-if="props.selectedMisc === 'scheduler'"
class="context-element" class="context-element"
@click="emit('open-create-scheduler-tab')" @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> </div>
</BaseContextMenu> </BaseContextMenu>
</template> </template>
@ -45,6 +70,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

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

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

@ -4,57 +4,101 @@
@close-context="closeContext" @close-context="closeContext"
> >
<div class="context-element"> <div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-plus text-light pr-1" /> {{ t('general.add') }}</span> <span class="d-flex">
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" /> <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 class="context-submenu">
<div <div
v-if="workspace.customizations.tableAdd" v-if="workspace.customizations.tableAdd"
class="context-element" class="context-element"
@click="openCreateTableTab" @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>
<div <div
v-if="workspace.customizations.viewAdd" v-if="workspace.customizations.viewAdd"
class="context-element" class="context-element"
@click="openCreateViewTab" @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>
<div <div
v-if="workspace.customizations.triggerAdd" v-if="workspace.customizations.triggerAdd"
class="context-element" class="context-element"
@click="openCreateTriggerTab" @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>
<div <div
v-if="workspace.customizations.routineAdd" v-if="workspace.customizations.routineAdd"
class="context-element" class="context-element"
@click="openCreateRoutineTab" @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>
<div <div
v-if="workspace.customizations.functionAdd" v-if="workspace.customizations.functionAdd"
class="context-element" class="context-element"
@click="openCreateFunctionTab" @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>
<div <div
v-if="workspace.customizations.triggerFunctionAdd" v-if="workspace.customizations.triggerFunctionAdd"
class="context-element" class="context-element"
@click="openCreateTriggerFunctionTab" @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>
<div <div
v-if="workspace.customizations.schedulerAdd" v-if="workspace.customizations.schedulerAdd"
class="context-element" class="context-element"
@click="openCreateSchedulerTab" @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> </div>
</div> </div>
@ -63,28 +107,48 @@
class="context-element" class="context-element"
@click="showExportSchemaModal" @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>
<div <div
v-if="workspace.customizations.schemaImport" v-if="workspace.customizations.schemaImport"
class="context-element" class="context-element"
@click="initImport" @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>
<div <div
v-if="workspace.customizations.schemaEdit" v-if="workspace.customizations.schemaEdit"
class="context-element" class="context-element"
@click="showEditModal" @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>
<div <div
v-if="workspace.customizations.schemaDrop" v-if="workspace.customizations.schemaDrop"
class="context-element" class="context-element"
@click="showDeleteModal" @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> </div>
<ConfirmModal <ConfirmModal
@ -94,7 +158,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.deleteSchema') }}</span>
</div> </div>
</template> </template>
@ -125,6 +193,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import ModalEditSchema from '@/components/ModalEditSchema.vue'; import ModalEditSchema from '@/components/ModalEditSchema.vue';
import ModalImportSchema from '@/components/ModalImportSchema.vue'; import ModalImportSchema from '@/components/ModalImportSchema.vue';
import Application from '@/ipc-api/Application'; import Application from '@/ipc-api/Application';

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

@ -8,38 +8,68 @@
class="context-element" class="context-element"
@click="openTableSettingTab" @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>
<div <div
v-if="selectedTable && selectedTable.type === 'table' && customizations.schemaExport" v-if="selectedTable && selectedTable.type === 'table' && customizations.schemaExport"
class="context-element" class="context-element"
@click="showTableExportModal" @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>
<div <div
v-if="selectedTable && selectedTable.type === 'view' && customizations.viewSettings" v-if="selectedTable && selectedTable.type === 'view' && customizations.viewSettings"
class="context-element" class="context-element"
@click="openViewSettingTab" @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>
<div <div
v-if="selectedTable && selectedTable.type === 'table' && customizations.tableDuplicate" v-if="selectedTable && selectedTable.type === 'table' && customizations.tableDuplicate"
class="context-element" class="context-element"
@click="duplicateTable" @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>
<div <div
v-if="selectedTable && selectedTable.type === 'table'" v-if="selectedTable && selectedTable.type === 'table'"
class="context-element" class="context-element"
@click="showEmptyModal" @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>
<div class="context-element" @click="showDeleteModal"> <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> </div>
<ConfirmModal <ConfirmModal
@ -49,7 +79,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> </div>
</template> </template>
<template #body> <template #body>
@ -70,7 +104,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ selectedTable.type === 'table' ? t('database.deleteTable') : t('database.deleteView') }}</span>
</div> </div>
</template> </template>
@ -90,6 +128,7 @@ import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import Tables from '@/ipc-api/Tables'; import Tables from '@/ipc-api/Tables';
import { useNotificationsStore } from '@/stores/notifications'; import { useNotificationsStore } from '@/stores/notifications';
import { useSchemaExportStore } from '@/stores/schemaExport'; import { useSchemaExportStore } from '@/stores/schemaExport';

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

@ -35,7 +35,12 @@
@close-context="isContext = false" @close-context="isContext = false"
> >
<div class="context-element" @click="copyQuery"> <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> </div>
</BaseContextMenu> </BaseContextMenu>
</template> </template>
@ -46,6 +51,7 @@ import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useConsoleStore } from '@/stores/console'; import { useConsoleStore } from '@/stores/console';
const { t } = useI18n(); const { t } = useI18n();

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,20 +22,32 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
<div class="divider-vert py-3" /> <div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showParamsModal"> <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> <span>{{ t('database.parameters') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -182,6 +198,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,20 +22,32 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
<div class="divider-vert py-3" /> <div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showParamsModal"> <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> <span>{{ t('database.parameters') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -154,6 +170,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,19 +22,31 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
<div class="divider-vert py-3" /> <div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showTimingModal"> <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> <span>{{ t('database.timing') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -131,6 +147,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Prop, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
@ -30,7 +38,11 @@
:title="t('database.addNewField')" :title="t('database.addNewField')"
@click="addField" @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> <span>{{ t('general.add') }}</span>
</button> </button>
<button <button
@ -39,7 +51,12 @@
:title="t('database.manageIndexes')" :title="t('database.manageIndexes')"
@click="showIntdexesModal" @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> <span>{{ t('database.indexes') }}</span>
</button> </button>
<button <button
@ -48,13 +65,21 @@
:title="t('database.manageForeignKeys')" :title="t('database.manageForeignKeys')"
@click="showForeignModal" @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> <span>{{ t('database.foreignKeys') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -169,6 +194,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue'; import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState.vue';

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

@ -5,7 +5,11 @@
</p> </p>
<div class="empty-action"> <div class="empty-action">
<button class="btn btn-gray d-flex" @click="emit('new-field')"> <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') }} {{ t('database.addNewField') }}
</button> </button>
</div> </div>
@ -15,6 +19,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();
const emit = defineEmits(['new-field']); const emit = defineEmits(['new-field']);
</script> </script>

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,10 +22,23 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </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> </div>
<div class="container"> <div class="container">
@ -99,6 +116,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -109,6 +121,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
@ -29,17 +37,29 @@
:disabled="isChanged" :disabled="isChanged"
@click="runFunctionCheck" @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> <span>{{ t('general.run') }}</span>
</button> </button>
<button class="btn btn-dark btn-sm" @click="showParamsModal"> <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> <span>{{ t('database.parameters') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -199,6 +219,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue'; import ModalAskParameters from '@/components/ModalAskParameters.vue';

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

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

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
@ -29,17 +37,29 @@
:disabled="isChanged" :disabled="isChanged"
@click="runRoutineCheck" @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> <span>{{ t('general.run') }}</span>
</button> </button>
<button class="btn btn-dark btn-sm" @click="showParamsModal"> <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> <span>{{ t('database.parameters') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -171,6 +191,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import ModalAskParameters from '@/components/ModalAskParameters.vue'; import ModalAskParameters from '@/components/ModalAskParameters.vue';

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

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

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,19 +22,31 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
<div class="divider-vert py-3" /> <div class="divider-vert py-3" />
<button class="btn btn-dark btn-sm" @click="showTimingModal"> <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> <span>{{ t('database.timing') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -129,6 +145,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

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

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,7 +22,11 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
@ -30,7 +38,11 @@
:title="t('database.addNewField')" :title="t('database.addNewField')"
@click="addField" @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> <span>{{ t('general.add') }}</span>
</button> </button>
<button <button
@ -39,7 +51,12 @@
:title="t('database.manageIndexes')" :title="t('database.manageIndexes')"
@click="showIntdexesModal" @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> <span>{{ t('database.indexes') }}</span>
</button> </button>
<button <button
@ -48,7 +65,11 @@
:title="t('database.manageIndexes')" :title="t('database.manageIndexes')"
@click="showForeignModal" @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> <span>{{ t('database.foreignKeys') }}</span>
</button> </button>
@ -60,13 +81,21 @@
:disabled="isSaving" :disabled="isSaving"
@click="showDdlModal" @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> <span>{{ t('database.ddl') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -200,6 +229,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import WorkspaceTabPropsTableDdlModal from '@/components/WorkspaceTabPropsTableDdlModal.vue'; import WorkspaceTabPropsTableDdlModal from '@/components/WorkspaceTabPropsTableDdlModal.vue';

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

@ -4,8 +4,17 @@
@close-context="closeContext" @close-context="closeContext"
> >
<div class="context-element"> <div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-key-plus text-light pr-1" /> {{ t('database.createNewIndex') }}</span> <span class="d-flex">
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" /> <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 class="context-submenu">
<div <div
v-for="index in indexTypes" v-for="index in indexTypes"
@ -14,13 +23,29 @@
:class="{'disabled': index === 'PRIMARY' && hasPrimary}" :class="{'disabled': index === 'PRIMARY' && hasPrimary}"
@click="addNewIndex(index)" @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>
</div> </div>
<div v-if="indexes.length" class="context-element"> <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> <span class="d-flex">
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" /> <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 class="context-submenu">
<div <div
v-for="index in indexes" v-for="index in indexes"
@ -29,15 +54,32 @@
:class="{'disabled': index.fields.includes(selectedField.name)}" :class="{'disabled': index.fields.includes(selectedField.name)}"
@click="addToIndex(index._antares_id)" @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>
</div> </div>
<div class="context-element" @click="duplicateField"> <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>
<div class="context-element" @click="deleteField"> <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> </div>
</BaseContextMenu> </BaseContextMenu>
</template> </template>
@ -48,6 +90,7 @@ import { computed, Prop } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

@ -9,7 +9,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.ddl') }} "{{ table }}"</span>
</div> </div>
</template> </template>
@ -32,6 +36,7 @@ import { onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseTextEditor from '@/components/BaseTextEditor.vue'; import BaseTextEditor from '@/components/BaseTextEditor.vue';
import Tables from '@/ipc-api/Tables'; import Tables from '@/ipc-api/Tables';
import { useNotificationsStore } from '@/stores/notifications'; import { useNotificationsStore } from '@/stores/notifications';

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

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

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

@ -8,7 +8,12 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.indexes') }} "{{ table }}"</span>
</div> </div>
</template> </template>
@ -19,7 +24,11 @@
<div class="panel-header pt-0 pl-0"> <div class="panel-header pt-0 pl-0">
<div class="d-flex"> <div class="d-flex">
<button class="btn btn-dark btn-sm d-flex" @click="addIndex"> <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> <span>{{ t('general.add') }}</span>
</button> </button>
<button <button
@ -28,7 +37,11 @@
:disabled="!isChanged" :disabled="!isChanged"
@click.prevent="clearChanges" @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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </div>
@ -43,7 +56,12 @@
> >
<div class="tile-icon"> <div class="tile-icon">
<div> <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> </div>
<div class="tile-content"> <div class="tile-content">
@ -58,7 +76,11 @@
:title="t('general.delete')" :title="t('general.delete')"
@click.prevent="removeIndex(index._antares_id)" @click.prevent="removeIndex(index._antares_id)"
> >
<i class="mdi mdi-close" /> <BaseIcon
icon-name="mdiClose"
:size="18"
class="mt-2"
/>
</button> </button>
</div> </div>
</div> </div>
@ -116,7 +138,11 @@
</form> </form>
<div v-if="!indexesProxy.length" class="empty"> <div v-if="!indexesProxy.length" class="empty">
<div class="empty-icon"> <div class="empty-icon">
<i class="mdi mdi-key-outline mdi-48px" /> <BaseIcon
class="mr-1"
icon-name="mdiKeyOutline"
:size="48"
/>
</div> </div>
<p class="empty-title h5"> <p class="empty-title h5">
{{ t('database.thereAreNoIndexes') }} {{ t('database.thereAreNoIndexes') }}
@ -140,6 +166,7 @@ import { computed, onMounted, onUnmounted, Prop, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
const { t } = useI18n(); const { t } = useI18n();
@ -270,7 +297,7 @@ onUnmounted(() => {
overflow: auto; overflow: auto;
} }
.remove-field .mdi { .remove-field svg {
pointer-events: none; pointer-events: none;
} }
</style> </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="tr" @contextmenu.prevent="!editingField ? emit('contextmenu', $event, localRow._antares_id) : null">
<div class="td p-0" tabindex="0"> <div class="td p-0" tabindex="0">
<div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'"> <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 }} {{ localRow.order }}
</div> </div>
</div> </div>
<div class="td p-0" tabindex="0"> <div class="td p-0" tabindex="0">
<div class="text-center"> <div class="text-center" :style="'display: flex; justify-content: center; align-items: center'">
<i <div
v-for="(index, i) in indexes" v-for="(index, i) in indexes"
:key="`${index.name}-${i}`" :key="`${index.name}-${i}`"
:title="index.type" :title="index.type"
class="d-inline-block mdi mdi-key column-key c-help" class="p-vcentered"
:class="`key-${index.type}`" >
/> <BaseIcon
<i 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" v-for="foreign in foreigns"
:key="foreign" :key="foreign"
:title="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> </div>
<div class="td p-0" tabindex="0"> <div class="td p-0" tabindex="0">
@ -227,7 +245,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.default') }} "{{ row.name }}"</span>
</div> </div>
</template> </template>
@ -331,6 +353,7 @@ import { computed, nextTick, onMounted, Prop, PropType, Ref, ref, watch } from '
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import { useWorkspacesStore } from '@/stores/workspaces'; import { useWorkspacesStore } from '@/stores/workspaces';
@ -558,7 +581,7 @@ const editOFF = () => {
const checkLengthScale = (e: KeyboardEvent & { target: HTMLInputElement }) => { const checkLengthScale = (e: KeyboardEvent & { target: HTMLInputElement }) => {
e = (e) || window.event as 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(','))) if (((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 44) || (charCode === 44 && e.target.value.includes(',')))
e.preventDefault(); e.preventDefault();

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -120,6 +132,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,10 +22,23 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </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> </div>
<div class="container"> <div class="container">
@ -87,6 +104,7 @@ import { storeToRefs } from 'pinia';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -9,7 +9,11 @@
:class="{'loading':isSaving}" :class="{'loading':isSaving}"
@click="saveChanges" @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> <span>{{ t('general.save') }}</span>
</button> </button>
<button <button
@ -18,13 +22,21 @@
:title="t('database.clearChanges')" :title="t('database.clearChanges')"
@click="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> <span>{{ t('general.clear') }}</span>
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div class="d-flex" :title="t('database.schema')"> <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> </div>
</div> </div>
@ -107,6 +119,7 @@ import { ipcRenderer } from 'electron';
import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import QueryEditor from '@/components/QueryEditor.vue'; import QueryEditor from '@/components/QueryEditor.vue';

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

@ -27,7 +27,11 @@
:title="t('general.cancel')" :title="t('general.cancel')"
@click="killTabQuery()" @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> <span class="d-invisible pr-1">{{ t('general.run') }}</span>
</button> </button>
<button <button
@ -37,7 +41,11 @@
:disabled="!query" :disabled="!query"
@click="runQuery(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> <span>{{ t('general.run') }}</span>
</button> </button>
</div> </div>
@ -47,7 +55,11 @@
:class="{'loading':isQuering}" :class="{'loading':isQuering}"
@click="commitTab()" @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> <span>{{ t('database.commit') }}</span>
</button> </button>
<button <button
@ -56,7 +68,11 @@
:class="{'loading':isQuering}" :class="{'loading':isQuering}"
@click="rollbackTab()" @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> <span>{{ t('database.rollback') }}</span>
</button> </button>
<button <button
@ -64,7 +80,11 @@
:disabled="!query || isQuering" :disabled="!query || isQuering"
@click="clear()" @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> <span>{{ t('general.clear') }}</span>
</button> </button>
@ -75,7 +95,11 @@
:disabled="!query || isQuering" :disabled="!query || isQuering"
@click="beautify()" @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> <span>{{ t('general.format') }}</span>
</button> </button>
<button <button
@ -83,7 +107,11 @@
:disabled="isQuering" :disabled="isQuering"
@click="openHistoryModal()" @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> <span>{{ t('general.history') }}</span>
</button> </button>
<div class="dropdown table-dropdown pr-2"> <div class="dropdown table-dropdown pr-2">
@ -92,9 +120,17 @@
class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0" class="btn btn-dark btn-sm dropdown-toggle mr-0 pr-0"
tabindex="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> <span>{{ t('database.export') }}</span>
<i class="mdi mdi-24px mdi-menu-down" /> <BaseIcon
class="mr-1"
icon-name="mdiMenuDown"
:size="24"
/>
</button> </button>
<ul class="menu text-left"> <ul class="menu text-left">
<li class="menu-item"> <li class="menu-item">
@ -112,7 +148,11 @@
</ul> </ul>
</div> </div>
<div class="input-group pr-2" :title="t('database.commitMode')"> <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 <BaseSelect
v-model="autocommit" v-model="autocommit"
:options="[{value: true, label: t('database.autoCommit')}, {value: false, label: t('database.manualCommit')}]" :options="[{value: true, label: t('database.autoCommit')}, {value: false, label: t('database.manualCommit')}]"
@ -128,24 +168,41 @@
class="d-flex" class="d-flex"
:title="t('database.queryDuration')" :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>
<div <div
v-if="resultsCount" v-if="resultsCount"
class="d-flex" class="d-flex"
:title="t('general.results')" :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>
<div <div
v-if="hasAffected" v-if="hasAffected"
class="d-flex" class="d-flex"
:title="t('database.affectedRows')" :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>
<div class="input-group" :title="t('database.schema')"> <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 <BaseSelect
v-model="selectedSchema" v-model="selectedSchema"
@ -190,6 +247,7 @@ import { format } from 'sql-formatter';
import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue'; import { Component, computed, onBeforeUnmount, onMounted, Prop, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseLoader from '@/components/BaseLoader.vue'; import BaseLoader from '@/components/BaseLoader.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import ModalHistory from '@/components/ModalHistory.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 ref="columnResize" class="column-resizable">
<div class="table-column-title" @click="sort(field.name)"> <div class="table-column-title" @click="sort(field.name)">
<i <div v-if="field.key" :title="keyName(field.key)">
v-if="field.key" <BaseIcon
class="mdi mdi-key column-key c-help" icon-name="mdiKey"
:class="`key-${field.key}`" rotate="45deg"
:title="keyName(field.key)" :size="14"
/> class="column-key c-help mt-1 mr-1"
:class="`key-${field.key}`"
/>
</div>
<span>{{ field.alias || field.name }}</span> <span>{{ field.alias || field.name }}</span>
<i <BaseIcon
v-if="isSortable && currentSort === field.name || currentSort === `${field.table}.${field.name}`" v-if="isSortable && currentSort === field.name || currentSort === `${field.table}.${field.name}`"
class="mdi sort-icon" :icon-name="currentSortDir === 'asc' ? 'mdiSortAscending':'mdiSortDescending'"
:class="currentSortDir === 'asc' ? 'mdi-sort-ascending':'mdi-sort-descending'" :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> </div>
</div> </div>
@ -101,7 +110,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.deleteRows', selectedRows.length) }}</span>
</div> </div>
</template> </template>
@ -119,7 +132,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('database.sqlExportOptions') }}</span>
</div> </div>
</template> </template>
@ -160,7 +177,11 @@
> >
<template #header> <template #header>
<div class="d-flex"> <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> <span class="cut-text">{{ t('application.csvExportOptions') }}</span>
</div> </div>
</template> </template>
@ -241,6 +262,7 @@ import { Component, computed, nextTick, onMounted, onUnmounted, onUpdated, Prop,
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import ConfirmModal from '@/components/BaseConfirmModal.vue'; import ConfirmModal from '@/components/BaseConfirmModal.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import BaseSelect from '@/components/BaseSelect.vue'; import BaseSelect from '@/components/BaseSelect.vue';
import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue'; import BaseVirtualScroll from '@/components/BaseVirtualScroll.vue';
import TableContext from '@/components/WorkspaceTabQueryTableContext.vue'; import TableContext from '@/components/WorkspaceTabQueryTableContext.vue';
@ -555,6 +577,8 @@ const copyRow = (format: string) => {
if (selectedRows.value.length === 1) { if (selectedRows.value.length === 1) {
const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id)); const row = localResults.value.find((row: any) => selectedRows.value.includes(row._antares_id));
const rowToCopy = unproxify(row); const rowToCopy = unproxify(row);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete rowToCopy._antares_id; delete rowToCopy._antares_id;
contentToCopy = rowToCopy; contentToCopy = rowToCopy;
} }

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

@ -4,8 +4,17 @@
@close-context="closeContext" @close-context="closeContext"
> >
<div class="context-element"> <div class="context-element">
<span class="d-flex"><i class="mdi mdi-18px mdi-content-copy text-light pr-1" /> {{ t('general.copy') }}</span> <span class="d-flex">
<i class="mdi mdi-18px mdi-chevron-right text-light pl-1" /> <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 class="context-submenu">
<div <div
v-if="selectedRows.length === 1" v-if="selectedRows.length === 1"
@ -13,32 +22,57 @@
@click="copyCell" @click="copyCell"
> >
<span class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="copyRow('html')"> <div class="context-element" @click="copyRow('html')">
<span class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="copyRow('json')"> <div class="context-element" @click="copyRow('json')">
<span class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="copyRow('csv')"> <div class="context-element" @click="copyRow('csv')">
<span class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="copyRow('php')"> <div class="context-element" @click="copyRow('php')">
<span class="d-flex"> <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> </span>
</div> </div>
<div class="context-element" @click="copyRow('sql')"> <div class="context-element" @click="copyRow('sql')">
<span class="d-flex"> <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> </span>
</div> </div>
</div> </div>
@ -49,7 +83,11 @@
@click="duplicateRow" @click="duplicateRow"
> >
<span class="d-flex"> <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> </span>
</div> </div>
<div <div
@ -57,9 +95,17 @@
class="context-element" class="context-element"
> >
<span class="d-flex"> <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> </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 class="context-submenu">
<div <div
v-for="method in fakerMethods[fakerGroup]" v-for="method in fakerMethods[fakerGroup]"
@ -79,7 +125,11 @@
@click="setNull" @click="setNull"
> >
<span class="d-flex"> <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> </span>
</div> </div>
<div <div
@ -88,7 +138,11 @@
@click="showConfirmModal" @click="showConfirmModal"
> >
<span class="d-flex"> <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> </span>
</div> </div>
</BaseContextMenu> </BaseContextMenu>
@ -100,6 +154,7 @@ import { computed, Prop } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

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

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

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

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

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

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

@ -4,19 +4,39 @@
@close-context="closeContext" @close-context="closeContext"
> >
<div class="context-element" @click.stop="closeAllTabs"> <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>
<div class="context-element" @click.stop="closeOtherTabs"> <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>
<div class="context-element" @click.stop="closeLeftTabs"> <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>
<div class="context-element" @click.stop="closeRightTabs"> <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> </div>
</BaseContextMenu> </BaseContextMenu>
</template> </template>
@ -25,6 +45,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue'; import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
const { t } = useI18n(); const { t } = useI18n();

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

@ -1,10 +1,5 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable selector-class-pattern */
.column-key { .column-key {
transform: rotate(45deg);
font-size: 0.7rem;
line-height: 1.5;
margin-right: 0.2rem;
&.key-pri, &.key-pri,
&.key-PRIMARY { &.key-PRIMARY {
color: goldenrod; 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 { .form-select {
cursor: pointer; cursor: pointer;

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

@ -79,3 +79,34 @@ declare module 'vuedraggable' {// <- to export as default
}>; }>;
export = draggableComponent; 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;
}