From 38ebbc8b9e4730f6e7eb28a47d8725c74711fa7e Mon Sep 17 00:00:00 2001 From: Roman Date: Wed, 10 Nov 2021 14:28:21 +0200 Subject: [PATCH] Fix: Catalog's visibility columns menu -> Empty title for Icon (#4189) * fix: Catalog -> Columns visibility menu -> Empty title for "Icon" Signed-off-by: Roman * moving entity-icon inside name column / fixes Signed-off-by: Roman * fix lint Signed-off-by: Roman * added vertical alignment for texts in the name column Signed-off-by: Roman --- src/common/utils/makeCss.ts | 30 ------- .../+catalog/catalog-entity-item.tsx | 5 +- .../components/+catalog/catalog.module.css | 90 +++++++++++-------- src/renderer/components/+catalog/catalog.tsx | 57 +++++------- .../icon/{push-pin.svg => push_pin.svg} | 0 5 files changed, 78 insertions(+), 104 deletions(-) delete mode 100644 src/common/utils/makeCss.ts rename src/renderer/components/icon/{push-pin.svg => push_pin.svg} (100%) diff --git a/src/common/utils/makeCss.ts b/src/common/utils/makeCss.ts deleted file mode 100644 index 0187f0196b..0000000000 --- a/src/common/utils/makeCss.ts +++ /dev/null @@ -1,30 +0,0 @@ -/** - * 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. - */ - -/** - * Function expands generic CSS Modules literal types and adds dictionary with arbitrary - * indexes. - * @param styles Styles imported from CSS Module having only literal types - * @returns Passed style list with expanded typescript types - */ -export function makeCss(styles: T) { - return styles as typeof styles & { [key: string]: string }; -} diff --git a/src/renderer/components/+catalog/catalog-entity-item.tsx b/src/renderer/components/+catalog/catalog-entity-item.tsx index 1489ef9efc..56b12c9ad1 100644 --- a/src/renderer/components/+catalog/catalog-entity-item.tsx +++ b/src/renderer/components/+catalog/catalog-entity-item.tsx @@ -26,12 +26,9 @@ import type { ItemObject } from "../../../common/item.store"; import { Badge } from "../badge"; import { navigation } from "../../navigation"; import { searchUrlParam } from "../input"; -import { makeCss } from "../../../common/utils/makeCss"; import { KubeObject } from "../../../common/k8s-api/kube-object"; import type { CatalogEntityRegistry } from "../../api/catalog-entity-registry"; -const css = makeCss(styles); - export class CatalogEntityItem implements ItemObject { constructor(public entity: T, private registry: CatalogEntityRegistry) { if (!(entity instanceof CatalogEntity)) { @@ -79,7 +76,7 @@ export class CatalogEntityItem implements ItemObject { return this.labels .map(label => ( span { overflow: hidden; - text-overflow: ellipsis; - padding-right: 24px; + text-overflow: ellipsis; + padding-left: var(--padding); + } - .pinIcon { - position: absolute; - right: 0; - opacity: 0; - transition: none; + :global(.HotbarIcon){ + align-self: center; - &:hover { - /* Drop styles defined for */ - background-color: transparent; - box-shadow: none; - } + div { + /* icons with plain text */ + font-size: var(--unit); + } + + .Icon { + /* icons with font-icon */ + font-size: var(--small-size); } } - &:hover .pinIcon { - opacity: 1; + .pinIcon { + position: absolute; + right: 0; + transition: none; + display: none; + + &:hover { + /* Drop styles defined for */ + background-color: transparent; + box-shadow: none; + } } } -.iconCell { - @apply flex items-center max-w-[40px]; -} - -.iconCell > div * { - font-size: var(--unit); -} - -.nameCell { -} - .sourceCell { max-width: 100px; } .statusCell { max-width: 100px; -} -.connected, .available { - color: var(--colorSuccess); -} + :global { + .connected, .available { + color: var(--colorSuccess); + } -.disconnected, .deleting, .unavailable { - color: var(--halfGray); + .disconnected, .deleting, .unavailable { + color: var(--halfGray); + } + } } .labelsCell { diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 1c1da5e32c..62b3258f6d 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -37,8 +37,7 @@ import { CatalogAddButton } from "./catalog-add-button"; import type { RouteComponentProps } from "react-router"; import { Notifications } from "../notifications"; import { MainLayout } from "../layout/main-layout"; -import { createStorage, cssNames, prevDefault } from "../../utils"; -import { makeCss } from "../../../common/utils/makeCss"; +import { createStorage, prevDefault } from "../../utils"; import { CatalogEntityDetails } from "./catalog-entity-details"; import { browseCatalogTab, catalogURL, CatalogViewRouteParam } from "../../../common/routes"; import { CatalogMenu } from "./catalog-menu"; @@ -56,8 +55,6 @@ enum sortBy { status = "status", } -const css = makeCss(styles); - interface Props extends RouteComponentProps { catalogEntityStore?: CatalogEntityStore; } @@ -73,6 +70,7 @@ export class Catalog extends React.Component { makeObservable(this); this.catalogEntityStore = props.catalogEntityStore; } + static defaultProps = { catalogEntityStore: new CatalogEntityStore(), }; @@ -105,7 +103,7 @@ export class Catalog extends React.Component { this.activeTab = routeTab; this.catalogEntityStore.activeCategory = item; }); - } catch(error) { + } catch (error) { console.error(error); Notifications.error(

