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

fix(UI): folder to folder drag glitches

This commit is contained in:
Fabio Di Stasio 2022-11-29 13:19:41 +01:00
parent 36358584fd
commit 0fca70ebec
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -179,6 +179,8 @@ const dragStop = () => {
watch(() => dummyNested.value.length, () => {
dummyNested.value = [];
});
emit('folder-sort');// To apply changes on component key change
</script>
<style lang="scss" scoped>
.folder {
@ -211,6 +213,7 @@ watch(() => dummyNested.value.length, () => {
gap: 4px;
padding: 4px;
height: 100%;
overflow: hidden;
width: 100%;
border-radius: 15px;
transition: background .3s;
@ -251,6 +254,8 @@ watch(() => dummyNested.value.length, () => {
.folder-element {
opacity: .6;
height: 2.5rem;
max-width: initial;
max-height: initial;
background: transparent;
&.selected {
@ -335,6 +340,8 @@ watch(() => dummyNested.value.length, () => {
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 23px;
max-height: 23px;
margin-bottom: 3px;
position: relative;
transition: opacity .2s;

28
src/renderer/stores/connections.ts
View File

@ -64,7 +64,9 @@ export const useConnectionsStore = defineStore('connections', {
return {
isFolder: false,
uid: conn.uid,
client: conn.client
client: conn.client,
icon: null,
name: null
};
});
persistentStore.set('connectionsOrder', connectionsOrder);
@ -108,7 +110,9 @@ export const useConnectionsStore = defineStore('connections', {
return conn;
});
console.log(this.connectionsOrder);
persistentStore.set('connectionsOrder', this.connectionsOrder);
this.clearEmptyFolders();
},
deleteConnection (connection: SidebarElement | ConnectionParams) {
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { // Removes connection from folders
@ -118,18 +122,9 @@ export const useConnectionsStore = defineStore('connections', {
});
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => el.uid !== connection.uid);
// Clear empty folders
const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce<string[]>((acc, curr) => {
if (curr.connections && curr.connections.length === 0)
acc.push(curr.uid);
return acc;
}, []);
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
persistentStore.set('connectionsOrder', this.connectionsOrder);
this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
persistentStore.set('connections', this.connections);
this.clearEmptyFolders();
},
editConnection (connection: ConnectionParams) {
const editedConnections = (this.connections as ConnectionParams[]).map(conn => {
@ -200,6 +195,17 @@ export const useConnectionsStore = defineStore('connections', {
this.lastConnections.push({ uid, time: new Date().getTime() });
persistentStore.set('lastConnections', this.lastConnections);
},
clearEmptyFolders () {
// Clear empty folders
const emptyFolders = (this.connectionsOrder as SidebarElement[]).reduce<string[]>((acc, curr) => {
if (curr.connections && curr.connections.length === 0)
acc.push(curr.uid);
return acc;
}, []);
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).filter(el => !emptyFolders.includes(el.uid));
persistentStore.set('connectionsOrder', this.connectionsOrder);
}
}
});