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

use generated background color for hotbar icons

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-04-23 12:51:14 +03:00
parent b20bedfbae
commit 98bed1b7f6
3 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -262,6 +262,7 @@
"@types/npm": "^2.0.31",
"@types/progress-bar-webpack-plugin": "^2.1.0",
"@types/proper-lockfile": "^4.1.1",
"@types/randomcolor": "^0.5.5",
"@types/react": "^17.0.0",
"@types/react-beautiful-dnd": "^13.0.0",
"@types/react-dom": "^17.0.0",
@ -326,6 +327,7 @@
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.2.0",
"progress-bar-webpack-plugin": "^2.1.0",
"randomcolor": "^0.6.2",
"raw-loader": "^4.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-refresh": "^0.9.0",

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

@ -12,6 +12,7 @@ import { observable } from "mobx";
import { navigate } from "../../navigation";
import { HotbarStore } from "../../../common/hotbar-store";
import { ConfirmDialog } from "../confirm-dialog";
import randomColor from "randomcolor";
interface Props extends DOMAttributes<HTMLElement> {
entity: CatalogEntity;
@ -86,6 +87,12 @@ export class HotbarIcon extends React.Component<Props> {
}
}
generateAvatarStyle(entity: CatalogEntity): React.CSSProperties {
return {
"backgroundColor": randomColor({ seed: entity.metadata.name, luminosity: "dark" })
};
}
render() {
const {
entity, errorClass, isActive,
@ -105,7 +112,15 @@ export class HotbarIcon extends React.Component<Props> {
return (
<div className={className}>
<Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
<Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
<Avatar
{...elemProps}
id={entityIconId}
variant="square"
className={isActive ? "active" : "default"}
style={this.generateAvatarStyle(entity)}
>
{this.iconString}
</Avatar>
<Menu
usePortal={false}
htmlFor={entityIconId}

10
yarn.lock
View File

@ -1558,6 +1558,11 @@
resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.5.tgz#434711bdd49eb5ee69d90c1d67c354a9a8ecb18b"
integrity sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ==
"@types/randomcolor@^0.5.5":
version "0.5.5"
resolved "https://registry.yarnpkg.com/@types/randomcolor/-/randomcolor-0.5.5.tgz#6d8af5f87c6bec1e338ae2d0739056cc2e5720fd"
integrity sha512-PywdYff3F8lGO3BggkCXaPFH0Ue/2Y7xliihoQNkxCGPJ4w7VTMfgcmSMIE6gOVAEu9Wx42JRSuRREVG3AUrtg==
"@types/range-parser@*":
version "1.2.3"
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
@ -11481,6 +11486,11 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
dependencies:
safe-buffer "^5.1.0"
randomcolor@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/randomcolor/-/randomcolor-0.6.2.tgz#7a57362ae1a1278439aeed2c15e5deb8ea33f56d"
integrity sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==
randomfill@^1.0.3:
version "1.0.4"
resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"