hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Usign material icons for general entities

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-17 16:49:52 +03:00
parent 2bd344c1c9
commit 2f92e80e08
8 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/common/catalog-entities/general.ts
View File

@ -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";

4
src/main/catalog-sources/general.ts
View File

@ -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",

3
src/renderer/components/+catalog/catalog-entity-details.tsx
View File

@ -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">

3
src/renderer/components/+catalog/catalog.tsx
View File

@ -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} />
);

6
src/renderer/components/avatar/avatar.tsx
View File

@ -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>
);
}

2
src/renderer/components/cluster-settings/components/cluster-icon-settings.tsx
View File

@ -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>
</>

3
src/renderer/components/hotbar/hotbar-entity-icon.tsx
View File

@ -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}

26
src/renderer/components/hotbar/hotbar-icon.tsx
View File

@ -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 <img
{...rest}
src={icon}
className={active ? "active" : "default"}
width={size}
height={size} />;
} else {
return <Avatar
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()}