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

Showing category icons

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-15 15:43:01 +03:00
parent aea1a3c7d2
commit 794e8ed869
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/renderer/components/+catalog/catalog-menu.tsx
View File

@ -28,6 +28,7 @@ import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
import { Icon } from "../icon";
import { StylesProvider } from "@material-ui/core";
import { cssNames } from "../../utils";
import type { CatalogCategory } from "../../api/catalog-entity";
type Props = {
onItemClick: (id: string) => void;
@ -37,6 +38,14 @@ function getCategories() {
return catalogCategoryRegistry.items;
}
function getCategoryIcon(category: CatalogCategory) {
if (!category.metadata?.icon) return null;
return category.metadata.icon.includes("<svg")
? <Icon small svg={category.metadata.icon}/>
: <Icon small material={category.metadata.icon}/>;
}
function Item(props: TreeItemProps) {
return (
<TreeItem classes={treeStyles} {...props}/>
@ -63,6 +72,7 @@ export function CatalogMenu(props: Props) {
{
getCategories().map(category => (
<Item
icon={getCategoryIcon(category)}
key={category.getId()}
nodeId={category.getId()}
label={category.metadata.name}

14
src/renderer/components/+catalog/catalog-tree.module.css
View File

@ -19,6 +19,10 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
/* This file overwrites basic Material UI TreeView styles. Can contain only following
classnames: root, expanded, selected, content, iconContainer, label, group
*/
.root {
color: var(--textColorTertiary);
min-height: 26px;
@ -38,17 +42,21 @@
}
.content:hover {
background-color: var(--blue);
color: var(--textColorAccent);
background-color: var(--sidebarItemHoverBackground);
}
.group {
margin-left: 0;
margin-left: 0px;
}
.group .iconContainer {
margin-left: 28px;
}
.selected > *:first-child {
background-color: var(--blue);
color: var(--textColorAccent);
border-radius: 2px;
}
.iconContainer {