mirror of
https://github.com/Fabio286/antares.git
synced 2025-02-16 19:50:37 +01:00
fix(UI): folder to folder drag glitches
This commit is contained in:
parent
36358584fd
commit
0fca70ebec
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
x
Reference in New Issue
Block a user