Setting background for hotbar icon explicitly

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

src/common/catalog-entities/general.ts

@@ -25,7 +25,6 @@ import { catalogCategoryRegistry } from "../catalog/catalog-category-registry";
 
 type GeneralEntitySpec = {
   path: string;
-  materialIcon?: string;
 } & CatalogEntitySpec;
 
 export class GeneralEntity extends CatalogEntity<CatalogEntityMetadata, CatalogEntityStatus, GeneralEntitySpec> {

src/common/catalog-entities/kubernetes-cluster.ts

@@ -28,6 +28,7 @@ import { productName } from "../vars";
 import { CatalogCategory, CatalogCategorySpec } from "../catalog";
 import { addClusterURL } from "../routes";
 import { app } from "electron";
+import type { CatalogEntitySpec } from "../catalog/catalog-entity";
 
 export type KubernetesClusterPrometheusMetrics = {
   address?: {
@@ -42,12 +43,11 @@ export type KubernetesClusterPrometheusMetrics = {
 export type KubernetesClusterSpec = {
   kubeconfigPath: string;
   kubeconfigContext: string;
-  iconData?: string;
   metrics?: {
     source: string;
     prometheus?: KubernetesClusterPrometheusMetrics;
   }
-};
+} & CatalogEntitySpec;
 
 export interface KubernetesClusterStatus extends CatalogEntityStatus {
   phase: "connected" | "disconnected";

src/common/catalog/catalog-entity.ts

@@ -142,7 +142,13 @@ export interface CatalogEntityAddMenuContext {
   menuItems: CatalogEntityAddMenu[];
 }
 
-export type CatalogEntitySpec = Record<string, any>;
+export type CatalogEntitySpec = {
+  icon?: {
+    src?: string;
+    material?: string;
+    background?: string;
+  }
+} & Record<string, any>;
 
 export interface CatalogEntityData<
   Metadata extends CatalogEntityMetadata = CatalogEntityMetadata,

src/main/catalog-sources/general.ts

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

src/main/cluster-manager.ts

@@ -110,7 +110,7 @@ export class ClusterManager extends Singleton {
       entity.spec.metrics.prometheus = prometheus;
     }
 
-    entity.spec.iconData = cluster.preferences.icon;
+    entity.spec.icon.src = cluster.preferences.icon;
 
     catalogEntityRegistry.items.splice(index, 1, entity);
   }
@@ -204,7 +204,8 @@ export function catalogEntityFromCluster(cluster: Cluster) {
     },
     spec: {
       kubeconfigPath: cluster.kubeConfigPath,
-      kubeconfigContext: cluster.contextName
+      kubeconfigContext: cluster.contextName,
+      icon: {}
     },
     status: {
       phase: cluster.disconnected ? "disconnected" : "connected",

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

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

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

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

src/renderer/components/avatar/avatar.tsx

@@ -32,6 +32,7 @@ interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
   height?: number;
   src?: string;
   className?: string;
+  background?: string;
 }
 
 function getNameParts(name: string): string[] {
@@ -69,11 +70,11 @@ function getIconString(title: string) {
 }
 
 export function Avatar(props: Props) {
-  const { title, width = 32, height = 32, colorHash, children, ...settings } = props;
+  const { title, width = 32, height = 32, colorHash, children, background, ...settings } = props;
 
   const generateAvatarStyle = (): React.CSSProperties => {
     return {
-      backgroundColor: settings.src ? "transparent" : randomColor({ seed: colorHash, luminosity: "dark" }),
+      backgroundColor: background || randomColor({ seed: colorHash, luminosity: "dark" }),
       width,
       height,
       textTransform: "uppercase"

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}
-          src={entity.spec.iconData}
+          src={entity.spec.icon?.src}
         />
         <span style={{marginRight: "var(--unit)"}}>Browse for new icon...</span>
       </>

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

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

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

@@ -20,7 +20,6 @@
  */
 
 .HotbarMenu {
-
   .HotbarIconMenu {
     left: 30px;
     min-width: 250px;
@@ -126,4 +125,10 @@
       }
     }
   }
+
+  .materialIcon {
+    margin-left: 1px;
+    margin-top: 1px;
+    text-shadow: none;
+  }
 }

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

@@ -37,13 +37,14 @@ export interface HotbarIconProps extends DOMAttributes<HTMLElement> {
   title: string;
   source: string;
   src?: string;
-  materialIcon?: string;
+  material?: string;
   onMenuOpen?: () => void;
   className?: IClassName;
   active?: boolean;
   menuItems?: CatalogEntityContextMenu[];
   disabled?: boolean;
   size?: number;
+  background?: string;
 }
 
 function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
@@ -64,7 +65,7 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
 }
 
 export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: HotbarIconProps) => {
-  const { uid, title, src, materialIcon, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
+  const { uid, title, src, material, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
   const id = `hotbarIcon-${uid}`;
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -83,7 +84,7 @@ export const HotbarIcon = observer(({menuItems = [], size = 40, ...props}: Hotba
         height={size}
         src={src}
       >
-        {materialIcon && <Icon material={materialIcon}/>}
+        {material && <Icon className="materialIcon" material={material}/>}
       </Avatar>
     );
   };