Using custom unpin icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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<T extends CatalogEntity> extends MenuActionsProps {
   item: CatalogEntityItem<T> | null | undefined;
@@ -94,7 +94,14 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
       );
     }
 
-    items.push(<HotbarToggleItem key="hotbar-toggle" entity={entity}/>);
+    items.push(
+      <HotbarToggleMenuItem
+        key="hotbar-toggle"
+        entity={entity}
+        addContent={<Icon material="push_pin" small tooltip={"Add to Hotbar"}/>}
+        removeContent={<Icon svg="unpin" small tooltip={"Remove from Hotbar"}/>}
+      />
+    );
 
     return items;
   }
@@ -117,19 +124,3 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> 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 (
-    <MenuItem onClick={() => {
-      itemInHotbar ? remove() : add();
-      setItemInHotbar(!itemInHotbar);
-    }}>
-      <Icon material="push_pin" small tooltip={itemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}/>
-    </MenuItem>
-  );
-}

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<Props> {
   }
 
   renderItemMenu = (item: CatalogEntityItem<CatalogEntity>) => {
-    const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity);
-
     const onOpen = () => {
       this.contextMenu.menuItems = [];
 
@@ -201,15 +200,12 @@ export class Catalog extends React.Component<Props> {
             </MenuItem>
           ))
         }
-        {!isItemInHotbar ? (
+        <HotbarToggleMenuItem
-          <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item)}>
+          key="hotbar-toggle"
-            Add to Hotbar
+          entity={item.entity}
-          </MenuItem>
+          addContent="Add to Hotbar"
-        ) : (
+          removeContent="Remove from Hotbar"
-          <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(item)}>
+        />
-            Remove from Hotbar
-          </MenuItem>
-        )}
       </MenuActions>
     );
   };
@@ -223,7 +219,8 @@ export class Catalog extends React.Component<Props> {
         <Icon
           small
           className={styles.pinIcon}
-          material="push_pin"
+          material={!isItemInHotbar && "push_pin"}
+          svg={isItemInHotbar && "unpin"}
           tooltip={isItemInHotbar ? "Remove from Hotbar" : "Add to Hotbar"}
           onClick={prevDefault(() => isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))}
         />

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 (
+    <MenuItem onClick={() => {
+      itemInHotbar ? remove() : add();
+      setItemInHotbar(!itemInHotbar);
+    }}>
+      {itemInHotbar ? props.removeContent : props.addContent }
+    </MenuItem>
+  );
+}

src/renderer/components/icon/unpin.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<path d="M12.6,12.1V2H7C6.5,2,6,2.5,6,3s0.5,1,1,1h1v5c0,1.7-1.3,3-3,3v2h6v7l1,1l1-1v-7h6v-1.9H12.6z"/>
+<polygon points="23.6,3.7 21.9,2 19.4,4.5 16.9,2 15.2,3.7 17.7,6.2 15.2,8.7 16.9,10.4 19.4,7.9 21.9,10.4 23.6,8.7 21.1,6.2 "/>
+</svg>