Hotbar command palette + switching (#2552)

* fix initial hotbar not showing

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* hotbar command palette + switching

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* add clickable index to switcher

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix typo

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remote notifications

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix add to hotbar

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* don't show remove-from-hotbar on catalog context menu

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen authored and GitHub committed 2021-04-22 10:07:14 +03:00
1 parent b63fdfaff3
commit da8cc889c4
14 files changed
+350 -24

No files matched your search

+26 -2
View File
@@ -1,4 +1,5 @@
import "./hotbar-menu.scss";
import "./hotbar.commands";
import React from "react";
import { observer } from "mobx-react";
@@ -7,6 +8,10 @@ import { cssNames, IClassName } from "../../utils";
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
import { HotbarStore } from "../../../common/hotbar-store";
import { catalogEntityRunContext } from "../../api/catalog-entity";
import { Icon } from "../icon";
import { Badge } from "../badge";
import { CommandOverlay } from "../command-palette";
import { HotbarSwitchCommand } from "./hotbar-switch-command";
interface Props {
className?: IClassName;
@@ -14,9 +19,8 @@ interface Props {
@observer
export class HotbarMenu extends React.Component<Props> {
get hotbarItems() {
const hotbar = HotbarStore.getInstance().getByName("default"); // FIXME
const hotbar = HotbarStore.getInstance().getActive();
if (!hotbar) {
return [];
@@ -25,8 +29,21 @@ export class HotbarMenu extends React.Component<Props> {
return hotbar.items.map((item) => catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid)).filter(Boolean);
}
previous() {
HotbarStore.getInstance().switchToPrevious();
}
next() {
HotbarStore.getInstance().switchToNext();
}
openSelector() {
CommandOverlay.open(<HotbarSwitchCommand />);
}
render() {
const { className } = this.props;
const hotbarIndex = HotbarStore.getInstance().activeHotbarIndex + 1;
return (
<div className={cssNames("HotbarMenu flex column", className)}>
@@ -43,6 +60,13 @@ export class HotbarMenu extends React.Component<Props> {
);
})}
</div>
<div className="HotbarSelector flex gaps auto">
<Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
<div className="box">
<Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
</div>
<Icon material="chevron_right" className="next box" onClick={() => this.next()} />
</div>
</div>
);
}