Fixing hotbar drag-n-drop animation issues (#2704)

src/common/__tests__/hotbar-store.test.ts

@@ -207,6 +207,21 @@ describe("HotbarStore", () => {
       expect(hotbarStore.getActive().items[0].entity.uid).toEqual("test");
     });
 
+    it("new items takes first empty cell", () => {
+      const hotbarStore = HotbarStore.createInstance();
+      const test = new CatalogEntityItem(testCluster);
+      const minikube = new CatalogEntityItem(minikubeCluster);
+      const aws = new CatalogEntityItem(awsCluster);
+
+      hotbarStore.load();
+      hotbarStore.addToHotbar(test);
+      hotbarStore.addToHotbar(aws);
+      hotbarStore.restackItems(0, 3);
+      hotbarStore.addToHotbar(minikube);
+
+      expect(hotbarStore.getActive().items[0].entity.uid).toEqual("minikube");
+    });
+
     it("throws if invalid arguments provided", () => {
       // Prevent writing to stderr during this render.
       const err = console.error;

src/renderer/components/hotbar/hotbar-icon.scss

@@ -6,6 +6,8 @@
     user-select: none;
     cursor: pointer;
     transition: none;
+    text-shadow: 0 0 4px #0000008f;
+    position: relative;
 
     div.MuiAvatar-colorDefault {
       font-weight:500;
@@ -25,8 +27,10 @@
     }
 
     &:hover {
+      &:not(.active) {
         box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
       }
+    }
 
     &.isDragging {
       box-shadow: none;

src/renderer/components/hotbar/hotbar-menu.scss

@@ -46,12 +46,32 @@
       position: relative;
 
       &.isDraggingOver {
-        box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff;
+        background-color: #3e4148;
+        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30;
+
+        &:not(.isDraggingOwner) {
+          z-index: 50;
+
+          > div:not(:empty) {
+            border-radius: 6px;
+            box-shadow: 0 0 9px #00000042;
+          }
+
+          &.animateUp {
+            > div {
+              transform: translate(0px, -40px)!important;
+            }
+          }
+
+          &.animateDown {
+            > div {
+              transform: translate(0px, 40px);
+            }
+          }
+        }
       }
 
       &.animating {
-        transform: translateZ(0); // Remove flickering artifacts
-
         &:empty {
           animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
           transform: translate3d(0, 0, 0);
@@ -60,7 +80,9 @@
         }
 
         &:not(:empty) {
-          animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1);
+          .HotbarIcon {
+            animation: click .1s;
+          }
         }
       }
     }
@@ -85,13 +107,12 @@
   }
 }
 
-// TODO: Use theme-aware colors
-@keyframes outline {
+@keyframes click {
   0% {
-    box-shadow: 0 0 0px 11px $clusterMenuBackground, 0 0 0px 15px #ffffff00;
+    margin-top: 0;
   }
 
   100% {
-    box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff;
+    margin-top: 2px;
   }
 }

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -48,9 +48,16 @@ export class HotbarMenu extends React.Component<Props> {
     HotbarStore.getInstance().restackItems(from, to);
   }
 
+  getMoveAwayDirection(entityId: string, cellIndex: number) {
+    const draggableItemIndex = this.hotbar.items.findIndex(item => item?.entity.uid == entityId);
+
+    return draggableItemIndex > cellIndex ? "animateDown" : "animateUp";
+  }
+
   renderGrid() {
     return this.hotbar.items.map((item, index) => {
       const entity = this.getEntity(item);
+      const isActive = !entity ? false : this.isActive(entity);
 
       return (
         <Droppable droppableId={`${index}`} key={index}>
@@ -59,7 +66,10 @@ export class HotbarMenu extends React.Component<Props> {
               index={index}
               key={entity ? entity.getId() : `cell${index}`}
               innerRef={provided.innerRef}
-              className={cssNames({ isDraggingOver: snapshot.isDraggingOver })}
+              className={cssNames({
+                isDraggingOver: snapshot.isDraggingOver,
+                isDraggingOwner: snapshot.draggingOverWith == entity?.getId(),
+              }, this.getMoveAwayDirection(snapshot.draggingOverWith, index))}
               {...provided.droppableProps}
             >
               {entity && (
@@ -83,7 +93,7 @@ export class HotbarMenu extends React.Component<Props> {
                           key={index}
                           index={index}
                           entity={entity}
-                          isActive={this.isActive(entity)}
+                          isActive={isActive}
                           onClick={() => entity.onRun(catalogEntityRunContext)}
                           className={cssNames({ isDragging: snapshot.isDragging })}
                         />