Removing add/delete empty cells feature (#2667)

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

src/common/hotbar-store.ts

@@ -158,18 +158,6 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     hotbar.items[index] = null;
   }
 
-  addEmptyCell() {
-    const hotbar = this.getActive();
-
-    hotbar.items.push(null);
-  }
-
-  removeEmptyCell(index: number) {
-    const hotbar = this.getActive();
-
-    hotbar.items.splice(index, 1);
-  }
-
   switchToPrevious() {
     const hotbarStore = HotbarStore.getInstance();
     let index = hotbarStore.activeHotbarIndex - 1;

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

@@ -12,12 +12,6 @@
     height: 4px; // extra spacing for mac-os "traffic-light" buttons
   }
 
-  &:hover {
-    .AddCellButton {
-      opacity: 1;
-    }
-  }
-
   .HotbarItems {
     --cellWidth: 40px;
     --cellHeight: 40px;
@@ -53,55 +47,23 @@
       transform: translateZ(0); // Remove flickering artifacts
 
       &:hover {
-        .cellDeleteButton {
+        &:not(:empty) {
-          opacity: 1;
-          transition: opacity 0.1s 0.2s;
-        }
-
-        &:not(.empty) {
           box-shadow: 0 0 0px 3px #ffffff1a;
         }
       }
 
       &.animating {
-        &.empty {
+        &:empty {
           animation: shake .6s cubic-bezier(.36,.07,.19,.97) both;
           transform: translate3d(0, 0, 0);
           backface-visibility: hidden;
           perspective: 1000px;
         }
 
-        &:not(.empty) {
+        &:not(:empty) {
           animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1);
         }
       }
-
-      .cellDeleteButton {
-        width: 2rem;
-        height: 2rem;
-        border-radius: 50%;
-        background-color: var(--textColorDimmed);
-        position: absolute;
-        top: -7px;
-        right: -7px;
-        color: var(--secondaryBackground);
-        opacity: 0;
-        border: 3px solid var(--clusterMenuBackground);
-        box-sizing: border-box;
-
-        &:hover {
-          background-color: white;
-          transition: all 0.2s;
-        }
-
-        .Icon {
-          --smallest-size: 12px;
-          font-weight: bold;
-          position: relative;
-          top: -2px;
-          left: .5px;
-        }
-      }
     }
   }
 
@@ -141,30 +103,6 @@
       }
     }
   }
-
-  .AddCellButton {
-    width: 40px;
-    height: 40px;
-    min-height: 40px;
-    margin: 12px auto 8px;
-    background-color: transparent;
-    color: var(--textColorDimmed);
-    border-radius: 6px;
-    transition: all 0.2s;
-    cursor: pointer;
-    z-index: 1;
-    opacity: 0;
-    transition: all 0.2s;
-
-    &:hover {
-      background-color: var(--sidebarBackground);
-    }
-
-    .Icon {
-      --size: 24px;
-      margin-left: 2px;
-    }
-  }
 }
 
 @keyframes shake {

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

@@ -6,7 +6,7 @@ import { observer } from "mobx-react";
 import { HotbarIcon } from "./hotbar-icon";
 import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
-import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
+import { HotbarItem, HotbarStore } from "../../../common/hotbar-store";
 import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
@@ -72,14 +72,6 @@ export class HotbarMenu extends React.Component<Props> {
     });
   }
 
-  renderAddCellButton() {
-    return (
-      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
-        <Icon material="add"/>
-      </button>
-    );
-  }
-
   render() {
     const { className } = this.props;
     const hotbarStore = HotbarStore.getInstance();
@@ -90,7 +82,6 @@ export class HotbarMenu extends React.Component<Props> {
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="HotbarItems flex column gaps">
           {this.renderGrid()}
-          {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
         </div>
         <div className="HotbarSelector flex align-center">
           <Icon material="play_arrow" className="previous box" onClick={() => this.previous()} />
@@ -119,23 +110,14 @@ 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={cssNames("HotbarCell", { animating, empty: !props.children })}
+      className={cssNames("HotbarCell", { animating })}
       onAnimationEnd={onAnimationEnd}
       onClick={onClick}
     >
       {props.children}
-      {!props.children && (
-        <div className="cellDeleteButton" onClick={onDeleteClick}>
-          <Icon material="close" smallest/>
-        </div>
-      )}
     </div>
   );
 }