Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Catalog's visibility columns menu -> Empty title for Icon #4189

Merged
merged 6 commits into from
Nov 10, 2021
Merged

Fix: Catalog's visibility columns menu -> Empty title for Icon #4189

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7441a11
fix: Catalog -> Columns visibility menu -> Empty title for "Icon"
ixrock Oct 28, 2021
6476516
Merge remote-tracking branch 'origin/master' into fix/catalog/icon_me…
ixrock Nov 3, 2021
de6764a
Merge remote-tracking branch 'origin/master' into fix/catalog/icon_me…
ixrock Nov 3, 2021
cef043d
moving entity-icon inside name column / fixes
ixrock Nov 8, 2021
ba7f8e7
fix lint
ixrock Nov 8, 2021
c164c3b
added vertical alignment for texts in the name column
ixrock Nov 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions src/common/utils/makeCss.ts
View file
Open in desktop

This file was deleted.

5 changes: 1 addition & 4 deletions src/renderer/components/+catalog/catalog-entity-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To support css-classes auto-completion use vscode-css-modules plugin.


export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
constructor(public entity: T, private registry: CatalogEntityRegistry) {
if (!(entity instanceof CatalogEntity)) {
Expand Down Expand Up @@ -79,7 +76,7 @@ export class CatalogEntityItem<T extends CatalogEntity> implements ItemObject {
return this.labels
.map(label => (
<Badge
className={css.badge}
className={styles.badge}
key={label}
label={label}
title={label}
Expand Down
76 changes: 40 additions & 36 deletions src/renderer/components/+catalog/catalog.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,43 +19,45 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.list :global(.TableRow) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of all these changes, wouldn't it just have been easier to use showWithColumn?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. Because otherwise it' requires other hacks to hide text "Icon" in the header column or if we leave it empty as result we have empty menu-item for the table.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showWithColumn hides that menu item that is the point of it.

.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 <Icon/> */
background-color: transparent;
box-shadow: none;
}
.Catalog {}
aleksfront marked this conversation as resolved.
Show resolved Hide resolved

.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 <Icon/> */
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 {
Expand All @@ -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 {
Expand Down
24 changes: 11 additions & 13 deletions src/renderer/components/+catalog/catalog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -56,8 +55,6 @@ enum sortBy {
status = "status",
}

const css = makeCss(styles);

interface Props extends RouteComponentProps<CatalogViewRouteParam> {
catalogEntityStore?: CatalogEntityStore;
}
Expand All @@ -73,6 +70,7 @@ export class Catalog extends React.Component<Props> {
makeObservable(this);
this.catalogEntityStore = props.catalogEntityStore;
}

static defaultProps = {
catalogEntityStore: new CatalogEntityStore(),
};
Expand Down Expand Up @@ -254,11 +252,11 @@ export class Catalog extends React.Component<Props> {

return (
<ItemListLayout
className={styles.Catalog}
tableId={tableId}
renderHeaderTitle={activeCategory?.metadata.name || "Browse All"}
isSelectable={false}
isConfigurable={true}
className={styles.list}
store={this.catalogEntityStore}
sortingCallbacks={{
[sortBy.name]: item => item.name,
Expand All @@ -270,12 +268,12 @@ export class Catalog extends React.Component<Props> {
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" },
ixrock marked this conversation as resolved.
Show resolved Hide resolved
{ 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,
Expand All @@ -286,7 +284,7 @@ export class Catalog extends React.Component<Props> {
!activeCategory && item.kind,
item.source,
item.getLabelBadges(),
{ title: item.phase, className: cssNames(css[item.phase]) },
<span key="phase" className={item.phase}>{item.phase}</span>,
].filter(Boolean)}
onDetails={this.onDetails}
renderItemMenu={this.renderItemMenu}
Expand All @@ -302,7 +300,7 @@ export class Catalog extends React.Component<Props> {
return (
<MainLayout sidebar={this.renderNavigation()}>
<div className="p-6 h-full">
{ this.renderList() }
{this.renderList()}
</div>
{
this.catalogEntityStore.selectedItem
Expand Down