mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Create generic Avatar component
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
parent
d677e56393
commit
42cce4f667
@ -71,18 +71,8 @@
|
||||
|
||||
.TableCell.icon {
|
||||
max-width: 40px;
|
||||
.HotbarIcon {
|
||||
--size: 24px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
.MuiAvatar-root {
|
||||
font-size: 8px;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.TableCell.source {
|
||||
@ -118,4 +108,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catalogIcon {
|
||||
font-size: 10px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@ import { CatalogAddButton } from "./catalog-add-button";
|
||||
import type { RouteComponentProps } from "react-router";
|
||||
import type { ICatalogViewRouteParam } from "./catalog.route";
|
||||
import { Notifications } from "../notifications";
|
||||
import { HotbarIcon } from "../hotbar/hotbar-icon";
|
||||
import { Avatar } from "../avatar/avatar";
|
||||
|
||||
enum sortBy {
|
||||
name = "name",
|
||||
@ -183,12 +183,13 @@ export class Catalog extends React.Component<Props> {
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<HotbarIcon
|
||||
uid={item.getId()}
|
||||
title={item.name}
|
||||
source={item.source} />
|
||||
</>
|
||||
<Avatar
|
||||
title={item.name}
|
||||
colorHash={`${item.name}-${item.source}`}
|
||||
width={24}
|
||||
height={24}
|
||||
className="catalogIcon"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
92
src/renderer/components/avatar/avatar.tsx
Normal file
92
src/renderer/components/avatar/avatar.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Copyright (c) 2021 OpenLens Authors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
* this software and associated documentation files (the "Software"), to deal in
|
||||
* the Software without restriction, including without limitation the rights to
|
||||
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||
* the Software, and to permit persons to whom the Software is furnished to do so,
|
||||
* subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
import React, { DOMAttributes } from "react";
|
||||
import randomColor from "randomcolor";
|
||||
import GraphemeSplitter from "grapheme-splitter";
|
||||
import { Avatar as MaterialAvatar, AvatarTypeMap } from "@material-ui/core";
|
||||
import { iter } from "../../utils";
|
||||
|
||||
interface Props extends DOMAttributes<HTMLElement>, Partial<AvatarTypeMap> {
|
||||
title: string;
|
||||
colorHash?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
src?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function getNameParts(name: string): string[] {
|
||||
const byWhitespace = name.split(/\s+/);
|
||||
|
||||
if (byWhitespace.length > 1) {
|
||||
return byWhitespace;
|
||||
}
|
||||
|
||||
const byDashes = name.split(/[-_]+/);
|
||||
|
||||
if (byDashes.length > 1) {
|
||||
return byDashes;
|
||||
}
|
||||
|
||||
return name.split(/@+/);
|
||||
}
|
||||
|
||||
function getIconString(title: string) {
|
||||
if (!title) {
|
||||
return "??";
|
||||
}
|
||||
|
||||
const [rawFirst, rawSecond, rawThird] = getNameParts(title);
|
||||
const splitter = new GraphemeSplitter();
|
||||
const first = splitter.iterateGraphemes(rawFirst);
|
||||
const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
|
||||
const third = rawThird ? splitter.iterateGraphemes(rawThird) : iter.newEmpty();
|
||||
|
||||
return [
|
||||
...iter.take(first, 1),
|
||||
...iter.take(second, 1),
|
||||
...iter.take(third, 1),
|
||||
].filter(Boolean).join("");
|
||||
}
|
||||
|
||||
export function Avatar(props: Props) {
|
||||
const { title, src, width = 32, height = 32, colorHash, ...settings } = props;
|
||||
|
||||
const generateAvatarStyle = (): React.CSSProperties => {
|
||||
return {
|
||||
backgroundColor: randomColor({ seed: colorHash, luminosity: "dark" }),
|
||||
width,
|
||||
height,
|
||||
textTransform: "uppercase"
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<MaterialAvatar
|
||||
variant="rounded"
|
||||
style={generateAvatarStyle()}
|
||||
{...settings}
|
||||
>
|
||||
{getIconString(title)}
|
||||
</MaterialAvatar>
|
||||
);
|
||||
}
|
||||
@ -32,8 +32,6 @@
|
||||
}
|
||||
|
||||
.HotbarIcon {
|
||||
--size: 37px;
|
||||
|
||||
border-radius: 6px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
@ -69,7 +67,6 @@
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
|
||||
transition: all 0s 0.8s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
@ -22,16 +22,14 @@
|
||||
import "./hotbar-icon.scss";
|
||||
|
||||
import React, { DOMAttributes, useState } from "react";
|
||||
import { Avatar } from "@material-ui/core";
|
||||
import randomColor from "randomcolor";
|
||||
import GraphemeSplitter from "grapheme-splitter";
|
||||
|
||||
import type { CatalogEntityContextMenu } from "../../../common/catalog";
|
||||
import { cssNames, IClassName, iter } from "../../utils";
|
||||
import { cssNames, IClassName } from "../../utils";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import { Menu, MenuItem } from "../menu";
|
||||
import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
|
||||
import { observer } from "mobx-react";
|
||||
import { Avatar } from "../avatar/avatar";
|
||||
|
||||
interface Props extends DOMAttributes<HTMLElement> {
|
||||
uid: string;
|
||||
@ -44,12 +42,6 @@ interface Props extends DOMAttributes<HTMLElement> {
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function generateAvatarStyle(seed: string): React.CSSProperties {
|
||||
return {
|
||||
"backgroundColor": randomColor({ seed, luminosity: "dark" })
|
||||
};
|
||||
}
|
||||
|
||||
function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
|
||||
if (menuItem.confirm) {
|
||||
ConfirmDialog.open({
|
||||
@ -67,22 +59,6 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
|
||||
}
|
||||
}
|
||||
|
||||
function getNameParts(name: string): string[] {
|
||||
const byWhitespace = name.split(/\s+/);
|
||||
|
||||
if (byWhitespace.length > 1) {
|
||||
return byWhitespace;
|
||||
}
|
||||
|
||||
const byDashes = name.split(/[-_]+/);
|
||||
|
||||
if (byDashes.length > 1) {
|
||||
return byDashes;
|
||||
}
|
||||
|
||||
return name.split(/@+/);
|
||||
}
|
||||
|
||||
export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
|
||||
const { uid, title, active, className, source, disabled, onMenuOpen, children, ...rest } = props;
|
||||
const id = `hotbarIcon-${uid}`;
|
||||
@ -92,36 +68,18 @@ export const HotbarIcon = observer(({menuItems = [], ...props}: Props) => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
|
||||
const getIconString = () => {
|
||||
if (!title) {
|
||||
return "??";
|
||||
}
|
||||
|
||||
const [rawFirst, rawSecond, rawThird] = getNameParts(title);
|
||||
const splitter = new GraphemeSplitter();
|
||||
const first = splitter.iterateGraphemes(rawFirst);
|
||||
const second = rawSecond ? splitter.iterateGraphemes(rawSecond): first;
|
||||
const third = rawThird ? splitter.iterateGraphemes(rawThird) : iter.newEmpty();
|
||||
|
||||
return [
|
||||
...iter.take(first, 1),
|
||||
...iter.take(second, 1),
|
||||
...iter.take(third, 1),
|
||||
].filter(Boolean).join("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cssNames("HotbarIcon flex inline", className, { disabled })}>
|
||||
<MaterialTooltip title={`${title || "unknown"} (${source || "unknown"})`} placement="right">
|
||||
<div id={id}>
|
||||
<Avatar
|
||||
{...rest}
|
||||
variant="square"
|
||||
title={title}
|
||||
colorHash={`${title}-${source}`}
|
||||
className={active ? "active" : "default"}
|
||||
style={generateAvatarStyle(`${title}-${source}`)}
|
||||
>
|
||||
{getIconString()}
|
||||
</Avatar>
|
||||
width={40}
|
||||
height={40}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
</MaterialTooltip>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user