perf(UI): improvements in setting bar connections sort

This commit is contained in:
Fabio Di Stasio 2021-07-15 18:31:44 +02:00
parent d38097d056
commit 0c29e0d566
4 changed files with 24 additions and 16 deletions

View File

@ -8,19 +8,23 @@
@close-context="isContext = false"
/>
<ul class="settingbar-elements">
<Draggable v-model="connections">
<Draggable
v-model="connections"
@start="isDragging = true"
@end="dragStop"
>
<li
v-for="connection in connections"
:key="connection.uid"
draggable="true"
class="settingbar-element btn btn-link ex-tooltip"
:class="{'selected': connection.uid === selectedWorkspace}"
@click="selectWorkspace(connection.uid)"
@click.stop="selectWorkspace(connection.uid)"
@contextmenu.prevent="contextMenu($event, connection)"
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${getStatusBadge(connection.uid)}`" />
<span class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
<span v-if="!isDragging" class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
</li>
</Draggable>
<li
@ -65,6 +69,7 @@ export default {
return {
dragElement: null,
isContext: false,
isDragging: false,
contextEvent: null,
contextConnection: {},
scale: 0
@ -106,7 +111,7 @@ export default {
return connection.ask ? '' : `${connection.user + '@'}${connection.host}:${connection.port}`;
},
tooltipPosition (e) {
const el = e.target;
const el = e.target ? e.target : e;
const fromTop = window.pageYOffset + el.getBoundingClientRect().top - (el.offsetHeight / 4);
el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`;
},
@ -125,6 +130,13 @@ export default {
return '';
}
}
},
dragStop (e) {
this.isDragging = false;
setTimeout(() => {
this.tooltipPosition(e.originalEvent.target.parentNode);
}, 200);
}
}
};
@ -235,7 +247,13 @@ export default {
transition: opacity 0.2s;
}
&:hover .ex-tooltip-content {
&.sortable-chosen {
.ex-tooltip-content {
opacity: 0 !important;
}
}
&:hover:not(.selected) .ex-tooltip-content {
visibility: visible;
opacity: 1;
}

View File

@ -387,11 +387,6 @@
background: rgba(48, 55, 66, 0.95);
color: #fff;
}
&:hover .ex-tooltip-content {
visibility: visible;
opacity: 1;
}
}
#footer {

View File

@ -168,11 +168,6 @@
background: rgba(48, 55, 66, 0.95);
color: #fff;
}
&:hover .ex-tooltip-content {
visibility: visible;
opacity: 1;
}
}
.workspace {

View File

@ -239,7 +239,7 @@ export default {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace);
},
UPDATE_TABS (state, { uid, tabs }) {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, tabs } : workspace); ;
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, tabs } : workspace);
},
SET_TAB_FIELDS (state, { cUid, tUid, fields }) {
state.workspaces = state.workspaces.map(workspace => {