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

Using avatar in settings layout

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-11-29 12:46:04 +03:00
parent 1e00ec977e
commit dddcff3e02
5 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -69,7 +69,9 @@ export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Pro
background={item.entity.spec.icon?.background} background={item.entity.spec.icon?.background}
onClick={() => item.onRun()} onClick={() => item.onRun()}
className={styles.avatar} className={styles.avatar}
/> >
{item.entity.spec.icon?.material && <Icon material={item.entity.spec.icon?.material}/>}
</Avatar>
{item?.enabled && ( {item?.enabled && (
<div className={styles.hint}> <div className={styles.hint}>
Click to open Click to open

4
src/renderer/components/+entity-settings/entity-settings.module.css
View File

@ -27,4 +27,8 @@
/* Simulate text-overflow:ellipsis styles but for multiple text lines */ /* Simulate text-overflow:ellipsis styles but for multiple text lines */
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
}
.settingsAvatar {
margin: 0 10px;
} }

8
src/renderer/components/+entity-settings/entity-settings.tsx
View File

@ -33,8 +33,8 @@ import { EntitySettingRegistry } from "../../../extensions/registries";
import type { EntitySettingsRouteParams } from "../../../common/routes"; import type { EntitySettingsRouteParams } from "../../../common/routes";
import { groupBy } from "lodash"; import { groupBy } from "lodash";
import { SettingLayout } from "../layout/setting-layout"; import { SettingLayout } from "../layout/setting-layout";
import { HotbarIcon } from "../hotbar/hotbar-icon";
import logger from "../../../common/logger"; import logger from "../../../common/logger";
import { Avatar } from "../avatar/avatar";
interface Props extends RouteComponentProps<EntitySettingsRouteParams> { interface Props extends RouteComponentProps<EntitySettingsRouteParams> {
} }
@ -96,11 +96,11 @@ export class EntitySettings extends React.Component<Props> {
return ( return (
<> <>
<div className="flex items-center pb-8"> <div className="flex items-center pb-8">
<HotbarIcon <Avatar
uid={this.entity.metadata.uid}
title={this.entity.metadata.name} title={this.entity.metadata.name}
source={this.entity.metadata.source} colorHash={`${this.entity.metadata.name}-${this.entity.metadata.source}`}
src={this.entity.spec.icon?.src} src={this.entity.spec.icon?.src}
className={styles.settingsAvatar}
/> />
<div className={styles.entityName}> <div className={styles.entityName}>
{this.entity.metadata.name} {this.entity.metadata.name}

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

@ -72,7 +72,7 @@ function getLabelFromTitle(title: string) {
} }
export function Avatar(props: Props) { export function Avatar(props: Props) {
const { title, variant = "rounded", size, colorHash, children, background, imgProps, src, className, ...rest } = props; const { title, variant = "rounded", size = 32, colorHash, children, background, imgProps, src, className, ...rest } = props;
const getBackgroundColor = () => { const getBackgroundColor = () => {
return background || randomColor({ seed: colorHash, luminosity: "dark" }); return background || randomColor({ seed: colorHash, luminosity: "dark" });

4
src/renderer/components/layout/setting-layout.scss
View File

@ -120,10 +120,6 @@
} }
} }
} }
.HotbarIcon {
margin: 0 11px;
}
} }
} }