Setting background for hotbar icon explicitly

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-06-18 11:47:55 +03:00 · 2021-06-18 11:47:55 +03:00 · 724bd14218
commit 724bd14218
parent 2f92e80e08
12 changed files with 45 additions and 22 deletions
--- a/src/common/catalog-entities/general.ts
+++ b/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> {
--- a/src/common/catalog-entities/kubernetes-cluster.ts
+++ b/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";
--- a/src/common/catalog/catalog-entity.ts
+++ b/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,
--- a/src/main/catalog-sources/general.ts
+++ b/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",
--- a/src/main/cluster-manager.ts
+++ b/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",
--- a/src/renderer/components/+catalog/catalog-entity-details.tsx
+++ b/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}
-                materialIcon={entity.spec.materialIcon}
+                src={entity.spec.icon?.src}
+                material={entity.spec.icon?.material}
+                background={entity.spec.icon?.background}
                onClick={() => this.openEntity()}
                size={128} />
              <div className="IconHint">
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/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}
-        materialIcon={item.entity.spec.materialIcon}
+        src={item.entity.spec.icon?.src}
+        material={item.entity.spec.icon?.material}
+        background={item.entity.spec.icon?.background}
        onClick={() => this.onDetails(item)}
-        size={24} />
+        size={24}
+      />
    );
  }

--- a/src/renderer/components/avatar/avatar.tsx
+++ b/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"
--- a/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx
+++ b/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>
      </>
--- a/src/renderer/components/hotbar/hotbar-entity-icon.tsx
+++ b/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}
-        materialIcon={entity.spec.materialIcon}
+        src={entity.spec.icon?.src}
+        material={entity.spec.icon?.material}
+        background={entity.spec.icon?.background}
        className={className}
        active={isActive}
        onMenuOpen={onOpen}
--- a/src/renderer/components/hotbar/hotbar-icon.scss
+++ b/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;
+  }
 }
--- a/src/renderer/components/hotbar/hotbar-icon.tsx
+++ b/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>
    );
  };