1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

HotbarIcon's refering to unknown entities should be removalable

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-06-25 16:13:45 -04:00
parent 4e235a95a1
commit 2024dd9412
3 changed files with 25 additions and 18 deletions

View File

@ -44,9 +44,8 @@
border-radius: 6px;
}
&.disabled {
&.disabled,&.inactive {
opacity: 0.4;
cursor: default;
filter: grayscale(0.7);
&:hover {
@ -56,6 +55,14 @@
}
}
&.disabled {
cursor: default;
}
&.inactive {
cursor: context-menu;
}
&.isDragging {
box-shadow: none;
}

View File

@ -43,6 +43,7 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
active?: boolean;
menuItems?: CatalogEntityContextMenu[];
disabled?: boolean;
inactive?: boolean;
size?: number;
background?: string;
}
@ -65,7 +66,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
}
export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, children, ...rest } = props;
const { uid, title, src, material, active, className, source, disabled, onMenuOpen, onClick, inactive, children, ...rest } = props;
const id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false);
@ -95,7 +96,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
};
return (
<div className={cssNames("HotbarIcon flex", className, { disabled })}>
<div className={cssNames("HotbarIcon flex", className, { disabled, inactive })}>
<MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
<div id={id}>
{renderIcon()}
@ -116,13 +117,13 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
}
}}
close={() => toggleMenu()}>
{ menuItems.map((menuItem) => {
return (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem) }>
{
menuItems.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
{menuItem.title}
</MenuItem>
);
})}
))
}
</Menu>
</div>
);

View File

@ -27,7 +27,7 @@ import { HotbarEntityIcon } from "./hotbar-entity-icon";
import { cssNames, IClassName } from "../../utils";
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store";
import { CatalogEntity, CatalogEntityContextMenu, catalogEntityRunContext } from "../../api/catalog-entity";
import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
import { HotbarSelector } from "./hotbar-selector";
import { HotbarCell } from "./hotbar-cell";
@ -110,12 +110,6 @@ export class HotbarMenu extends React.Component<Props> {
renderGrid() {
return this.items.map((item, index) => {
const entity = this.getEntity(item);
const disabledMenuItems: CatalogEntityContextMenu[] = [
{
title: "Unpin from Hotbar",
onClick: () => this.removeItem(item.entity.uid)
}
];
return (
<Droppable droppableId={`${index}`} key={index}>
@ -163,8 +157,13 @@ export class HotbarMenu extends React.Component<Props> {
uid={`hotbar-icon-${item.entity.uid}`}
title={item.entity.name}
source={item.entity.source}
menuItems={disabledMenuItems}
disabled
menuItems={[
{
title: "Unpin from Hotbar",
onClick: () => this.removeItem(item.entity.uid)
}
]}
inactive
size={40}
/>
)}