hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

HotbarIcon's refering to unknown entities should be removalable

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/components/hotbar/hotbar-icon.scss
View File

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

15
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -43,6 +43,7 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
active?: boolean; active?: boolean;
menuItems?: CatalogEntityContextMenu[]; menuItems?: CatalogEntityContextMenu[];
disabled?: boolean; disabled?: boolean;
inactive?: boolean;
size?: number; size?: number;
background?: string; background?: string;
} }
@ -65,7 +66,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
} }
export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => { 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 id = `hotbarIcon-${uid}`;
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
@ -95,7 +96,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, inactive })}>
<MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right"> <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
<div id={id}> <div id={id}>
{renderIcon()} {renderIcon()}
@ -116,13 +117,13 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
} }
}} }}
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>
); );

17
src/renderer/components/hotbar/hotbar-menu.tsx
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,8 +157,13 @@ 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={[
disabled {
title: "Unpin from Hotbar",
onClick: () => this.removeItem(item.entity.uid)
}
]}
inactive
size={40} size={40}
/> />
)} )}