From c594844b9b4d2da540d245eb1edf51297bf83e8b Mon Sep 17 00:00:00 2001 From: Jim Ehrismann <40840436+jim-docker@users.noreply.github.com> Date: Mon, 17 May 2021 00:40:32 -0400 Subject: [PATCH] include the hotbar index in the label displayed for a hotbar (#2770) * include the hotbar index in the label displayed for a hotbar Signed-off-by: Jim Ehrismann * address review comments for hotbarDisplayLabel() Signed-off-by: Jim Ehrismann * tweaks to hotbarDisplayLabel() Signed-off-by: Jim Ehrismann --- src/common/hotbar-store.ts | 6 +++- .../components/hotbar/hotbar-display-label.ts | 36 +++++++++++++++++++ .../hotbar/hotbar-remove-command.tsx | 3 +- .../components/hotbar/hotbar-selector.tsx | 4 +-- .../hotbar/hotbar-switch-command.tsx | 3 +- 5 files changed, 47 insertions(+), 5 deletions(-) create mode 100644 src/renderer/components/hotbar/hotbar-display-label.ts diff --git a/src/common/hotbar-store.ts b/src/common/hotbar-store.ts index 2841c16046..b2d5af0f2a 100644 --- a/src/common/hotbar-store.ts +++ b/src/common/hotbar-store.ts @@ -81,8 +81,12 @@ export class HotbarStore extends BaseStore { } } + hotbarIndex(id: string) { + return this.hotbars.findIndex((hotbar) => hotbar.id === id); + } + get activeHotbarIndex() { - return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId); + return this.hotbarIndex(this.activeHotbarId); } get initialItems() { diff --git a/src/renderer/components/hotbar/hotbar-display-label.ts b/src/renderer/components/hotbar/hotbar-display-label.ts new file mode 100644 index 0000000000..0489e2600f --- /dev/null +++ b/src/renderer/components/hotbar/hotbar-display-label.ts @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2021 OpenLens Authors + * + * Permission is hereby granted, free of charge, to any person obtaining a copy of + * this software and associated documentation files (the "Software"), to deal in + * the Software without restriction, including without limitation the rights to + * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + * the Software, and to permit persons to whom the Software is furnished to do so, + * subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + */ + +import { HotbarStore } from "../../../common/hotbar-store"; + +function hotbarIndex(id: string) { + return HotbarStore.getInstance().hotbarIndex(id) + 1; +} + +export function hotbarDisplayLabel(id: string) : string { + const hotbar = HotbarStore.getInstance().getById(id); + + return `${hotbarIndex(id)}: ${hotbar.name}`; +} + +export function hotbarDisplayIndex(id: string) : string { + return hotbarIndex(id).toString(); +} diff --git a/src/renderer/components/hotbar/hotbar-remove-command.tsx b/src/renderer/components/hotbar/hotbar-remove-command.tsx index f8b0bb993d..e60dc2bfaf 100644 --- a/src/renderer/components/hotbar/hotbar-remove-command.tsx +++ b/src/renderer/components/hotbar/hotbar-remove-command.tsx @@ -24,6 +24,7 @@ import { observer } from "mobx-react"; import { Select } from "../select"; import { computed } from "mobx"; import { HotbarStore } from "../../../common/hotbar-store"; +import { hotbarDisplayLabel } from "./hotbar-display-label"; import { CommandOverlay } from "../command-palette"; import { ConfirmDialog } from "../confirm-dialog"; @@ -31,7 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog"; export class HotbarRemoveCommand extends React.Component { @computed get options() { return HotbarStore.getInstance().hotbars.map((hotbar) => { - return { value: hotbar.id, label: hotbar.name }; + return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) }; }); } diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx index a602cea6e6..63041a5d38 100644 --- a/src/renderer/components/hotbar/hotbar-selector.tsx +++ b/src/renderer/components/hotbar/hotbar-selector.tsx @@ -26,6 +26,7 @@ import { Badge } from "../badge"; import { Hotbar, HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { HotbarSwitchCommand } from "./hotbar-switch-command"; +import { hotbarDisplayIndex } from "./hotbar-display-label"; import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip"; interface Props { @@ -34,7 +35,6 @@ interface Props { export function HotbarSelector({ hotbar }: Props) { const store = HotbarStore.getInstance(); - const activeIndexDisplay = store.activeHotbarIndex + 1; return (
@@ -44,7 +44,7 @@ export function HotbarSelector({ hotbar }: Props) { CommandOverlay.open()} /> diff --git a/src/renderer/components/hotbar/hotbar-switch-command.tsx b/src/renderer/components/hotbar/hotbar-switch-command.tsx index 93a7906585..1d11a02c80 100644 --- a/src/renderer/components/hotbar/hotbar-switch-command.tsx +++ b/src/renderer/components/hotbar/hotbar-switch-command.tsx @@ -27,6 +27,7 @@ import { HotbarStore } from "../../../common/hotbar-store"; import { CommandOverlay } from "../command-palette"; import { HotbarAddCommand } from "./hotbar-add-command"; import { HotbarRemoveCommand } from "./hotbar-remove-command"; +import { hotbarDisplayLabel } from "./hotbar-display-label"; @observer export class HotbarSwitchCommand extends React.Component { @@ -36,7 +37,7 @@ export class HotbarSwitchCommand extends React.Component { @computed get options() { const hotbarStore = HotbarStore.getInstance(); const options = hotbarStore.hotbars.map((hotbar) => { - return { value: hotbar.id, label: hotbar.name }; + return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) }; }); options.push({ value: HotbarSwitchCommand.addActionId, label: "Add hotbar ..." });