1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Highlighting kind icon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-04-26 19:15:16 +03:00
parent 658f2883d3
commit 512639df5e
2 changed files with 16 additions and 9 deletions

View File

@ -28,16 +28,23 @@
}
.badge {
color: $textColorAccent;
position: absolute;
left: 0;
top: 0;
margin: -$padding;
font-size: $font-size-small;
background: $clusterMenuBackground;
right: -2px;
bottom: -3px;
margin: -8px;
font-size: var(--font-size-small);
background: var(--clusterMenuBackground);
color: white;
padding: 0px;
border-radius: 50%;
border: 3px solid var(--clusterMenuBackground);
width: 15px;
height: 15px;
&.online {
background-color: #44b700;
}
svg {
width: 13px;
}

View File

@ -66,8 +66,8 @@ export class HotbarIcon extends React.Component<Props> {
].filter(Boolean).join("");
}
get badgeIcon() {
const className = "badge";
get kindIcon() {
const className = cssNames("badge", { online: this.props.entity.status.phase == "connected"});
const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
if (!category) {
@ -142,7 +142,7 @@ export class HotbarIcon extends React.Component<Props> {
>
{this.iconString}
</Avatar>
{ this.badgeIcon }
{ this.kindIcon }
<Menu
usePortal
htmlFor={entityIconId}