diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 6a01b3101e..fa0116937b 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -158,18 +158,6 @@ export class HotbarStore extends BaseStore { hotbar.items[index] = null; } - addEmptyCell() { - const hotbar = this.getActive(); - - hotbar.items.push(null); - } - - removeEmptyCell(index: number) { - const hotbar = this.getActive(); - - hotbar.items.splice(index, 1); - } - switchToPrevious() { const hotbarStore = HotbarStore.getInstance(); let index = hotbarStore.activeHotbarIndex - 1; diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss index af41e1b95b..6c8559fbd9 100644 --- a/src/renderer/components/hotbar/hotbar-menu.scss +++ b/src/renderer/components/hotbar/hotbar-menu.scss @@ -12,12 +12,6 @@ height: 4px; // extra spacing for mac-os "traffic-light" buttons } - &:hover { - .AddCellButton { - opacity: 1; - } - } - .HotbarItems { --cellWidth: 40px; --cellHeight: 40px; @@ -53,55 +47,23 @@ transform: translateZ(0); // Remove flickering artifacts &:hover { - .cellDeleteButton { - opacity: 1; - transition: opacity 0.1s 0.2s; - } - - &:not(.empty) { + &:not(:empty) { box-shadow: 0 0 0px 3px #ffffff1a; } } &.animating { - &.empty { + &:empty { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; } - &:not(.empty) { + &:not(:empty) { animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1); } } - - .cellDeleteButton { - width: 2rem; - height: 2rem; - border-radius: 50%; - background-color: var(--textColorDimmed); - position: absolute; - top: -7px; - right: -7px; - color: var(--secondaryBackground); - opacity: 0; - border: 3px solid var(--clusterMenuBackground); - box-sizing: border-box; - - &:hover { - background-color: white; - transition: all 0.2s; - } - - .Icon { - --smallest-size: 12px; - font-weight: bold; - position: relative; - top: -2px; - left: .5px; - } - } } } @@ -141,30 +103,6 @@ } } } - - .AddCellButton { - width: 40px; - height: 40px; - min-height: 40px; - margin: 12px auto 8px; - background-color: transparent; - color: var(--textColorDimmed); - border-radius: 6px; - transition: all 0.2s; - cursor: pointer; - z-index: 1; - opacity: 0; - transition: all 0.2s; - - &:hover { - background-color: var(--sidebarBackground); - } - - .Icon { - --size: 24px; - margin-left: 2px; - } - } } @keyframes shake { diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx index 29c44fc81e..168f630327 100644 --- a/src/renderer/components/hotbar/hotbar-menu.tsx +++ b/src/renderer/components/hotbar/hotbar-menu.tsx @@ -6,7 +6,7 @@ import { observer } from "mobx-react"; import { HotbarIcon } from "./hotbar-icon"; import { cssNames, IClassName } from "../../utils"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; -import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store"; +import { HotbarItem, HotbarStore } from "../../../common/hotbar-store"; import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity"; import { Icon } from "../icon"; import { Badge } from "../badge"; @@ -72,14 +72,6 @@ export class HotbarMenu extends React.Component { }); } - renderAddCellButton() { - return ( - - ); - } - render() { const { className } = this.props; const hotbarStore = HotbarStore.getInstance(); @@ -90,7 +82,6 @@ export class HotbarMenu extends React.Component {
{this.renderGrid()} - {this.hotbar.items.length != defaultHotbarCells && this.renderAddCellButton()}
this.previous()} /> @@ -119,23 +110,14 @@ function HotbarCell(props: HotbarCellProps) { const [animating, setAnimating] = useState(false); const onAnimationEnd = () => { setAnimating(false); }; const onClick = () => { setAnimating(true); }; - const onDeleteClick = (evt: Event | React.SyntheticEvent) => { - evt.stopPropagation(); - HotbarStore.getInstance().removeEmptyCell(props.index); - }; return (
{props.children} - {!props.children && ( -
- -
- )}
); }