From 376d81ca55148ed0d932bd2174550a0153045cae Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Fri, 15 Oct 2021 08:46:49 +0300 Subject: [PATCH] Using custom unpin icon Signed-off-by: Alex Andreev --- .../+catalog/catalog-entity-drawer-menu.tsx | 29 +++++-------- src/renderer/components/+catalog/catalog.tsx | 21 ++++------ .../+catalog/hotbar-toggle-menu-item.tsx | 42 +++++++++++++++++++ src/renderer/components/icon/unpin.svg | 6 +++ 4 files changed, 67 insertions(+), 31 deletions(-) create mode 100644 src/renderer/components/+catalog/hotbar-toggle-menu-item.tsx create mode 100644 src/renderer/components/icon/unpin.svg diff --git a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx index 713f2f0d6d..2d180bf9db 100644 --- a/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx +++ b/src/renderer/components/+catalog/catalog-entity-drawer-menu.tsx @@ -19,7 +19,7 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import React, { useState } from "react"; +import React from "react"; import { cssNames } from "../../utils"; import { MenuActions, MenuActionsProps } from "../menu/menu-actions"; import type { CatalogEntity, CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "../../api/catalog-entity"; @@ -28,9 +28,9 @@ import { makeObservable, observable } from "mobx"; import { navigate } from "../../navigation"; import { MenuItem } from "../menu"; import { ConfirmDialog } from "../confirm-dialog"; -import { HotbarStore } from "../../../common/hotbar-store"; import { Icon } from "../icon"; import type { CatalogEntityItem } from "./catalog-entity-item"; +import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item"; export interface CatalogEntityDrawerMenuProps extends MenuActionsProps { item: CatalogEntityItem | null | undefined; @@ -94,7 +94,14 @@ export class CatalogEntityDrawerMenu extends React.Comp ); } - items.push(); + items.push( + } + removeContent={} + /> + ); return items; } @@ -117,19 +124,3 @@ export class CatalogEntityDrawerMenu extends React.Comp ); } } - -function HotbarToggleItem(props: { entity: CatalogEntity }) { - const store = HotbarStore.getInstance(false); - const add = () => store?.addToHotbar(props.entity); - const remove = () => store?.removeFromHotbar(props.entity.getId()); - const [itemInHotbar, setItemInHotbar] = useState(store?.isAddedToActive(props.entity)); - - return ( - { - itemInHotbar ? remove() : add(); - setItemInHotbar(!itemInHotbar); - }}> - - - ); -} diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 671fee082e..594bb610e3 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -45,6 +45,7 @@ import { CatalogMenu } from "./catalog-menu"; import { HotbarIcon } from "../hotbar/hotbar-icon"; import { RenderDelay } from "../render-delay/render-delay"; import { Icon } from "../icon"; +import { HotbarToggleMenuItem } from "./hotbar-toggle-menu-item"; export const previousActiveTab = createAppStorage("catalog-previous-active-tab", browseCatalogTab); @@ -181,8 +182,6 @@ export class Catalog extends React.Component { } renderItemMenu = (item: CatalogEntityItem) => { - const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity); - const onOpen = () => { this.contextMenu.menuItems = []; @@ -201,15 +200,12 @@ export class Catalog extends React.Component { )) } - {!isItemInHotbar ? ( - this.addToHotbar(item)}> - Add to Hotbar - - ) : ( - this.removeFromHotbar(item)}> - Remove from Hotbar - - )} + ); }; @@ -223,7 +219,8 @@ export class Catalog extends React.Component { isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))} /> diff --git a/src/renderer/components/+catalog/hotbar-toggle-menu-item.tsx b/src/renderer/components/+catalog/hotbar-toggle-menu-item.tsx new file mode 100644 index 0000000000..67f02a8ff5 --- /dev/null +++ b/src/renderer/components/+catalog/hotbar-toggle-menu-item.tsx @@ -0,0 +1,42 @@ +/** + * 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 React, { ReactNode, useState } from "react"; + +import { HotbarStore } from "../../../common/hotbar-store"; +import { MenuItem } from "../menu"; + +import type { CatalogEntity } from "../../api/catalog-entity"; + +export function HotbarToggleMenuItem(props: { entity: CatalogEntity, addContent: ReactNode, removeContent: ReactNode }) { + const store = HotbarStore.getInstance(false); + const add = () => store?.addToHotbar(props.entity); + const remove = () => store?.removeFromHotbar(props.entity.getId()); + const [itemInHotbar, setItemInHotbar] = useState(store?.isAddedToActive(props.entity)); + + return ( + { + itemInHotbar ? remove() : add(); + setItemInHotbar(!itemInHotbar); + }}> + {itemInHotbar ? props.removeContent : props.addContent } + + ); +} diff --git a/src/renderer/components/icon/unpin.svg b/src/renderer/components/icon/unpin.svg new file mode 100644 index 0000000000..f685eb5e92 --- /dev/null +++ b/src/renderer/components/icon/unpin.svg @@ -0,0 +1,6 @@ + + + + +