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

Using TreeView for catalog menu

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-15 14:45:39 +03:00
parent 62bc806105
commit aea1a3c7d2
4 changed files with 173 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/renderer/components/+catalog/catalog-menu.module.css Normal file
View File

@ -0,0 +1,34 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.bordered {
border-top: 1px solid var(--inputControlBorder);
}
.accent {
background-color: var(--layoutBackground);
}
.parent {
@apply uppercase font-bold;
color: var(--textColorAccent);
font-size: small;
}

79
src/renderer/components/+catalog/catalog-menu.tsx Normal file
View File

@ -0,0 +1,79 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
import treeStyles from "./catalog-tree.module.css";
import styles from "./catalog-menu.module.css";
import React from "react";
import { TreeItem, TreeItemProps, TreeView } from "@material-ui/lab";
import { catalogCategoryRegistry } from "../../api/catalog-category-registry";
import { Icon } from "../icon";
import { StylesProvider } from "@material-ui/core";
import { cssNames } from "../../utils";
type Props = {
onItemClick: (id: string) => void;
};
function getCategories() {
return catalogCategoryRegistry.items;
}
function Item(props: TreeItemProps) {
return (
<TreeItem classes={treeStyles} {...props}/>
);
}
export function CatalogMenu(props: Props) {
return (
// Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
<StylesProvider injectFirst>
<div className="flex flex-col w-full">
<TreeView
defaultExpanded={["catalog"]}
defaultCollapseIcon={<Icon material="expand_more"/>}
defaultExpandIcon={<Icon material="chevron_right" />}
defaultSelected="browse"
>
<Item nodeId="browse" label="Browse" data-testid="*-tab" onClick={() => props.onItemClick("*")}/>
<Item
nodeId="catalog"
label={<div className={styles.parent}>Categories</div>}
className={cssNames(styles.bordered, styles.accent)}
>
{
getCategories().map(category => (
<Item
key={category.getId()}
nodeId={category.getId()}
label={category.metadata.name}
data-testid={`${category.getId()}-tab`}
onClick={() => props.onItemClick(category.getId())}
/>
))
}
</Item>
</TreeView>
</div>
</StylesProvider>
);
}

58
src/renderer/components/+catalog/catalog-tree.module.css Normal file
View File

@ -0,0 +1,58 @@
/**
* Copyright (c) 2021 OpenLens Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.root {
color: var(--textColorTertiary);
min-height: 26px;
}
.label {
font-size: var(--font-size);
background-color: transparent!important;
}
.label:hover {
background-color: transparent;
}
.content {
min-height: 26px;
}
.content:hover {
background-color: var(--blue);
color: var(--textColorAccent);
}
.group {
margin-left: 0;
}
.selected > *:first-child {
background-color: var(--blue);
color: var(--textColorAccent);
}
.iconContainer {
width: 21px;
margin-left: 5px;
margin-right: 0;
}

27
src/renderer/components/+catalog/catalog.tsx
View File

@ -32,7 +32,6 @@ import type { CatalogEntityContextMenu, CatalogEntityContextMenuContext } from "
import { Badge } from "../badge";
import { HotbarStore } from "../../../common/hotbar-store";
import { ConfirmDialog } from "../confirm-dialog";
import { Tab, Tabs } from "../tabs";
import { catalogCategoryRegistry } from "../../../common/catalog";
import { CatalogAddButton } from "./catalog-add-button";
import type { RouteComponentProps } from "react-router";
@ -43,6 +42,7 @@ import { cssNames } from "../../utils";
import { makeCss } from "../../../common/utils/makeCss";
import { CatalogEntityDetails } from "./catalog-entity-details";
import type { CatalogViewRouteParam } from "../../../common/routes";
import { CatalogMenu } from "./catalog-menu";
enum sortBy {
name = "name",
@ -141,30 +141,7 @@ export class Catalog extends React.Component<Props> {
};
renderNavigation() {
return (
<Tabs className={cssNames(css.tabs, "flex column")} scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
<div>
<Tab
value={undefined}
key="*"
label="Browse"
data-testid="*-tab"
className={cssNames(css.tab, { [css.activeTab]: this.activeTab == null })}
/>
{
this.categories.map(category => (
<Tab
value={category.getId()}
key={category.getId()}
label={category.metadata.name}
data-testid={`${category.getId()}-tab`}
className={cssNames(css.tab, { [css.activeTab]: this.activeTab == category.getId() })}
/>
))
}
</div>
</Tabs>
);
return <CatalogMenu onItemClick={this.onTabChange}/>;
}
renderItemMenu = (item: CatalogEntityItem) => {