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: modal with all connections

Browse Source
This commit is contained in:
Fabio Di Stasio
2022-07-02 15:30:36 +02:00
parent 36e98e0742
commit a703dcc53e
10 changed files with 394 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<div id="settingbar">
<div class="settingbar-top-elements">
<div ref="sidebarConnections" class="settingbar-top-elements">
<SettingBarContext
v-if="isContext"
:context-event="contextEvent"
@ -24,7 +24,7 @@
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon dbi" :class="[`dbi-${element.client}`, getStatusBadge(element.uid), (pinnedConnections.has(element.uid) ? 'settingbar-element-pin' : false)]" />
<span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span>
<span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(element.uid) }}</span>
</li>
</template>
</Draggable>
@ -41,7 +41,21 @@
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon dbi" :class="[`dbi-${connection.client}`, getStatusBadge(connection.uid)]" />
<span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
<span v-if="!isDragging && !isScrolling" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
</li>
</ul>
</div>
<div class="settingbar-middle-elements">
<ul class="settingbar-elements">
<li
v-if="isScrollable"
class="settingbar-element btn btn-link ex-tooltip"
@click="emit('show-connections-modal')"
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon mdi mdi-24px mdi-dots-horizontal text-light" />
<span class="ex-tooltip-content">{{ $t('message.allConnections') }}</span>
</li>
<li
class="settingbar-element btn btn-link ex-tooltip"
@ -79,6 +93,7 @@ import { useWorkspacesStore } from '@/stores/workspaces';
import * as Draggable from 'vuedraggable';
import SettingBarContext from '@/components/SettingBarContext.vue';
import { ConnectionParams } from 'common/interfaces/antares';
import { useElementBounding, useScroll } from '@vueuse/core';
const applicationStore = useApplicationStore();
const connectionsStore = useConnectionsStore();
@ -92,11 +107,18 @@ const { showSettingModal, showScratchpad } = applicationStore;
const { getConnectionName, updatePinnedConnections } = connectionsStore;
const { getWorkspace, selectWorkspace } = workspacesStore;
const emit = defineEmits(['show-connections-modal']);
const isLinux = process.platform === 'linux';
const sidebarConnections: Ref<HTMLDivElement> = ref(null);
const isContext: Ref<boolean> = ref(false);
const isDragging: Ref<boolean> = ref(false);
const isScrollable: Ref<boolean> = ref(false);
const isScrolling = ref(useScroll(sidebarConnections)?.isScrolling);
const contextEvent: Ref<MouseEvent> = ref(null);
const contextConnection: Ref<ConnectionParams> = ref(null);
const sidebarConnectionsHeight = ref(useElementBounding(sidebarConnections)?.height);
const pinnedConnectionsArr = computed({
get: () => [...pinnedConnections.value].map(c => storedConnections.value.find(sc => sc.uid === c)).filter(Boolean),
@ -133,11 +155,14 @@ const contextMenu = (event: MouseEvent, connection: ConnectionParams) => {
};
const tooltipPosition = (e: Event) => {
const el = e.target ? e.target : e;
const fromTop = isLinux
? window.scrollY + (el as HTMLElement).getBoundingClientRect().top + ((el as HTMLElement).offsetHeight / 4)
: window.scrollY + (el as HTMLElement).getBoundingClientRect().top - ((el as HTMLElement).offsetHeight / 4);
(el as HTMLElement).querySelector<HTMLElement>('.ex-tooltip-content').style.top = `${fromTop}px`;
const el = (e.target ? e.target : e) as unknown as HTMLElement;
const tooltip = el.querySelector<HTMLElement>('.ex-tooltip-content');
if (tooltip) {
const fromTop = isLinux
? window.scrollY + el.getBoundingClientRect().top + (el.offsetHeight / 4)
: window.scrollY + el.getBoundingClientRect().top - (el.offsetHeight / 4);
tooltip.style.top = `${fromTop}px`;
}
};
const getStatusBadge = (uid: string) => {
@ -166,6 +191,10 @@ const dragStop = (e: any) => {
}, 200);
};
watch(sidebarConnectionsHeight, (value) => {
isScrollable.value = value < sidebarConnections.value.scrollHeight;
});
watch(unpinnedConnectionsArr, (newVal, oldVal) => {
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
setTimeout(() => {
@ -193,7 +222,7 @@ watch(unpinnedConnectionsArr, (newVal, oldVal) => {
height: calc(100vh - #{$excluding-size});
display: flex;
flex-direction: column;
justify-content: space-between;
// justify-content: space-between;
align-items: center;
padding: 0;
z-index: 9;
@ -201,7 +230,7 @@ watch(unpinnedConnectionsArr, (newVal, oldVal) => {
.settingbar-top-elements {
overflow-x: hidden;
overflow-y: overlay;
max-height: calc((100vh - 3.5rem) - #{$excluding-size});
// max-height: calc((100vh - 3.5rem) - #{$excluding-size});
&::-webkit-scrollbar {
width: 3px;
@ -209,8 +238,8 @@ watch(unpinnedConnectionsArr, (newVal, oldVal) => {
}
.settingbar-bottom-elements {
padding-top: 0.5rem;
z-index: 1;
margin-top: auto;
}
.settingbar-elements {
@ -273,6 +302,7 @@ watch(unpinnedConnectionsArr, (newVal, oldVal) => {
&::before {
font: normal normal normal 14px/1 "Material Design Icons";
content: "\F0403";
color: $body-font-color-dark;
transform: rotate(45deg);
opacity: .25;
bottom: -8px;