fix(UI): folder to folder drag glitches

antares-sql · Nov 29, 2022 · 0fca70e · 0fca70e
1 parent 3635858
commit 0fca70e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/src/renderer/components/SettingBarConnectionsFolder.vue b/src/renderer/components/SettingBarConnectionsFolder.vue
@@ -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;

diff --git a/src/renderer/stores/connections.ts b/src/renderer/stores/connections.ts
@@ -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);
       }
    }
 });