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

cluster icons as letters

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-02-14 20:04:33 +02:00
parent f4a3074926
commit 523eff4c97
4 changed files with 38 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -239,7 +239,6 @@
"ws": "^7.3.0"
},
"devDependencies": {
"@emeraldpay/hashicon-react": "^0.4.0",
"@material-ui/core": "^4.10.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"@testing-library/jest-dom": "^5.11.5",

28
src/renderer/components/cluster-icon/cluster-icon.scss
View File

@ -7,25 +7,27 @@
user-select: none;
cursor: pointer;
&.interactive {
img {
opacity: .55;
}
div.MuiAvatar-colorDefault {
font-weight:500;
text-transform: uppercase;
}
div.active {
background-color: var(--primary);
}
div.default {
background-color: var(--halfGray);
}
&.active, &.interactive:hover {
background-color: #fff;
img {
opacity: 1;
div {
background-color: var(--primary);
}
}
img {
width: var(--size);
height: var(--size);
}
.Badge {
position: absolute;
right: 0;
@ -35,4 +37,4 @@
background: $colorError;
color: white;
}
}
}

28
src/renderer/components/cluster-icon/cluster-icon.tsx
View File

@ -2,14 +2,13 @@ import "./cluster-icon.scss";
import React, { DOMAttributes } from "react";
import { disposeOnUnmount, observer } from "mobx-react";
import { Params as HashiconParams } from "@emeraldpay/hashicon";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { Cluster } from "../../../main/cluster";
import { cssNames, IClassName } from "../../utils";
import { Badge } from "../badge";
import { Tooltip } from "../tooltip";
import { subscribeToBroadcast } from "../../../common/ipc";
import { observable } from "mobx";
import { Avatar } from "@material-ui/core";
interface Props extends DOMAttributes<HTMLElement> {
cluster: Cluster;
@ -19,7 +18,6 @@ interface Props extends DOMAttributes<HTMLElement> {
showTooltip?: boolean;
interactive?: boolean;
isActive?: boolean;
options?: HashiconParams;
}
const defaultProps: Partial<Props> = {
@ -47,9 +45,29 @@ export class ClusterIcon extends React.Component<Props> {
]);
}
get iconString() {
let splittedName = this.props.cluster.name.split(" ");
if (splittedName.length === 1) {
splittedName = splittedName[0].split("-");
}
if (splittedName.length === 1) {
splittedName = splittedName[0].split("@");
}
splittedName = splittedName.map((part) => part.replace(/\W/g, ""));
if (splittedName.length === 1) {
return splittedName[0].substring(0, 2);
} else {
return splittedName[0].substring(0, 1) + splittedName[1].substring(0, 1);
}
}
render() {
const {
cluster, showErrors, showTooltip, errorClass, options, interactive, isActive,
cluster, showErrors, showTooltip, errorClass, interactive, isActive,
children, ...elemProps
} = this.props;
const { name, preferences, id: clusterId, online } = cluster;
@ -67,7 +85,7 @@ export class ClusterIcon extends React.Component<Props> {
<Tooltip targetId={clusterIconId}>{name}</Tooltip>
)}
{icon && <img src={icon} alt={name}/>}
{!icon && <Hashicon value={clusterId} options={options}/>}
{!icon && <Avatar variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>}
{showErrors && eventCount > 0 && !isActive && online && (
<Badge
className={cssNames("events-count", errorClass)}

29
yarn.lock
View File

@ -344,21 +344,6 @@
global-agent "^2.0.2"
global-tunnel-ng "^2.7.1"
"@emeraldpay/hashicon-react@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon-react/-/hashicon-react-0.4.0.tgz#a05a1c9af23721a81450978fad816908fa3246b7"
integrity sha512-n+84V9R4g84B62NneYg5mz9Vf1xEBURZoyC4G1K9Rs9C7949D3SxgLhuXYyFKkNO5F5qzms5Qr3LGE5QNEdqJg==
dependencies:
"@emeraldpay/hashicon" "^0.4.0"
react "^16.8.0"
"@emeraldpay/hashicon@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon/-/hashicon-0.4.0.tgz#0dcd4db6d589b4eb30495b9995ff66fc9e57f833"
integrity sha512-2EB6Z8gS/DK36+SslIuoHE8wdU6pBqljMTjIYxLC8hBN8n2yhhE+xdmifPjqfqOvF/7Wb5HmoNaPX6RGuBrasg==
dependencies:
js-sha3 "^0.8.0"
"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
version "10.0.29"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@ -7967,11 +7952,6 @@ js-base64@^2.1.8:
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
js-sha3@^0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@ -11295,15 +11275,6 @@ react-zlib-js@^1.0.4:
resolved "https://registry.yarnpkg.com/react-zlib-js/-/react-zlib-js-1.0.4.tgz#dd2b9fbf56d5ab224fa7a99affbbedeba9aa3dc7"
integrity sha512-ynXD9DFxpE7vtGoa3ZwBtPmZrkZYw2plzHGbanUjBOSN4RtuXdektSfABykHtTiWEHMh7WdYj45LHtp228ZF1A==
react@^16.8.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
react@^17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"