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 (#3190)

* HotbarIcon's refering to unknown entities should be removalable
* Allow menu to open when icon is disabled
* Add cursor context-menu

Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2021-06-28 11:28:18 -04:00 committed by GitHub
parent 2788025fea
commit 0b88df9b36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 18 deletions

View File

@ -49,6 +49,10 @@
cursor: default; cursor: default;
filter: grayscale(0.7); filter: grayscale(0.7);
&.contextMenuAvailable {
cursor: context-menu;
}
&:hover { &:hover {
&:not(.active) { &:not(.active) {
box-shadow: none; box-shadow: none;

View File

@ -95,7 +95,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
}; };
return ( return (
<div className={cssNames("HotbarIcon flex", className, { disabled })}> <div className={cssNames("HotbarIcon flex", className, { disabled, contextMenuAvailable: menuItems.length > 0 })}>
<MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right"> <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
<div id={id}> <div id={id}>
{renderIcon()} {renderIcon()}
@ -110,19 +110,17 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
toggleEvent="contextmenu" toggleEvent="contextmenu"
position={{right: true, bottom: true }} // FIXME: position does not work position={{right: true, bottom: true }} // FIXME: position does not work
open={() => { open={() => {
if (!disabled) {
onMenuOpen?.(); onMenuOpen?.();
toggleMenu(); toggleMenu();
}
}} }}
close={() => toggleMenu()}> close={() => toggleMenu()}>
{ menuItems.map((menuItem) => { {
return ( menuItems.map((menuItem) => (
<MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}> <MenuItem key={menuItem.title} onClick={() => onMenuItemClick(menuItem)}>
{menuItem.title} {menuItem.title}
</MenuItem> </MenuItem>
); ))
})} }
</Menu> </Menu>
</div> </div>
); );

View File

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