mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Add icon to catalog category (#2606)
* add icon to catalog category Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix styles Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen
GitHub
parent
b20bedfbae
commit
b77317c243
46
src/common/catalog-entities/icons/kubernetes.svg
Normal file
46
src/common/catalog-entities/icons/kubernetes.svg
Normal file
@ -0,0 +1,46 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 256 249" style="enable-background:new 0 0 256 249;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M247.7,151.3L247.7,151.3L247.7,151.3C247.4,151.3,247.4,151.3,247.7,151.3h-0.2c-0.2,0-0.5,0-0.5-0.2
|
||||
c-0.5,0-1-0.2-1.4-0.2c-1.7-0.2-3.1-0.5-4.5-0.5c-0.7,0-1.4,0-2.4-0.2h-0.2c-5-0.5-9-1-12.8-2.1c-1.7-0.7-2.1-1.7-2.6-2.6
|
||||
c0-0.2-0.2-0.2-0.2-0.5l0,0l-3.1-1c1.4-10.9,1-22.3-1.7-33.5c-2.6-11.2-7.1-21.6-13.3-31.1l2.4-2.1v-0.5c0-1.2,0.2-2.4,1.2-3.6
|
||||
c2.9-2.6,6.4-4.8,10.7-7.4l0,0c0.7-0.5,1.4-0.7,2.1-1.2c1.4-0.7,2.6-1.4,4-2.4c0.2-0.2,0.7-0.5,1.2-1c0.2-0.2,0.5-0.2,0.5-0.5l0,0
|
||||
c3.3-2.9,4-7.6,1.7-10.7c-1.2-1.7-3.3-2.6-5.5-2.6c-1.9,0-3.6,0.7-5.2,1.9l0,0l0,0c-0.2,0.2-0.2,0.2-0.5,0.5c-0.5,0.2-0.7,0.7-1.2,1
|
||||
c-1.2,1.2-2.1,2.1-3.1,3.3c-0.5,0.5-1,1.2-1.7,1.7l0,0c-3.3,3.6-6.4,6.4-9.5,8.6c-0.7,0.5-1.4,0.7-2.1,0.7c-0.5,0-1,0-1.4-0.2h-0.5
|
||||
l0,0l-2.9,1.9c-3.1-3.3-6.4-6.2-9.7-9c-14.3-11.2-31.6-18.1-49.6-19.7l-0.2-3.1c-0.2-0.2-0.2-0.2-0.5-0.5c-0.7-0.7-1.7-1.4-1.9-3.1
|
||||
c-0.2-3.8,0.2-8.1,0.7-12.8v-0.2c0-0.7,0.2-1.7,0.5-2.4c0.2-1.4,0.5-2.9,0.7-4.5V10V9.3l0,0l0,0c0-4.3-3.3-7.8-7.4-7.8
|
||||
c-1.9,0-3.8,1-5.2,2.4c-1.4,1.4-2.1,3.3-2.1,5.5l0,0l0,0v0.5v1.4c0,1.7,0.2,3.1,0.7,4.5c0.2,0.7,0.2,1.4,0.5,2.4v0.2
|
||||
c0.5,4.8,1.2,9,0.7,12.8c-0.2,1.7-1.2,2.4-1.9,3.1c-0.2,0.2-0.2,0.2-0.5,0.5l0,0l-0.2,3.1c-4.3,0.5-8.6,1-12.8,1.9
|
||||
c-18.3,4-34.4,13.3-47,26.6l-2.4-1.7h-0.5c-0.5,0-1,0.2-1.4,0.2c-0.7,0-1.4-0.2-2.1-0.7c-3.1-2.1-6.2-5.2-9.5-8.8l0,0
|
||||
c-0.5-0.5-1-1.2-1.7-1.7c-1-1.2-1.9-2.1-3.1-3.3c-0.2-0.2-0.7-0.5-1.2-1c-0.2-0.2-0.5-0.2-0.5-0.5l0,0c-1.4-1.2-3.3-1.9-5.2-1.9
|
||||
c-2.1,0-4.3,1-5.5,2.6c-2.4,3.1-1.7,7.8,1.7,10.7l0,0l0,0c0.2,0,0.2,0.2,0.5,0.2c0.5,0.2,0.7,0.7,1.2,1c1.4,1,2.6,1.7,4,2.4
|
||||
c0.7,0.2,1.4,0.7,2.1,1.2l0,0c4.3,2.6,7.8,4.8,10.7,7.4c1.2,1.2,1.2,2.4,1.2,3.6v0.5l0,0l2.4,2.1c-0.5,0.7-1,1.2-1.2,1.9
|
||||
c-11.9,18.8-16.4,40.9-13.3,62.7l-3.1,1c0,0.2-0.2,0.2-0.2,0.5c-0.5,1-1.2,1.9-2.6,2.6c-3.6,1.2-7.8,1.7-12.8,2.1h-0.2
|
||||
c-0.7,0-1.7,0-2.4,0.2c-1.4,0-2.9,0.2-4.5,0.5c-0.5,0-1,0.2-1.4,0.2c-0.2,0-0.5,0-0.7,0.2l0,0l0,0c-4.3,1-6.9,5-6.2,8.8
|
||||
c0.7,3.3,3.8,5.5,7.6,5.5c0.7,0,1.2,0,1.9-0.2l0,0l0,0c0.2,0,0.5,0,0.5-0.2c0.5,0,1-0.2,1.4-0.2c1.7-0.5,2.9-1,4.3-1.7
|
||||
c0.7-0.2,1.4-0.7,2.1-1h0.2c4.5-1.7,8.6-3.1,12.4-3.6h0.5c1.4,0,2.4,0.7,3.1,1.2c0.2,0,0.2,0.2,0.5,0.2l0,0l3.3-0.5
|
||||
c5.7,17.6,16.6,33.3,31.1,44.7c3.3,2.6,6.7,4.8,10.2,6.9l-1.4,3.1c0,0.2,0.2,0.2,0.2,0.5c0.5,1,1,2.1,0.5,3.8
|
||||
c-1.4,3.6-3.6,7.1-6.2,11.2v0.2c-0.5,0.7-1,1.2-1.4,1.9c-1,1.2-1.7,2.4-2.6,3.8c-0.2,0.2-0.5,0.7-0.7,1.2c0,0.2-0.2,0.5-0.2,0.5l0,0
|
||||
l0,0c-1.9,4-0.5,8.6,3.1,10.2c1,0.5,1.9,0.7,2.9,0.7c2.9,0,5.7-1.9,7.1-4.5l0,0l0,0c0-0.2,0.2-0.5,0.2-0.5c0.2-0.5,0.5-1,0.7-1.2
|
||||
c0.7-1.7,1-2.9,1.4-4.3c0.2-0.7,0.5-1.4,0.7-2.1l0,0c1.7-4.8,2.9-8.6,5-11.9c1-1.4,2.1-1.7,3.1-2.1c0.2,0,0.2,0,0.5-0.2l0,0l1.7-3.1
|
||||
c10.5,4,21.9,6.2,33.3,6.2c6.9,0,14-0.7,20.7-2.4c4.3-1,8.3-2.1,12.4-3.6l1.4,2.6c0.2,0,0.2,0,0.5,0.2c1.2,0.2,2.1,0.7,3.1,2.1
|
||||
c1.9,3.3,3.3,7.4,5,11.9v0.2c0.2,0.7,0.5,1.4,0.7,2.1c0.5,1.4,0.7,2.9,1.4,4.3c0.2,0.5,0.5,0.7,0.7,1.2c0,0.2,0.2,0.5,0.2,0.5l0,0
|
||||
l0,0c1.4,2.9,4.3,4.5,7.1,4.5c1,0,1.9-0.2,2.9-0.7c1.7-1,3.1-2.4,3.6-4.3s0.5-4-0.5-5.9l0,0l0,0c0-0.2-0.2-0.2-0.2-0.5
|
||||
c-0.2-0.5-0.5-1-0.7-1.2c-0.7-1.4-1.7-2.6-2.6-3.8c-0.5-0.7-1-1.2-1.4-1.9V229c-2.6-4-5-7.6-6.2-11.2c-0.5-1.7,0-2.6,0.2-3.8
|
||||
c0-0.2,0.2-0.2,0.2-0.5l0,0l-1.2-2.9c12.6-7.4,23.3-17.8,31.4-30.6c4.3-6.7,7.6-14,10-21.4l2.9,0.5c0.2,0,0.2-0.2,0.5-0.2
|
||||
c1-0.5,1.7-1.2,3.1-1.2h0.5c3.8,0.5,7.8,1.9,12.4,3.6h0.2c0.7,0.2,1.4,0.7,2.1,1c1.4,0.7,2.6,1.2,4.3,1.7c0.5,0,1,0.2,1.4,0.2
|
||||
c0.2,0,0.5,0,0.7,0.2l0,0c0.7,0.2,1.2,0.2,1.9,0.2c3.6,0,6.7-2.4,7.6-5.5C254.6,156.3,251.9,152.5,247.7,151.3L247.7,151.3z
|
||||
M137.7,139.7l-10.5,5l-10.5-5l-2.6-11.2l7.1-9h11.6l7.1,9L137.7,139.7L137.7,139.7z M199.7,115c1.9,8.1,2.4,16.2,1.7,24L165,128.5
|
||||
c-3.3-1-5.2-4.3-4.5-7.6c0.2-1,0.7-1.9,1.4-2.6l28.7-25.9C194.7,99.1,197.8,106.7,199.7,115L199.7,115z M179.3,78.2l-31.1,22.1
|
||||
c-2.6,1.7-6.2,1.2-8.3-1.4c-0.7-0.7-1-1.7-1.2-2.6l-2.1-38.7C152.9,59.4,167.8,66.8,179.3,78.2L179.3,78.2z M110.4,58.7
|
||||
c2.6-0.5,5-1,7.6-1.4l-2.1,38c-0.2,3.3-2.9,6.2-6.4,6.2c-1,0-2.1-0.2-2.9-0.7L75,78.2C84.7,68.4,96.8,61.8,110.4,58.7L110.4,58.7z
|
||||
M63.6,92.4l28.3,25.2c2.6,2.1,2.9,6.2,0.7,8.8c-0.7,1-1.7,1.7-2.9,1.9L52.9,139C51.4,122.8,55,106.4,63.6,92.4L63.6,92.4z
|
||||
M57.1,156.8l37.8-6.4c3.1-0.2,5.9,1.9,6.7,5c0.2,1.4,0.2,2.6-0.2,3.8l0,0l-14.5,34.9C73.5,185.6,62.8,172.5,57.1,156.8L57.1,156.8z
|
||||
M143.9,204.1c-5.5,1.2-10.9,1.9-16.6,1.9c-8.3,0-16.4-1.4-24-3.8l18.8-34c1.9-2.1,5-3.1,7.6-1.7c1.2,0.7,2.1,1.7,2.9,2.6l0,0
|
||||
l18.3,33C148.6,202.9,146.2,203.4,143.9,204.1L143.9,204.1z M190.2,171.1c-5.9,9.5-13.8,17.1-22.8,23l-15-35.9
|
||||
c-0.7-2.9,0.5-5.9,3.3-7.4c1-0.5,2.1-0.7,3.3-0.7l38,6.4C195.6,161.8,193.3,166.5,190.2,171.1L190.2,171.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@ -85,7 +85,8 @@ export class KubernetesClusterCategory extends EventEmitter implements CatalogCa
|
||||
public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
|
||||
public readonly kind = "CatalogCategory";
|
||||
public metadata = {
|
||||
name: "Kubernetes Clusters"
|
||||
name: "Kubernetes Clusters",
|
||||
icon: require(`!!raw-loader!./icons/kubernetes.svg`).default // eslint-disable-line
|
||||
};
|
||||
public spec = {
|
||||
group: "entity.k8slens.dev",
|
||||
|
||||
@ -48,7 +48,8 @@ export class WebLinkCategory implements CatalogCategory {
|
||||
public readonly apiVersion = "catalog.k8slens.dev/v1alpha1";
|
||||
public readonly kind = "CatalogCategory";
|
||||
public metadata = {
|
||||
name: "Web Links"
|
||||
name: "Web Links",
|
||||
icon: "link"
|
||||
};
|
||||
public spec = {
|
||||
group: "entity.k8slens.dev",
|
||||
|
||||
@ -8,6 +8,7 @@ export interface CatalogCategory {
|
||||
kind: string;
|
||||
metadata: {
|
||||
name: string;
|
||||
icon: string;
|
||||
}
|
||||
spec: {
|
||||
group: string;
|
||||
|
||||
1
src/renderer/api/catalog-category-registry.ts
Normal file
1
src/renderer/api/catalog-category-registry.ts
Normal file
@ -0,0 +1 @@
|
||||
export { catalogCategoryRegistry } from "../../common/catalog-category-registry";
|
||||
@ -38,6 +38,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: $textColorAccent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: -$padding;
|
||||
font-size: $font-size-small;
|
||||
background: $clusterMenuBackground;
|
||||
color: white;
|
||||
padding: 0px;
|
||||
border-radius: 50%;
|
||||
svg {
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
@ -12,6 +12,7 @@ import { observable } from "mobx";
|
||||
import { navigate } from "../../navigation";
|
||||
import { HotbarStore } from "../../../common/hotbar-store";
|
||||
import { ConfirmDialog } from "../confirm-dialog";
|
||||
import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
|
||||
|
||||
interface Props extends DOMAttributes<HTMLElement> {
|
||||
entity: CatalogEntity;
|
||||
@ -55,6 +56,21 @@ export class HotbarIcon extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
get badgeIcon() {
|
||||
const className = "badge";
|
||||
const category = catalogCategoryRegistry.getCategoryForEntity(this.props.entity);
|
||||
|
||||
if (!category) {
|
||||
return <Icon material="bug_report" className={className} />;
|
||||
}
|
||||
|
||||
if (category.metadata.icon.includes("<svg")) {
|
||||
return <Icon svg={category.metadata.icon} className={className} />;
|
||||
} else {
|
||||
return <Icon material={category.metadata.icon} className={className} />;
|
||||
}
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.menuOpen = !this.menuOpen;
|
||||
}
|
||||
@ -106,6 +122,7 @@ export class HotbarIcon extends React.Component<Props> {
|
||||
<div className={className}>
|
||||
<Tooltip targetId={entityIconId}>{entity.metadata.name}</Tooltip>
|
||||
<Avatar {...elemProps} id={entityIconId} variant="square" className={isActive ? "active" : "default"}>{this.iconString}</Avatar>
|
||||
{ this.badgeIcon }
|
||||
<Menu
|
||||
usePortal={false}
|
||||
htmlFor={entityIconId}
|
||||
|
||||
@ -94,7 +94,7 @@ export class Icon extends React.PureComponent<IconProps> {
|
||||
|
||||
// render as inline svg-icon
|
||||
if (svg) {
|
||||
const svgIconText = require(`!!raw-loader!./${svg}.svg`).default;
|
||||
const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
|
||||
|
||||
iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user