Usign material icons for general entities

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

src/common/catalog-entities/general.ts

@@ -20,13 +20,13 @@
  */
 
 import { navigate } from "../../renderer/navigation";
-import { CatalogCategory, CatalogEntity, CatalogEntityMetadata, CatalogEntityStatus } from "../catalog";
+import { CatalogCategory, CatalogEntity, CatalogEntityMetadata, CatalogEntitySpec, CatalogEntityStatus } from "../catalog";
 import { catalogCategoryRegistry } from "../catalog/catalog-category-registry";
 
-export type GeneralEntitySpec = {
+type GeneralEntitySpec = {
   path: string;
-  icon?: string;
+  materialIcon?: string;
-};
+} & CatalogEntitySpec;
 
 export class GeneralEntity extends CatalogEntity<CatalogEntityMetadata, CatalogEntityStatus, GeneralEntitySpec> {
   public readonly apiVersion = "entity.k8slens.dev/v1alpha1";

src/main/catalog-sources/general.ts

@@ -34,7 +34,7 @@ const generalEntities = observable([
     },
     spec: {
       path: catalogURL(),
-      icon: "view_list"
+      materialIcon: "view_list",
     },
     status: {
       phase: "active",
@@ -49,7 +49,7 @@ const generalEntities = observable([
     },
     spec: {
       path: preferencesURL(),
-      icon: "settings"
+      materialIcon: "settings"
     },
     status: {
       phase: "active",

src/renderer/components/+catalog/catalog-entity-details.tsx

@@ -79,7 +79,8 @@ export class CatalogEntityDetails extends Component<Props> {
                 uid={entity.metadata.uid}
                 title={entity.metadata.name}
                 source={entity.metadata.source}
-                icon={entity.spec.iconData}
+                src={entity.spec.iconData}
+                materialIcon={entity.spec.materialIcon}
                 onClick={() => this.openEntity()}
                 size={128} />
               <div className="IconHint">

src/renderer/components/+catalog/catalog.tsx

@@ -173,7 +173,8 @@ export class Catalog extends React.Component<Props> {
         uid={item.getId()}
         title={item.getName()}
         source={item.source}
-        icon={item.entity.spec.iconData}
+        src={item.entity.spec.iconData}
+        materialIcon={item.entity.spec.materialIcon}
         onClick={() => this.onDetails(item)}
         size={24} />
     );

src/renderer/components/avatar/avatar.tsx

@@ -69,11 +69,11 @@ function getIconString(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, src, width = 32, height = 32, colorHash, ...settings } = props;
+  const { title, width = 32, height = 32, colorHash, children, ...settings } = props;
 
   const generateAvatarStyle = (): React.CSSProperties => {
     return {
-      backgroundColor: randomColor({ seed: colorHash, luminosity: "dark" }),
+      backgroundColor: settings.src ? "transparent" : randomColor({ seed: colorHash, luminosity: "dark" }),
       width,
       height,
       textTransform: "uppercase"
@@ -86,7 +86,7 @@ export function Avatar(props: Props) {
       style={generateAvatarStyle()}
       {...settings}
     >
-      {getIconString(title)}
+      {children || getIconString(title)}
     </MaterialAvatar>
   );
 }

src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx

@@ -86,7 +86,7 @@ export class ClusterIconSetting extends React.Component<Props> {
           uid={entity.metadata.uid}
           title={entity.metadata.name}
           source={entity.metadata.source}
-          icon={entity.spec.iconData}
+          src={entity.spec.iconData}
         />
         <span style={{marginRight: "var(--unit)"}}>Browse for new icon...</span>
       </>

src/renderer/components/hotbar/hotbar-entity-icon.tsx

@@ -129,7 +129,8 @@ export class HotbarEntityIcon extends React.Component<Props> {
         uid={entity.metadata.uid}
         title={entity.metadata.name}
         source={entity.metadata.source}
-        icon={entity.spec.iconData}
+        src={entity.spec.iconData}
+        materialIcon={entity.spec.materialIcon}
         className={className}
         active={isActive}
         onMenuOpen={onOpen}

src/renderer/components/hotbar/hotbar-icon.tsx

@@ -30,12 +30,14 @@ import { Menu, MenuItem } from "../menu";
 import { MaterialTooltip } from "../material-tooltip/material-tooltip";
 import { observer } from "mobx-react";
 import { Avatar } from "../avatar/avatar";
+import { Icon } from "../icon";
 
 export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   uid: string;
   title: string;
   source: string;
-  icon?: string;
+  src?: string;
+  materialIcon?: string;
   onMenuOpen?: () => void;
   className?: IClassName;
   active?: boolean;
@@ -62,7 +64,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
 }
 
 export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
-  const { uid, title, icon, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
+  const { uid, title, src, materialIcon, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -71,27 +73,23 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
   };
 
   const renderIcon = () => {
-    if (icon) {
+    return (
-      return <img
+      <Avatar
-        {...rest}
-        src={icon}
-        className={active ? "active" : "default"}
-        width={size}
-        height={size} />;
-    } else {
-      return <Avatar
         {...rest}
         title={title}
         colorHash={`${title}-${source}`}
         className={active ? "active" : "default"}
         width={size}
         height={size}
-      />;
+        src={src}
-    }
+      >
+        {materialIcon && <Icon material={materialIcon}/>}
+      </Avatar>
+    );
   };
 
   return (
-    <div className={cssNames("HotbarIcon flex inline", className, { disabled })}>
+    <div className={cssNames("HotbarIcon flex", className, { disabled })}>
       <MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
         <div id={id}>
           {renderIcon()}