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:
parent
2788025fea
commit
0b88df9b36
@ -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;
|
||||||
|
|||||||
@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user