From d531fad62f6359ee2333c4bdf9caba869d770f40 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Sun, 25 Apr 2021 06:44:51 +0300
Subject: [PATCH] Add/remove empty cells

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/hotbar/hotbar-icon.tsx         |  2 +-
 .../components/hotbar/hotbar-menu.scss        | 37 +++++++++++++++++++
 .../components/hotbar/hotbar-menu.tsx         |  7 +++-
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx
index 87cb06bebf..485be6f5ee 100644
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/src/renderer/components/hotbar/hotbar-icon.tsx
@@ -103,7 +103,7 @@ export class HotbarIcon extends React.Component<Props> {
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
         <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
         <Menu
-          usePortal={false}
+          usePortal
           htmlFor={entityIconId}
           className="HotbarIconMenu"
           isOpen={this.menuOpen}
diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 7ced9c4b8b..e222fd07aa 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -28,6 +28,42 @@
       margin: 8px;
       background: var(--sidebarBackground);
       border-radius: 4px;
+      position: relative;
+
+      &:hover {
+        .cellDeleteButton {
+          opacity: 1;
+          transition: opacity 0.1s 0.2s;
+        }
+      }
+
+      .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 {
+          border-color: var(--textColorAccent);
+          color: var(--textColorAccent);
+          transition: all 0.2s;
+        }
+
+        .Icon {
+          --smallest-size: 12px;
+          font-weight: bold;
+          position: relative;
+          top: -2px;
+          left: .5px;
+        }
+      }
     }
   }
 
@@ -58,6 +94,7 @@
 
     .Icon {
       --size: 24px;
+      margin-left: 2px;
     }
   }
 }
diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx
index b19668cf25..a486b53e59 100644
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@@ -83,6 +83,11 @@ 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>
       );
     });
@@ -90,7 +95,7 @@ export class HotbarMenu extends React.Component<Props> {
 
   renderAddCellButton() {
     return (
-      <button className="AddCellButton">
+      <button className="AddCellButton" onClick={() => HotbarStore.getInstance().addEmptyCell()}>
         <Icon material="add"/>
       </button>
     );