Add hotbar cell animations

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -5,6 +5,7 @@
     border-radius: 6px;
     user-select: none;
     cursor: pointer;
+    transition: none;
 
     div.MuiAvatar-colorDefault {
       font-weight:500;
@@ -12,13 +13,9 @@
       border-radius: 6px;
     }
 
-    &.interactive {
-      margin-left: -3px;
-      border: 3px solid var(--clusterMenuBackground);
-    }
-
     &.active {
-      box-shadow: 0 0 0 1px var(--clusterMenuBackground), 0px 0px 0 4px white;
+      box-shadow: 0 0 0px 3px #ffffff;
+      transition: all 0s 0.8s;
     }
 
     &.active, &.interactive:hover {

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

@@ -50,6 +50,7 @@
       background: var(--layoutBackground);
       border-radius: 6px;
       position: relative;
+      transform: translateZ(0); // Remove flickering artifacts
 
       &:hover {
         .cellDeleteButton {
@@ -58,6 +59,19 @@
         }
       }
 
+      &.animating {
+        &.empty {
+          animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
+          transform: translate3d(0, 0, 0);
+          backface-visibility: hidden;
+          perspective: 1000px;
+        }
+
+        &:not(.empty) {
+          animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1);
+        }
+      }
+
       .cellDeleteButton {
         width: 2rem;
         height: 2rem;
@@ -148,3 +162,32 @@
     }
   }
 }
+
+@keyframes shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+// TODO: Use theme-aware colors
+@keyframes outline {
+  0% {
+    box-shadow: 0 0 0px 11px $clusterMenuBackground, 0 0 0px 15px #ffffff00;
+  }
+
+  100% {
+    box-shadow: 0 0 0px 0px $clusterMenuBackground, 0 0 0px 3px #ffffff;
+  }
+}

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

@@ -1,7 +1,7 @@
 import "./hotbar-menu.scss";
 import "./hotbar.commands";
 
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
@@ -58,7 +58,7 @@ export class HotbarMenu extends React.Component<Props> {
       const entity = this.getEntity(item);
 
       return (
-        <HotbarCell key={index}>
+        <HotbarCell key={index} index={index}>
           {entity && (
             <HotbarIcon
               key={index}
@@ -68,11 +68,6 @@ export class HotbarMenu extends React.Component<Props> {
               onClick={() => entity.onRun(catalogEntityRunContext)}
             />
           )}
-          {!entity && (
-            <div className="cellDeleteButton" onClick={() => HotbarStore.getInstance().removeEmptyCell(index)}>
-              <Icon material="close" smallest/>
-            </div>
-          )}
         </HotbarCell>
       );
     });
@@ -118,10 +113,30 @@ export class HotbarMenu extends React.Component<Props> {
 
 interface HotbarCellProps {
   children?: ReactNode;
+  index: number;
 }
 
 function HotbarCell(props: HotbarCellProps) {
+  const [animating, setAnimating] = useState(false);
+  const onAnimationEnd = () => { setAnimating(false); };
+  const onClick = () => { setAnimating(true); };
+  const onDeleteClick = (evt: Event | React.SyntheticEvent) => {
+    evt.stopPropagation();
+    HotbarStore.getInstance().removeEmptyCell(props.index);
+  };
+
   return (
-    <div className="HotbarCell">{props.children}</div>
+    <div
+      className={cssNames("HotbarCell", { animating, empty: !props.children })}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+    >
+      {props.children}
+      {!props.children && (
+        <div className="cellDeleteButton" onClick={onDeleteClick}>
+          <Icon material="close" smallest/>
+        </div>
+      )}
+    </div>
   );
 }