tweak hotbar icon context menu

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

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

@@ -1,44 +1,58 @@
-.HotbarIcon {
-  --size: 37px;
+.HotbarMenu {
+  .HotbarIcon {
+    --size: 37px;
 
-  position: relative;
-  border-radius: 8px;
-  padding: 2px;
-  user-select: none;
-  cursor: pointer;
+    position: relative;
+    border-radius: 8px;
+    padding: 2px;
+    user-select: none;
+    cursor: pointer;
 
-  div.MuiAvatar-colorDefault {
-    font-weight:500;
-    text-transform: uppercase;
-    border-radius: 4px;
-  }
+    div.MuiAvatar-colorDefault {
+      font-weight:500;
+      text-transform: uppercase;
+      border-radius: 4px;
+    }
 
-  div.active {
-    background-color: var(--primary);
-  }
-
-  div.default {
-    background-color: var(--halfGray);
-  }
-
-  &.active {
-    margin-left: -3px;
-    border: 3px solid #fff;
-  }
-
-  &.active, &.interactive:hover {
-
-    div {
+    div.active {
       background-color: var(--primary);
     }
 
+    div.default {
+      background-color: var(--halfGray);
+    }
+
+    &.active {
+      margin-left: -3px;
+      border: 3px solid #fff;
+    }
+
+    &.active, &.interactive:hover {
+
+      div {
+        background-color: var(--primary);
+      }
+
+      img {
+        opacity: 1;
+      }
+    }
+
     img {
-      opacity: 1;
+      width: var(--size);
+      height: var(--size);
     }
   }
 
-  img {
-    width: var(--size);
-    height: var(--size);
+  .HotbarIconMenu {
+    left: 30px;
+    min-width: 250px;
+
+    ul {
+      li {
+        font-size: 12px;
+
+      }
+    }
   }
 }

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

@@ -14,6 +14,7 @@ import { hotbarStore } from "../../../common/hotbar-store";
 
 interface Props extends DOMAttributes<HTMLElement> {
   entity: CatalogEntity;
+  index: number;
   className?: IClassName;
   errorClass?: IClassName;
   isActive?: boolean;
@@ -70,7 +71,7 @@ export class HotbarIcon extends React.Component<Props> {
       entity, errorClass, isActive,
       children, ...elemProps
     } = this.props;
-    const entityIconId = `hotbar-icon-${entity.metadata.uid}`;
+    const entityIconId = `hotbar-icon-${this.props.index}`;
     const className = cssNames("HotbarIcon flex inline", this.props.className, {
       interactive: true,
       active: isActive,
@@ -81,15 +82,16 @@ export class HotbarIcon extends React.Component<Props> {
     };
 
     return (
-      <div {...elemProps} className={className} id={entityIconId}>
+      <div className={className}>
         <Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
-        <Avatar variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
+        <Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
         <Menu
-          usePortal={true}
+          usePortal={false}
           htmlFor={entityIconId}
+          className="HotbarIconMenu"
           isOpen={this.menuOpen}
           toggleEvent="contextmenu"
-          position={{right: true, top: true}} // FIXME: position does not work
+          position={{right: true, bottom: true }} // FIXME: position does not work
           open={() => onOpen()}
           close={() => this.toggleMenu()}>
           <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(entity) }>

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

@@ -14,9 +14,9 @@
   }
 
   .items {
-    @include hidden-scrollbar;
     padding: 0 $spacing; // extra spacing for cluster-icon's badge
     margin-bottom: $margin;
+    overflow: visible;
 
     &:empty {
       display: none;

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

@@ -27,10 +27,11 @@ export class HotbarMenu extends React.Component<Props> {
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
         <div className="items flex column gaps">
-          {items.map((entity) => {
+          {items.map((entity, index) => {
             return (
               <HotbarIcon
-                key={entity.metadata.uid}
+                key={index}
+                index={index}
                 entity={entity}
                 isActive={entity.status.active}
                 onClick={() => entity.onRun(catalogEntityRunContext)}