fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat: custom SVG icons for connections, closes #663

Browse Source
This commit is contained in:
Fabio Di Stasio
2024-07-11 18:06:41 +02:00
parent f7419d8e9c
commit 171b6f924a
12 changed files with 166 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,18 +49,46 @@
class="icon-box"
:title="icon.name"
:class="[{'selected': localConnection.icon === icon.code}]"
@click="localConnection.icon = icon.code"
@click="setIcon(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"
:class="[`dbi dbi-${connection.client}`, {'selected': localConnection.icon === null}]"
@click="setIcon(null)"
/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-3">
<label class="form-label">{{ t('application.customIcon') }}</label>
</div>
<div class="col-9 icons-wrapper">
<div
v-for="icon in customIcons"
:key="icon.uid"
>
<BaseIcon
v-if="icon.uid"
:icon-name="icon.uid"
type="custom"
:size="36"
class="icon-box"
:class="[{'selected': localConnection.icon === icon.uid}]"
@click="setIcon(icon.uid, 'custom')"
@contextmenu.prevent="contextMenu($event, icon.uid)"
/>
</div>
<BaseIcon
:icon-name="'mdiPlus'"
:size="36"
class="icon-box"
@click="openFile"
/>
</div>
</div>
</form>
</div>
</div>
@@ -74,20 +102,45 @@
</div>
</div>
</div>
<BaseContextMenu
v-if="isContext"
:context-event="contextEvent"
@close-context="isContext = false"
>
<div class="context-element" @click="removeIconHandler">
<span class="d-flex">
<BaseIcon
class="text-light mt-1 mr-1"
icon-name="mdiDelete"
:size="18"
/> {{ t('general.delete') }}</span>
</div>
</BaseContextMenu>
</Teleport>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { onBeforeUnmount, PropType, Ref, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import BaseContextMenu from '@/components/BaseContextMenu.vue';
import BaseIcon from '@/components/BaseIcon.vue';
import { useFocusTrap } from '@/composables/useFocusTrap';
import Application from '@/ipc-api/Application';
import { camelize } from '@/libs/camelize';
import { unproxify } from '@/libs/unproxify';
import { SidebarElement, useConnectionsStore } from '@/stores/connections';
const connectionsStore = useConnectionsStore();
const { addIcon, removeIcon, updateConnectionOrder, getConnectionName } = connectionsStore;
const { customIcons } = storeToRefs(connectionsStore);
const isContext = ref(false);
const contextContent: Ref<string> = ref(null);
const contextEvent: Ref<MouseEvent> = ref(null);
const { t } = useI18n();
const props = defineProps({
@@ -99,8 +152,6 @@ const props = defineProps({
const emit = defineEmits(['close']);
const { updateConnectionOrder, getConnectionName } = connectionsStore;
const icons = [
{ name: 'default', code: null },
@@ -160,14 +211,33 @@ const editFolderAppearance = () => {
closeModal();
};
const camelize = (text: string) => {
const textArr = text.split('-');
for (let i = 0; i < textArr.length; i++) {
if (i === 0) continue;
textArr[i] = textArr[i].charAt(0).toUpperCase() + textArr[i].slice(1);
}
const setIcon = (code: string, type?: 'mdi' | 'custom') => {
localConnection.value.icon = code;
localConnection.value.hasCustomIcon = type === 'custom';
};
return textArr.join('');
const removeIconHandler = () => {
if (localConnection.value.icon === contextContent.value) {
setIcon(null);
updateConnectionOrder(localConnection.value);
}
removeIcon(contextContent.value);
isContext.value = false;
};
const openFile = async () => {
const result = await Application.showOpenDialog({ properties: ['openFile'], filters: [{ name: '"SVG"', extensions: ['svg'] }] });
if (result && !result.canceled) {
const file = result.filePaths[0];
const content = await Application.readFile({ filePath: file, encoding: 'base64url' });
addIcon(content);
}
};
const contextMenu = (event: MouseEvent, iconUid: string) => {
contextEvent.value = event;
contextContent.value = iconUid;
isContext.value = true;
};
const closeModal = () => emit('close');