From a88b9c675e8aa60ad5ff8c7810c98f2c32feaad3 Mon Sep 17 00:00:00 2001 From: Alex Andreev Date: Wed, 16 Jun 2021 12:13:09 +0300 Subject: [PATCH] Catalog menu restyling (#3067) * Using TreeView for catalog menu Signed-off-by: Alex Andreev * Showing category icons Signed-off-by: Alex Andreev * Fix catalog badges Signed-off-by: Alex Andreev * Removing darker background on Categories group Signed-off-by: Alex Andreev * Set controlled selected prop Signed-off-by: Alex Andreev --- .../+catalog/catalog-menu.module.css | 30 +++++++ .../components/+catalog/catalog-menu.tsx | 90 +++++++++++++++++++ .../+catalog/catalog-tree.module.css | 67 ++++++++++++++ src/renderer/components/+catalog/catalog.tsx | 31 +------ 4 files changed, 191 insertions(+), 27 deletions(-) create mode 100644 src/renderer/components/+catalog/catalog-menu.module.css create mode 100644 src/renderer/components/+catalog/catalog-menu.tsx create mode 100644 src/renderer/components/+catalog/catalog-tree.module.css diff --git a/src/renderer/components/+catalog/catalog-menu.module.css b/src/renderer/components/+catalog/catalog-menu.module.css new file mode 100644 index 0000000000..c72dd5bb53 --- /dev/null +++ b/src/renderer/components/+catalog/catalog-menu.module.css @@ -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; +} \ No newline at end of file diff --git a/src/renderer/components/+catalog/catalog-menu.tsx b/src/renderer/components/+catalog/catalog-menu.tsx new file mode 100644 index 0000000000..78052cbd9d --- /dev/null +++ b/src/renderer/components/+catalog/catalog-menu.tsx @@ -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(" + : ; +} + +function Item(props: TreeItemProps) { + return ( + + ); +} + +export function CatalogMenu(props: Props) { + return ( + // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4 + +
+ } + defaultExpandIcon={} + selected={props.activeItem || "browse"} + > + props.onItemClick("*")}/> + Categories
} + className={cssNames(styles.bordered)} + > + { + getCategories().map(category => ( + props.onItemClick(category.getId())} + /> + )) + } + + + + + ); +} diff --git a/src/renderer/components/+catalog/catalog-tree.module.css b/src/renderer/components/+catalog/catalog-tree.module.css new file mode 100644 index 0000000000..4787fd71b8 --- /dev/null +++ b/src/renderer/components/+catalog/catalog-tree.module.css @@ -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; +} \ No newline at end of file diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 7a34d44c04..067dab9009 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -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 { }; renderNavigation() { - return ( - -
- - { - this.categories.map(category => ( - - )) - } -
- - ); + return ; } renderItemMenu = (item: CatalogEntityItem) => { @@ -229,7 +206,7 @@ export class Catalog extends React.Component { this.renderIcon(item), item.name, item.source, - item.labels.map((label) => ), + item.labels.map((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 { item.name, item.kind, item.source, - item.labels.map((label) => ), + item.labels.map((label) => ), { title: item.phase, className: cssNames(css[item.phase]) } ]} detailsItem={this.selectedItem}