From 2f92e80e085c3de135673fcf25873a66e186ed59 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Thu, 17 Jun 2021 16:49:52 +0300 Subject: [PATCH] Usign material icons for general entities Signed-off-by: Alex Andreev --- src/common/catalog-entities/general.ts | 8 +++--- src/main/catalog-sources/general.ts | 4 +-- .../+catalog/catalog-entity-details.tsx | 3 ++- src/renderer/components/+catalog/catalog.tsx | 3 ++- src/renderer/components/avatar/avatar.tsx | 6 ++--- .../components/cluster-icon-settings.tsx | 2 +- .../components/hotbar/hotbar-entity-icon.tsx | 3 ++- .../components/hotbar/hotbar-icon.tsx | 26 +++++++++---------- 8 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/common/catalog-entities/general.ts b/src/common/catalog-entities/general.ts index 1c20d36a0c..589e7acad9 100644 --- a/src/common/catalog-entities/general.ts +++ b/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 { public readonly apiVersion = "entity.k8slens.dev/v1alpha1"; diff --git a/src/main/catalog-sources/general.ts b/src/main/catalog-sources/general.ts index abeb43a915..4b5d2e3178 100644 --- a/src/main/catalog-sources/general.ts +++ b/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", diff --git a/src/renderer/components/+catalog/catalog-entity-details.tsx b/src/renderer/components/+catalog/catalog-entity-details.tsx index 639d7c4843..0a918466c6 100644 --- a/src/renderer/components/+catalog/catalog-entity-details.tsx +++ b/src/renderer/components/+catalog/catalog-entity-details.tsx @@ -79,7 +79,8 @@ export class CatalogEntityDetails extends Component { 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} />
diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 067dab9009..06f1f9f9bf 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -173,7 +173,8 @@ export class Catalog extends React.Component { 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} /> ); diff --git a/src/renderer/components/avatar/avatar.tsx b/src/renderer/components/avatar/avatar.tsx index 2cf78866f4..43cdb31603 100644 --- a/src/renderer/components/avatar/avatar.tsx +++ b/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)} ); } diff --git a/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx b/src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx index 2800586a11..f14d1479ab 100644 --- 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 { uid={entity.metadata.uid} title={entity.metadata.name} source={entity.metadata.source} - icon={entity.spec.iconData} + src={entity.spec.iconData} /> Browse for new icon... diff --git a/src/renderer/components/hotbar/hotbar-entity-icon.tsx b/src/renderer/components/hotbar/hotbar-entity-icon.tsx index 5708379a7a..779cc72c06 100644 --- a/src/renderer/components/hotbar/hotbar-entity-icon.tsx +++ b/src/renderer/components/hotbar/hotbar-entity-icon.tsx @@ -129,7 +129,8 @@ export class HotbarEntityIcon extends React.Component { 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} diff --git a/src/renderer/components/hotbar/hotbar-icon.tsx b/src/renderer/components/hotbar/hotbar-icon.tsx index 0ee8f2ddc8..b1d6e2e99f 100644 --- a/src/renderer/components/hotbar/hotbar-icon.tsx +++ b/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 { 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 ; - } else { - return ; - } + src={src} + > + {materialIcon && } + + ); }; return ( -
+
{renderIcon()}