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

tweak hotbar icon context menu

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-04-08 08:18:29 +03:00
parent 0a6921da28
commit f78c876d5d
4 changed files with 57 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,58 @@
.HotbarIcon { .HotbarMenu {
--size: 37px; .HotbarIcon {
--size: 37px;
position: relative; position: relative;
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
div.MuiAvatar-colorDefault { div.MuiAvatar-colorDefault {
font-weight:500; font-weight:500;
text-transform: uppercase; text-transform: uppercase;
border-radius: 4px; border-radius: 4px;
} }
div.active { 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); 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 { img {
opacity: 1; width: var(--size);
height: var(--size);
} }
} }
img { .HotbarIconMenu {
width: var(--size); left: 30px;
height: var(--size); min-width: 250px;
ul {
li {
font-size: 12px;
}
}
} }
} }

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

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

2
src/renderer/components/hotbar/hotbar-menu.scss
View File

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

5
src/renderer/components/hotbar/hotbar-menu.tsx
View File

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