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 { .badge {
color: $textColorAccent;
position: absolute; position: absolute;
left: 0; right: -2px;
top: 0; bottom: -3px;
margin: -$padding; margin: -8px;
font-size: $font-size-small; font-size: var(--font-size-small);
background: $clusterMenuBackground; background: var(--clusterMenuBackground);
color: white; color: white;
padding: 0px; padding: 0px;
border-radius: 50%; border-radius: 50%;
border: 3px solid var(--clusterMenuBackground);
width: 15px;
height: 15px;
&.online {
background-color: #44b700;
}
svg { svg {
width: 13px; width: 13px;
} }

View File

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