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

Styling TreeView inside scss module

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-02-03 16:17:43 +03:00
parent ef618f3f74
commit db0cb45a30
2 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/src/renderer/components/+namespaces/namespace-tree-view.module.scss Normal file
View File

@ -0,0 +1,14 @@
.TreeView {
.group {
margin-inline-start: var(--margin);
padding-inline-start: calc(var(--padding) * 2);
border-inline-start: 1px dashed var(--borderColor);
}
.label {
font-size: inherit;
line-height: 1.8;
cursor: default;
background-color: transparent!important;
}
}

33
packages/core/src/renderer/components/+namespaces/namespace-tree-view.tsx
View File

@ -2,8 +2,10 @@
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { SvgIcon, withStyles } from "@material-ui/core";
import type { TreeItemProps } from "@material-ui/lab";
import styles from "./namespace-tree-view.module.scss";
import { SvgIcon } from "@material-ui/core";
import { TreeItem, TreeView } from "@material-ui/lab";
import { withInjectables } from "@ogre-tools/injectable-react";
import React from "react";
@ -34,6 +36,7 @@ function isNamespaceControlledByHNC(namespace: Namespace) {
function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }: Dependencies & NamespaceTreeViewProps) {
const hierarchicalNamespaces = namespaceStore.getByLabel(["hnc.x-k8s.io/included-namespace=true"]);
const [expandedItems, setExpandedItems] = React.useState<string[]>(hierarchicalNamespaces.map(ns => `namespace-${ns.getId()}`));
const classes = { group: styles.group, label: styles.label };
function renderChildren(parent: Namespace) {
const children = hierarchicalNamespaces.filter(ns =>
@ -41,10 +44,11 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
);
return children.map(child => (
<StyledTreeItem
<TreeItem
key={`namespace-${child.getId()}`}
nodeId={`namespace-${child.getId()}`}
data-testid={`namespace-${child.getId()}`}
classes={classes}
onIconClick={(evt) =>{
toggleNode(`namespace-${child.getId()}`);
evt.stopPropagation();
@ -63,7 +67,7 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
)}
>
{renderChildren(child)}
</StyledTreeItem>
</TreeItem>
));
}
@ -80,7 +84,7 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
}
return (
<div data-testid="namespace-tree-view">
<div data-testid="namespace-tree-view" className={styles.TreeView}>
<DrawerTitle>Tree View</DrawerTitle>
<TreeView
defaultExpanded={[`namespace-${root.getId()}`]}
@ -89,17 +93,18 @@ function NonInjectableNamespaceTreeView({ root, namespaceStore, getDetailsUrl }:
defaultEndIcon={(<div style={{ opacity: 0.3 }}><MinusSquare /></div>)}
expanded={expandedItems}
>
<StyledTreeItem
<TreeItem
nodeId={`namespace-${root.getId()}`}
label={root.getName()}
data-testid={`namespace-${root.getId()}`}
classes={classes}
onIconClick={(evt) => {
toggleNode(`namespace-${root.getId()}`);
evt.stopPropagation();
}}
>
{renderChildren(root)}
</StyledTreeItem>
</TreeItem>
</TreeView>
</div>
);
@ -121,20 +126,6 @@ function PlusSquare() {
);
}
const StyledTreeItem = withStyles(() => ({
group: {
marginLeft: 8,
paddingLeft: 16,
borderLeft: `1px dashed var(--borderColor)`,
},
label: {
fontSize: "inherit",
lineHeight: "1.8",
cursor: "default",
backgroundColor: "transparent!important",
},
}))((props: TreeItemProps) => <TreeItem {...props} />);
export const NamespaceTreeView = withInjectables<Dependencies, NamespaceTreeViewProps>(NonInjectableNamespaceTreeView, {
getProps: (di, props) => ({
namespaceStore: di.inject(namespaceStoreInjectable),