Unknown category: {routeTab}

); } @@ -177,7 +175,7 @@ export class Catalog extends React.Component { renderNavigation() { return ( - + ); } @@ -214,23 +212,7 @@ export class Catalog extends React.Component { const isItemInHotbar = HotbarStore.getInstance().isAddedToActive(item.entity); return ( -
- {item.name} - isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))} - /> -
- ); - } - - renderIcon(item: CatalogEntityItem) { - return ( - + <> { background={item.entity.spec.icon?.background} size={24} /> - + {item.name} + isItemInHotbar ? this.removeFromHotbar(item) : this.addToHotbar(item))} + /> + ); } @@ -254,11 +245,11 @@ export class Catalog extends React.Component { return ( item.name, @@ -270,23 +261,21 @@ export class Catalog extends React.Component { entity => entity.searchFields, ]} renderTableHeader={[ - { title: "", className: css.iconCell, id: "icon" }, - { title: "Name", className: css.nameCell, sortBy: sortBy.name, id: "name" }, - !activeCategory && { title: "Kind", className: css.kindCell, sortBy: sortBy.kind, id: "kind" }, - { title: "Source", className: css.sourceCell, sortBy: sortBy.source, id: "source" }, - { title: "Labels", className: css.labelsCell, id: "labels" }, - { title: "Status", className: css.statusCell, sortBy: sortBy.status, id: "status" }, + { title: "Name", className: styles.entityName, sortBy: sortBy.name, id: "name" }, + !activeCategory && { title: "Kind", sortBy: sortBy.kind, id: "kind" }, + { title: "Source", className: styles.sourceCell, sortBy: sortBy.source, id: "source" }, + { title: "Labels", className: styles.labelsCell, id: "labels" }, + { title: "Status", className: styles.statusCell, sortBy: sortBy.status, id: "status" }, ].filter(Boolean)} customizeTableRowProps={item => ({ disabled: !item.enabled, })} renderTableContents={item => [ - this.renderIcon(item), this.renderName(item), !activeCategory && item.kind, item.source, item.getLabelBadges(), - { title: item.phase, className: cssNames(css[item.phase]) }, + {item.phase}, ].filter(Boolean)} onDetails={this.onDetails} renderItemMenu={this.renderItemMenu} @@ -302,7 +291,7 @@ export class Catalog extends React.Component { return (
- { this.renderList() } + {this.renderList()}
{ this.catalogEntityStore.selectedItem diff --git a/src/renderer/components/icon/push-pin.svg b/src/renderer/components/icon/push_pin.svg similarity index 100% rename from src/renderer/components/icon/push-pin.svg rename to src/renderer/components/icon/push_pin.svg