From 7441a1121e60dbf5230bb783a953f17f6337a7fd Mon Sep 17 00:00:00 2001 From: Roman Date: Thu, 28 Oct 2021 17:20:31 +0300 Subject: [PATCH 1/4] fix: Catalog -> Columns visibility menu -> Empty title for "Icon" Signed-off-by: Roman --- src/common/utils/makeCss.ts | 30 -------- .../+catalog/catalog-entity-item.tsx | 5 +- .../components/+catalog/catalog.module.css | 76 ++++++++++--------- src/renderer/components/+catalog/catalog.tsx | 24 +++--- 4 files changed, 52 insertions(+), 83 deletions(-) delete mode 100644 src/common/utils/makeCss.ts diff --git a/src/common/utils/makeCss.ts b/src/common/utils/makeCss.ts deleted file mode 100644 index 0187f0196bc3..000000000000 --- 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 1489ef9efcc4..56b12c9ad18e 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 => ( */ - background-color: transparent; - box-shadow: none; - } +.Catalog {} + +.entityName { + position: relative; + width: min-content; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 24px; + + .pinIcon { + position: absolute; + right: 0; + opacity: 0; + transition: none; + + &:hover { + /* Drop styles defined for */ + background-color: transparent; + box-shadow: none; } } - - &:hover .pinIcon { - opacity: 1; - } } .iconCell { - @apply flex items-center max-w-[40px]; -} + padding-top: calc(var(--padding) / 2); + flex: 0 0 40px !important; -.iconCell > div * { - font-size: var(--unit); -} + :global(.content) { + display: none; /* hide "Icon" text in the header */ + } + + div * { + font-size: var(--unit); /* icon's with plain text */ + } -.nameCell { + :global(.Icon) { + font-size: var(--small-size) !important; + } } .sourceCell { @@ -64,14 +66,16 @@ .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 8b491ec76591..5c4f84e84ea8 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(), }; @@ -254,11 +252,11 @@ export class Catalog extends React.Component { return ( item.name, @@ -270,12 +268,12 @@ 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: "Icon", className: styles.iconCell, id: "icon" }, + { title: "Name", 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, @@ -286,7 +284,7 @@ export class Catalog extends React.Component { !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 +300,7 @@ export class Catalog extends React.Component { return (
- { this.renderList() } + {this.renderList()}
{ this.catalogEntityStore.selectedItem From cef043db8d4fa2fbbb80be029831a27cb56b2c6c Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 8 Nov 2021 19:08:32 +0200 Subject: [PATCH 2/4] moving entity-icon inside name column / fixes Signed-off-by: Roman --- .../components/+catalog/catalog.module.css | 57 +++++++++++-------- src/renderer/components/+catalog/catalog.tsx | 41 ++++++------- .../icon/{push-pin.svg => push_pin.svg} | 0 3 files changed, 49 insertions(+), 49 deletions(-) rename src/renderer/components/icon/{push-pin.svg => push_pin.svg} (100%) diff --git a/src/renderer/components/+catalog/catalog.module.css b/src/renderer/components/+catalog/catalog.module.css index 3bdfb4484b6a..34f3fe246053 100644 --- a/src/renderer/components/+catalog/catalog.module.css +++ b/src/renderer/components/+catalog/catalog.module.css @@ -19,47 +19,56 @@ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -.Catalog {} +.Catalog { + :global(.TableRow):hover .pinIcon { + display: block; + } +} .entityName { position: relative; - width: min-content; + width: 100%; max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 24px; + display: flex; + align-items: center; + padding: 0 var(--padding); + padding-bottom: 0; + padding-right: 24px; // + reserved space for .pinIcon + + > span { + overflow: hidden; + text-overflow: ellipsis; + padding-left: var(--padding); + } + + :global(.HotbarIcon){ + align-self: center; + + div { + /* icons with plain text */ + font-size: var(--unit); + } + + .Icon { + /* icons with font-icon */ + font-size: var(--small-size); + } + } .pinIcon { position: absolute; right: 0; - opacity: 0; transition: none; + display: none; &:hover { - /* Drop styles defined for */ + /* Drop styles defined for */ background-color: transparent; box-shadow: none; } } } -.iconCell { - padding-top: calc(var(--padding) / 2); - flex: 0 0 40px !important; - - :global(.content) { - display: none; /* hide "Icon" text in the header */ - } - - div * { - font-size: var(--unit); /* icon's with plain text */ - } - - :global(.Icon) { - font-size: var(--small-size) !important; - } -} - .sourceCell { max-width: 100px; } diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index a502dce2aa54..2ea62c89a346 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -103,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}

); } @@ -167,15 +167,15 @@ export class Catalog extends React.Component { const activeCategory = this.categories.find(category => category.getId() === tabId); if (activeCategory) { - navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind }})); + navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind } })); } else { - navigate(catalogURL({ params: { group: browseCatalogTab }})); + navigate(catalogURL({ params: { group: browseCatalogTab } })); } }; renderNavigation() { return ( - + ); } @@ -212,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))} + /> + ); } @@ -268,8 +261,7 @@ export class Catalog extends React.Component { entity => entity.searchFields, ]} renderTableHeader={[ - { title: "Icon", className: styles.iconCell, id: "icon" }, - { title: "Name", sortBy: sortBy.name, id: "name" }, + { 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" }, @@ -279,7 +271,6 @@ export class Catalog extends React.Component { disabled: !item.enabled, })} renderTableContents={item => [ - this.renderIcon(item), this.renderName(item), !activeCategory && item.kind, item.source, 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 From ba7f8e7ce38df0476a5d09caedd026e94c867577 Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 8 Nov 2021 19:16:25 +0200 Subject: [PATCH 3/4] fix lint Signed-off-by: Roman --- src/renderer/components/+catalog/catalog.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/+catalog/catalog.tsx b/src/renderer/components/+catalog/catalog.tsx index 2ea62c89a346..62b3258f6d49 100644 --- a/src/renderer/components/+catalog/catalog.tsx +++ b/src/renderer/components/+catalog/catalog.tsx @@ -167,9 +167,9 @@ export class Catalog extends React.Component { const activeCategory = this.categories.find(category => category.getId() === tabId); if (activeCategory) { - navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind } })); + navigate(catalogURL({ params: { group: activeCategory.spec.group, kind: activeCategory.spec.names.kind }})); } else { - navigate(catalogURL({ params: { group: browseCatalogTab } })); + navigate(catalogURL({ params: { group: browseCatalogTab }})); } }; From c164c3bd8db80d6ef223cf35a706d9f4af3be49e Mon Sep 17 00:00:00 2001 From: Roman Date: Tue, 9 Nov 2021 11:33:39 +0200 Subject: [PATCH 4/4] added vertical alignment for texts in the name column Signed-off-by: Roman --- src/renderer/components/+catalog/catalog.module.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/renderer/components/+catalog/catalog.module.css b/src/renderer/components/+catalog/catalog.module.css index 34f3fe246053..587d1fd8c4b4 100644 --- a/src/renderer/components/+catalog/catalog.module.css +++ b/src/renderer/components/+catalog/catalog.module.css @@ -20,6 +20,11 @@ */ .Catalog { + :global(.TableHead) .entityName { + /* offset for icon to align texts in the column */ + padding-left: calc(21px + var(--padding) * 2.5); + } + :global(.TableRow):hover .pinIcon { display: block; }