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

Catalog menu restyling (#3067)

Browse Source 
* Using TreeView for catalog menu

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Showing category icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fix catalog badges

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing darker background on Categories group

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Set controlled selected prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-06-16 12:13:09 +03:00 committed by GitHub
parent 3abb3bdcce
commit a88b9c675e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 191 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,30 @@
/**
* 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);
}
.parent {
@apply uppercase font-bold;
color: var(--textColorAccent);
font-size: small;
}

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

@ -0,0 +1,90 @@
/**
* 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";
import type { CatalogCategory } from "../../api/catalog-entity";
type Props = {
activeItem: string;
onItemClick: (id: string) => void;
};
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}/>
);
}
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" />}
selected={props.activeItem || "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)}
>
{
getCategories().map(category => (
<Item
icon={getCategoryIcon(category)}
key={category.getId()}
nodeId={category.getId()}
label={category.metadata.name}
data-testid={`${category.getId()}-tab`}
onClick={() => props.onItemClick(category.getId())}
/>
))
}
</Item>
</TreeView>
</div>
</StylesProvider>
);
}

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

@ -0,0 +1,67 @@
/**
* 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.
*/
/* 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;
}
.label {
font-size: var(--font-size);
background-color: transparent!important;
}
.label:hover {
background-color: transparent;
}
.content {
min-height: 26px;
}
.content:hover {
background-color: var(--sidebarItemHoverBackground);
border-radius: 2px;
}
.group {
margin-left: 0px;
}
.group .iconContainer {
margin-left: 28px;
}
.selected > *:first-child {
background-color: var(--blue);
color: white;
border-radius: 2px;
}
.iconContainer {
width: 21px;
margin-left: 5px;
margin-right: 0;
}

31
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";
@ -42,6 +41,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";
import { HotbarIcon } from "../hotbar/hotbar-icon";
enum sortBy {
@ -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 activeItem={this.activeTab} onItemClick={this.onTabChange}/>;
}
renderItemMenu = (item: CatalogEntityItem) => {
@ -229,7 +206,7 @@ export class Catalog extends React.Component<Props> {
this.renderIcon(item),
item.name,
item.source,
item.labels.map((label) => <Badge key={label} label={label} title={label} />),
item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
{ title: item.phase, className: cssNames(css[item.phase]) }
]}
onDetails={(item: CatalogEntityItem) => this.onDetails(item) }
@ -268,7 +245,7 @@ export class Catalog extends React.Component<Props> {
item.name,
item.kind,
item.source,
item.labels.map((label) => <Badge key={label} label={label} title={label} />),
item.labels.map((label) => <Badge className={css.badge} key={label} label={label} title={label} />),
{ title: item.phase, className: cssNames(css[item.phase]) }
]}
detailsItem={this.selectedItem}