From d1272515b863b5a302269c4db072f62c971dba29 Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Mon, 3 May 2021 08:39:04 -0400 Subject: [PATCH 1/4] Add browse all tab to catalog page (#2629) --- .../+catalog/catalog-entity.store.ts | 6 ++- src/renderer/components/+catalog/catalog.tsx | 50 +++++++++++-------- 2 files changed, 32 insertions(+), 24 deletions(-) diff --git a/src/renderer/components/+catalog/catalog-entity.store.ts b/src/renderer/components/+catalog/catalog-entity.store.ts index 5a9652eb4f..bb77ea7224 100644 --- a/src/renderer/components/+catalog/catalog-entity.store.ts +++ b/src/renderer/components/+catalog/catalog-entity.store.ts @@ -65,10 +65,12 @@ export class CatalogEntityItem implements ItemObject { @autobind() export class CatalogEntityStore extends ItemStore { - @observable activeCategory: CatalogCategory; + @observable activeCategory?: CatalogCategory; @computed get entities() { - if (!this.activeCategory) return []; + if (!this.activeCategory) { + return catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity)); + } return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity)); } diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index e748f27b64..1db5d2d2c6 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -27,7 +27,7 @@ enum sortBy { export class Catalog extends React.Component { @observable private catalogEntityStore?: CatalogEntityStore; @observable.deep private contextMenu: CatalogEntityContextMenuContext; - @observable activeTab: string; + @observable activeTab?: string; async componentDidMount() { this.contextMenu = { @@ -76,14 +76,11 @@ export class Catalog extends React.Component { } @action - onTabChange = (tabId: string) => { - this.activeTab = tabId; + onTabChange = (tabId: string | null) => { + const activeCategory = this.categories.find(category => category.getId() === tabId); - const activeCategory = this.categories.find((category) => category.getId() === tabId); - - if (activeCategory) { - this.catalogEntityStore.activeCategory = activeCategory; - } + this.catalogEntityStore.activeCategory = activeCategory; + this.activeTab = activeCategory?.getId(); }; renderNavigation() { @@ -91,9 +88,22 @@ export class Catalog extends React.Component {
Catalog
- { this.categories.map((category, index) => { - return ; - })} + + { + this.categories.map(category => ( + + )) + }
); @@ -102,27 +112,23 @@ export class Catalog extends React.Component { @autobind() renderItemMenu(item: CatalogEntityItem) { const menuItems = this.contextMenu.menuItems.filter((menuItem) => !menuItem.onlyVisibleForSource || menuItem.onlyVisibleForSource === item.entity.metadata.source); - const onOpen = async () => { - await item.onContextMenuOpen(this.contextMenu); - }; return ( - onOpen()}> + item.onContextMenuOpen(this.contextMenu)}> this.addToHotbar(item) }> Add to Hotbar - { menuItems.map((menuItem, index) => { - return ( + { + menuItems.map((menuItem, index) => ( this.onMenuItemClick(menuItem)}> - {menuItem.title} + {menuItem.title} - ); - })} + )) + } ); } - render() { if (!this.catalogEntityStore) { return null; @@ -135,7 +141,7 @@ export class Catalog extends React.Component { provideBackButtonNavigation={false} contentGaps={false}> Date: Mon, 3 May 2021 18:35:31 +0300 Subject: [PATCH 2/4] Bump ssri from 6.0.1 to 6.0.2 (#2686) Bumps [ssri](https://github.com/npm/ssri) from 6.0.1 to 6.0.2. - [Release notes](https://github.com/npm/ssri/releases) - [Changelog](https://github.com/npm/ssri/blob/v6.0.2/CHANGELOG.md) - [Commits](https://github.com/npm/ssri/compare/v6.0.1...v6.0.2) Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index e5443a82e2..f344f16084 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12897,9 +12897,9 @@ sshpk@^1.7.0: tweetnacl "~0.14.0" ssri@^6.0.0, ssri@^6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8" - integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA== + version "6.0.2" + resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5" + integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q== dependencies: figgy-pudding "^3.5.1" From 83e63bf959e5fe258432286579a225e31d5ef4a9 Mon Sep 17 00:00:00 2001 From: Jari Kolehmainen Date: Mon, 3 May 2021 19:58:18 +0300 Subject: [PATCH 3/4] Include create resource templates in build (#2693) Signed-off-by: Jari Kolehmainen --- package.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/package.json b/package.json index 528f74c084..6a5fac242d 100644 --- a/package.json +++ b/package.json @@ -103,6 +103,11 @@ "!**/node_modules" ] }, + { + "from": "templates/", + "to": "./templates/", + "filter": "**/*.yaml" + }, "LICENSE" ], "linux": { From 1af12fe59e16333c43e29e85d1698b43af2dfb64 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Tue, 4 May 2021 07:49:14 +0300 Subject: [PATCH 4/4] Hotbar inner drag-n-drop (#2691) * Configure ts to use react-jsx rule Signed-off-by: Alex Andreev * Moving HotbarSelector to separate component Signed-off-by: Alex Andreev * Initial drag-n-drop implementation Signed-off-by: Alex Andreev * Revert tsconfig and linter changes Signed-off-by: Alex Andreev * Reverting back active cell effect Signed-off-by: Alex Andreev * Adding drag-n-drop behavior Signed-off-by: Alex Andreev * Fix drag-n-drop logic Signed-off-by: Alex Andreev * White border on dragging over Signed-off-by: Alex Andreev * Adding test coverage Signed-off-by: Alex Andreev * Fixing cell hover effect Signed-off-by: Alex Andreev * Increase PageLayout z-index Signed-off-by: Alex Andreev * Styling hotbar selector tooltip Signed-off-by: Alex Andreev --- src/common/__tests__/hotbar-store.test.ts | 197 ++++++++++++++++++ src/common/hotbar-store.ts | 39 +++- .../components/hotbar/hotbar-icon.scss | 10 +- .../components/hotbar/hotbar-icon.tsx | 2 +- .../components/hotbar/hotbar-menu.scss | 50 +---- .../components/hotbar/hotbar-menu.tsx | 118 +++++++---- .../components/hotbar/hotbar-selector.scss | 36 ++++ .../components/hotbar/hotbar-selector.tsx | 46 ++++ .../components/layout/page-layout.scss | 2 +- 9 files changed, 404 insertions(+), 96 deletions(-) create mode 100644 src/renderer/components/hotbar/hotbar-selector.scss create mode 100644 src/renderer/components/hotbar/hotbar-selector.tsx diff --git a/src/common/__tests__/hotbar-store.test.ts b/src/common/__tests__/hotbar-store.test.ts index ceb45e15e0..8e4748e515 100644 --- a/src/common/__tests__/hotbar-store.test.ts +++ b/src/common/__tests__/hotbar-store.test.ts @@ -1,7 +1,71 @@ import mockFs from "mock-fs"; +import { CatalogEntityItem } from "../../renderer/components/+catalog/catalog-entity.store"; import { ClusterStore } from "../cluster-store"; import { HotbarStore } from "../hotbar-store"; +const testCluster = { + uid: "test", + name: "test", + apiVersion: "v1", + kind: "Cluster", + status: { + phase: "Running" + }, + spec: {}, + getName: jest.fn(), + getId: jest.fn(), + onDetailsOpen: jest.fn(), + onContextMenuOpen: jest.fn(), + onSettingsOpen: jest.fn(), + metadata: { + uid: "test", + name: "test", + labels: {} + } +}; + +const minikubeCluster = { + uid: "minikube", + name: "minikube", + apiVersion: "v1", + kind: "Cluster", + status: { + phase: "Running" + }, + spec: {}, + getName: jest.fn(), + getId: jest.fn(), + onDetailsOpen: jest.fn(), + onContextMenuOpen: jest.fn(), + onSettingsOpen: jest.fn(), + metadata: { + uid: "minikube", + name: "minikube", + labels: {} + } +}; + +const awsCluster = { + uid: "aws", + name: "aws", + apiVersion: "v1", + kind: "Cluster", + status: { + phase: "Running" + }, + spec: {}, + getName: jest.fn(), + getId: jest.fn(), + onDetailsOpen: jest.fn(), + onContextMenuOpen: jest.fn(), + onSettingsOpen: jest.fn(), + metadata: { + uid: "aws", + name: "aws", + labels: {} + } +}; + describe("HotbarStore", () => { beforeEach(() => { ClusterStore.resetInstance(); @@ -31,4 +95,137 @@ describe("HotbarStore", () => { expect(hotbarStore.hotbars.length).toEqual(2); }); }); + + describe("hotbar items", () => { + it("initially creates 12 empty cells", () => { + const hotbarStore = HotbarStore.createInstance(); + + hotbarStore.load(); + expect(hotbarStore.getActive().items.length).toEqual(12); + }); + + it("adds items", () => { + const hotbarStore = HotbarStore.createInstance(); + const entity = new CatalogEntityItem(testCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(entity); + const items = hotbarStore.getActive().items.filter(Boolean); + + expect(items.length).toEqual(1); + }); + + it("removes items", () => { + const hotbarStore = HotbarStore.createInstance(); + const entity = new CatalogEntityItem(testCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(entity); + hotbarStore.removeFromHotbar("test"); + const items = hotbarStore.getActive().items.filter(Boolean); + + expect(items.length).toEqual(0); + }); + + it("does nothing if removing with invalid uid", () => { + const hotbarStore = HotbarStore.createInstance(); + const entity = new CatalogEntityItem(testCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(entity); + hotbarStore.removeFromHotbar("invalid uid"); + const items = hotbarStore.getActive().items.filter(Boolean); + + expect(items.length).toEqual(1); + }); + + it("moves item to empty cell", () => { + const hotbarStore = HotbarStore.createInstance(); + const test = new CatalogEntityItem(testCluster); + const minikube = new CatalogEntityItem(minikubeCluster); + const aws = new CatalogEntityItem(awsCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(test); + hotbarStore.addToHotbar(minikube); + hotbarStore.addToHotbar(aws); + + expect(hotbarStore.getActive().items[5]).toBeNull(); + + hotbarStore.restackItems(1, 5); + + expect(hotbarStore.getActive().items[5]).toBeTruthy(); + expect(hotbarStore.getActive().items[5].entity.uid).toEqual("minikube"); + }); + + it("moves items down", () => { + const hotbarStore = HotbarStore.createInstance(); + const test = new CatalogEntityItem(testCluster); + const minikube = new CatalogEntityItem(minikubeCluster); + const aws = new CatalogEntityItem(awsCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(test); + hotbarStore.addToHotbar(minikube); + hotbarStore.addToHotbar(aws); + + // aws -> test + hotbarStore.restackItems(2, 0); + + const items = hotbarStore.getActive().items.map(item => item?.entity.uid || null); + + expect(items.slice(0, 4)).toEqual(["aws", "test", "minikube", null]); + }); + + it("moves items up", () => { + const hotbarStore = HotbarStore.createInstance(); + const test = new CatalogEntityItem(testCluster); + const minikube = new CatalogEntityItem(minikubeCluster); + const aws = new CatalogEntityItem(awsCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(test); + hotbarStore.addToHotbar(minikube); + hotbarStore.addToHotbar(aws); + + // test -> aws + hotbarStore.restackItems(0, 2); + + const items = hotbarStore.getActive().items.map(item => item?.entity.uid || null); + + expect(items.slice(0, 4)).toEqual(["minikube", "aws", "test", null]); + }); + + it("does nothing when item moved to same cell", () => { + const hotbarStore = HotbarStore.createInstance(); + const test = new CatalogEntityItem(testCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(test); + hotbarStore.restackItems(0, 0); + + expect(hotbarStore.getActive().items[0].entity.uid).toEqual("test"); + }); + + it("throws if invalid arguments provided", () => { + // Prevent writing to stderr during this render. + const err = console.error; + + console.error = jest.fn(); + + const hotbarStore = HotbarStore.createInstance(); + const test = new CatalogEntityItem(testCluster); + + hotbarStore.load(); + hotbarStore.addToHotbar(test); + + expect(() => hotbarStore.restackItems(-5, 0)).toThrow(); + expect(() => hotbarStore.restackItems(2, -1)).toThrow(); + expect(() => hotbarStore.restackItems(14, 1)).toThrow(); + expect(() => hotbarStore.restackItems(11, 112)).toThrow(); + + // Restore writing to stderr. + console.error = err; + }); + }); }); diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index fa0116937b..e4a871f093 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -4,7 +4,6 @@ import migrations from "../migrations/hotbar-store"; import * as uuid from "uuid"; import { CatalogEntityItem } from "../renderer/components/+catalog/catalog-entity.store"; import isNull from "lodash/isNull"; -import { CatalogEntity } from "./catalog/catalog-entity"; export interface HotbarItem { entity: { @@ -147,9 +146,9 @@ export class HotbarStore extends BaseStore { } } - removeFromHotbar(item: CatalogEntity) { + removeFromHotbar(uid: string) { const hotbar = this.getActive(); - const index = hotbar.items.findIndex((i) => i?.entity.uid === item.getId()); + const index = hotbar.items.findIndex((i) => i?.entity.uid === uid); if (index == -1) { return; @@ -158,6 +157,40 @@ export class HotbarStore extends BaseStore { hotbar.items[index] = null; } + findClosestEmptyIndex(from: number, direction = 1) { + let index = from; + + while(this.getActive().items[index] != null) { + index += direction; + } + + return index; + } + + restackItems(from: number, to: number): void { + const { items } = this.getActive(); + const source = items[from]; + const moveDown = from < to; + + if (from < 0 || to < 0 || from >= items.length || to >= items.length || isNaN(from) || isNaN(to)) { + throw new Error("Invalid 'from' or 'to' arguments"); + } + + if (from == to) { + return; + } + + items.splice(from, 1, null); + + if (items[to] == null) { + items.splice(to, 1, source); + } else { + // Move cells up or down to closes empty cell + items.splice(this.findClosestEmptyIndex(to, moveDown ? -1 : 1), 1); + items.splice(to, 0, source); + } + } + switchToPrevious() { const hotbarStore = HotbarStore.getInstance(); let index = hotbarStore.activeHotbarIndex - 1; diff --git a/src/renderer/components/hotbar/hotbar-icon.scss b/src/renderer/components/hotbar/hotbar-icon.scss index 1da432d568..c6134f16e0 100644 --- a/src/renderer/components/hotbar/hotbar-icon.scss +++ b/src/renderer/components/hotbar/hotbar-icon.scss @@ -14,7 +14,7 @@ } &.active { - box-shadow: 0 0 0px 3px #ffffff; + box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent); transition: all 0s 0.8s; } @@ -24,6 +24,14 @@ } } + &:hover { + box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff30; + } + + &.isDragging { + box-shadow: none; + } + > .led { position: absolute; left: 3px; diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 5bc6489c8c..82be0ee88c 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-icon.tsx @@ -94,7 +94,7 @@ export class HotbarIcon extends React.Component { remove(item: CatalogEntity) { const hotbar = HotbarStore.getInstance(); - hotbar.removeFromHotbar(item); + hotbar.removeFromHotbar(item.getId()); } onMenuItemClick(menuItem: CatalogEntityContextMenu) { diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss index 6c8559fbd9..1805fdf4c5 100644 --- a/src/renderer/components/hotbar/hotbar-menu.scss +++ b/src/renderer/components/hotbar/hotbar-menu.scss @@ -44,15 +44,14 @@ background: var(--layoutBackground); border-radius: 6px; position: relative; - transform: translateZ(0); // Remove flickering artifacts - &:hover { - &:not(:empty) { - box-shadow: 0 0 0px 3px #ffffff1a; - } + &.isDraggingOver { + box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #fff; } &.animating { + transform: translateZ(0); // Remove flickering artifacts + &:empty { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); @@ -61,48 +60,11 @@ } &:not(:empty) { - animation: outline 0.8s cubic-bezier(0.19, 1, 0.22, 1); + animation: outline 1s cubic-bezier(0.19, 1, 0.22, 1); } } } } - - .HotbarSelector { - height: 26px; - background-color: var(--layoutBackground); - position: relative; - - &:before { - content: " "; - position: absolute; - width: 100%; - height: 20px; - background: linear-gradient(0deg, var(--clusterMenuBackground), transparent); - top: -20px; - } - - .Badge { - cursor: pointer; - background: var(--secondaryBackground); - width: 100%; - color: var(--settingsColor); - padding-top: 3px; - } - - .Icon { - --size: 16px; - padding: 0 4px; - - &:hover { - box-shadow: none; - background-color: transparent; - } - - &.previous { - transform: rotateY(180deg); - } - } - } } @keyframes shake { @@ -130,6 +92,6 @@ } 100% { - box-shadow: 0 0 0px 0px $clusterMenuBackground, 0 0 0px 3px #ffffff; + box-shadow: 0 0 0px 3px $clusterMenuBackground, 0 0 0px 6px #ffffff; } } \ No newline at end of file diff --git a/src/renderer/components/hotbar/hotbar-menu.tsx b/src/renderer/components/hotbar/hotbar-menu.tsx index 168f630327..29008f073c 100644 --- a/src/renderer/components/hotbar/hotbar-menu.tsx +++ b/src/renderer/components/hotbar/hotbar-menu.tsx @@ -1,18 +1,15 @@ import "./hotbar-menu.scss"; import "./hotbar.commands"; -import React, { ReactNode, useState } from "react"; +import React, { HTMLAttributes, ReactNode, useState } from "react"; import { observer } from "mobx-react"; import { HotbarIcon } from "./hotbar-icon"; import { cssNames, IClassName } from "../../utils"; import { catalogEntityRegistry } from "../../api/catalog-entity-registry"; -import { HotbarItem, HotbarStore } from "../../../common/hotbar-store"; +import { defaultHotbarCells, HotbarItem, HotbarStore } from "../../../common/hotbar-store"; import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity"; -import { Icon } from "../icon"; -import { Badge } from "../badge"; -import { CommandOverlay } from "../command-palette"; -import { HotbarSwitchCommand } from "./hotbar-switch-command"; -import { Tooltip, TooltipPosition } from "../tooltip"; +import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd"; +import { HotbarSelector } from "./hotbar-selector"; interface Props { className?: IClassName; @@ -38,36 +35,67 @@ export class HotbarMenu extends React.Component { return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null; } - previous() { - HotbarStore.getInstance().switchToPrevious(); - } + onDragEnd(result: DropResult) { + const { source, destination } = result; - next() { - HotbarStore.getInstance().switchToNext(); - } + if (!destination) { // Dropped outside of the list + return; + } - openSelector() { - CommandOverlay.open(); + const from = parseInt(source.droppableId); + const to = parseInt(destination.droppableId); + + HotbarStore.getInstance().restackItems(from, to); } renderGrid() { - if (!this.hotbar.items.length) return; - return this.hotbar.items.map((item, index) => { const entity = this.getEntity(item); return ( - - {entity && ( - + {(provided, snapshot) => ( + entity.onRun(catalogEntityRunContext)} - /> + key={entity ? entity.getId() : `cell${index}`} + innerRef={provided.innerRef} + className={cssNames({ isDraggingOver: snapshot.isDraggingOver })} + {...provided.droppableProps} + > + {entity && ( + + {(provided, snapshot) => { + const style = { + zIndex: defaultHotbarCells - index, + position: "absolute", + ...provided.draggableProps.style, + } as React.CSSProperties; + + return ( +
+ entity.onRun(catalogEntityRunContext)} + className={cssNames({ isDragging: snapshot.isDragging })} + /> +
+ ); + }} + + )} + {provided.placeholder} + )} - + ); }); } @@ -76,48 +104,46 @@ export class HotbarMenu extends React.Component { const { className } = this.props; const hotbarStore = HotbarStore.getInstance(); const hotbar = hotbarStore.getActive(); - const activeIndexDisplay = hotbarStore.activeHotbarIndex + 1; return (
- {this.renderGrid()} -
-
- this.previous()} /> -
- this.openSelector()} /> - - {hotbar.name} - -
- this.next()} /> + + {this.renderGrid()} +
+
); } } -interface HotbarCellProps { +interface HotbarCellProps extends HTMLAttributes { children?: ReactNode; index: number; + innerRef?: React.LegacyRef; } -function HotbarCell(props: HotbarCellProps) { +function HotbarCell({ innerRef, children, className, ...rest }: HotbarCellProps) { const [animating, setAnimating] = useState(false); const onAnimationEnd = () => { setAnimating(false); }; - const onClick = () => { setAnimating(true); }; + const onClick = () => { + if (className.includes("isDraggingOver")) { + return; + } + + setAnimating(true); + }; return (
- {props.children} + {children}
); } diff --git a/src/renderer/components/hotbar/hotbar-selector.scss b/src/renderer/components/hotbar/hotbar-selector.scss new file mode 100644 index 0000000000..5467442eaa --- /dev/null +++ b/src/renderer/components/hotbar/hotbar-selector.scss @@ -0,0 +1,36 @@ +.HotbarSelector { + height: 26px; + background-color: var(--layoutBackground); + position: relative; + + &:before { + content: " "; + position: absolute; + width: 100%; + height: 20px; + background: linear-gradient(0deg, var(--clusterMenuBackground), transparent); + top: -20px; + } + + .Badge { + cursor: pointer; + background: var(--secondaryBackground); + width: 100%; + color: var(--settingsColor); + padding-top: 3px; + } + + .Icon { + --size: 16px; + padding: 0 4px; + + &:hover { + box-shadow: none; + background-color: transparent; + } + + &.previous { + transform: rotateY(180deg); + } + } +} \ No newline at end of file diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx new file mode 100644 index 0000000000..d4919d7f0b --- /dev/null +++ b/src/renderer/components/hotbar/hotbar-selector.tsx @@ -0,0 +1,46 @@ +import "./hotbar-selector.scss"; +import React from "react"; +import { Icon } from "../icon"; +import { Badge } from "../badge"; +import { makeStyles, Tooltip } from "@material-ui/core"; +import { Hotbar, HotbarStore } from "../../../common/hotbar-store"; +import { CommandOverlay } from "../command-palette"; +import { HotbarSwitchCommand } from "./hotbar-switch-command"; + +interface Props { + hotbar: Hotbar; +} + +const useStyles = makeStyles(() => ({ + arrow: { + color: "#222", + }, + tooltip: { + fontSize: 12, + backgroundColor: "#222", + }, +})); + + +export function HotbarSelector({ hotbar }: Props) { + const store = HotbarStore.getInstance(); + const activeIndexDisplay = store.activeHotbarIndex + 1; + const classes = useStyles(); + + return ( +
+ store.switchToPrevious()} /> +
+ + CommandOverlay.open()} + /> + +
+ store.switchToNext()} /> +
+ ); +} diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss index 2c6bcaf6aa..2a4400d76f 100644 --- a/src/renderer/components/layout/page-layout.scss +++ b/src/renderer/components/layout/page-layout.scss @@ -24,7 +24,7 @@ // covers whole app view area &.showOnTop { position: fixed !important; // allow to cover ClustersMenu - z-index: 3; + z-index: 13; left: 0; top: 0; right: 0;