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

fix(UI): folder to folder drag glitches

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

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

@ -64,7 +64,9 @@ export const useConnectionsStore = defineStore('connections', {
return { return {
isFolder: false, isFolder: false,
uid: conn.uid, uid: conn.uid,
client: conn.client client: conn.client,
icon: null,
name: null
}; };
}); });
persistentStore.set('connectionsOrder', connectionsOrder); persistentStore.set('connectionsOrder', connectionsOrder);
@ -108,7 +110,9 @@ export const useConnectionsStore = defineStore('connections', {
return conn; return conn;
}); });
console.log(this.connectionsOrder);
persistentStore.set('connectionsOrder', this.connectionsOrder); persistentStore.set('connectionsOrder', this.connectionsOrder);
this.clearEmptyFolders();
}, },
deleteConnection (connection: SidebarElement | ConnectionParams) { deleteConnection (connection: SidebarElement | ConnectionParams) {
this.connectionsOrder = (this.connectionsOrder as SidebarElement[]).map(el => { // Removes connection from folders 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); 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); this.connections = (this.connections as SidebarElement[]).filter(el => el.uid !== connection.uid);
persistentStore.set('connections', this.connections); persistentStore.set('connections', this.connections);
this.clearEmptyFolders();
}, },
editConnection (connection: ConnectionParams) { editConnection (connection: ConnectionParams) {
const editedConnections = (this.connections as ConnectionParams[]).map(conn => { 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() }); this.lastConnections.push({ uid, time: new Date().getTime() });
persistentStore.set('lastConnections', this.lastConnections); 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);
} }
} }
}); });