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

Fix KubeObjectDetails light theme table view (#6981)

Browse Source 
* Add flat TableHead param

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

* Use flat headers across details panel tables

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

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2023-01-19 13:40:25 +03:00 committed by GitHub
parent b8d1ef708e
commit 943756bad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/+events/event-details.tsx
View File

@ -78,7 +78,7 @@ const NonInjectedEventDetails = observer(({
<DrawerTitle>Involved object</DrawerTitle> <DrawerTitle>Involved object</DrawerTitle>
<Table> <Table>
<TableHead> <TableHead flat>
<TableCell>Name</TableCell> <TableCell>Name</TableCell>
<TableCell>Namespace</TableCell> <TableCell>Namespace</TableCell>
<TableCell>Kind</TableCell> <TableCell>Kind</TableCell>

2
src/renderer/components/+network-ingresses/ingress-details.tsx
View File

@ -37,7 +37,7 @@ class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & De
)} )}
{rule.http && ( {rule.http && (
<Table className="paths"> <Table className="paths">
<TableHead> <TableHead flat>
<TableCell className="path">Path</TableCell> <TableCell className="path">Path</TableCell>
<TableCell className="link">Link</TableCell> <TableCell className="link">Link</TableCell>
<TableCell className="backends">Backends</TableCell> <TableCell className="backends">Backends</TableCell>

2
src/renderer/components/+network-services/service-details-endpoint.tsx
View File

@ -46,7 +46,7 @@ class NonInjectedServiceDetailsEndpoint extends React.Component<ServiceDetailsEn
scrollable={false} scrollable={false}
className="box grow" className="box grow"
> >
<TableHead> <TableHead flat>
<TableCell className="name" >Name</TableCell> <TableCell className="name" >Name</TableCell>
<TableCell className="endpoints">Endpoints</TableCell> <TableCell className="endpoints">Endpoints</TableCell>
</TableHead> </TableHead>

2
src/renderer/components/+nodes/details-resources.tsx
View File

@ -38,7 +38,7 @@ export function NodeDetailsResources({ type, node: { status = {}}}: NodeDetailsR
selectable selectable
scrollable={false} scrollable={false}
> >
<TableHead sticky={false}> <TableHead sticky={false} flat>
<TableCell className="cpu">CPU</TableCell> <TableCell className="cpu">CPU</TableCell>
<TableCell className="memory">Memory</TableCell> <TableCell className="memory">Memory</TableCell>
<TableCell className="ephemeral-storage">Ephemeral Storage</TableCell> <TableCell className="ephemeral-storage">Ephemeral Storage</TableCell>

2
src/renderer/components/+workloads-deployments/deployment-replicasets.tsx
View File

@ -78,7 +78,7 @@ class NonInjectedDeploymentReplicaSets extends React.Component<DeploymentReplica
sortSyncWithUrl={false} sortSyncWithUrl={false}
className="box grow" className="box grow"
> >
<TableHead> <TableHead flat>
<TableCell className="name" sortBy={sortBy.name}>Name</TableCell> <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
<TableCell className="warning"/> <TableCell className="warning"/>
<TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell> <TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell>

2
src/renderer/components/+workloads-pods/pod-details-list.tsx
View File

@ -190,7 +190,7 @@ class NonInjectedPodDetailsList extends React.Component<PodDetailsListProps & De
)} )}
className="box grow" className="box grow"
> >
<TableHead> <TableHead flat>
<TableCell className="name" sortBy={sortBy.name}>Name</TableCell> <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
<TableCell className="warning"/> <TableCell className="warning"/>
<TableCell className="node" sortBy={sortBy.node}>Node</TableCell> <TableCell className="node" sortBy={sortBy.node}>Node</TableCell>

4
src/renderer/components/drawer/drawer.scss
View File

@ -86,9 +86,5 @@
.drawer-content { .drawer-content {
overflow: auto; overflow: auto;
padding: var(--spacing); padding: var(--spacing);
.Table .TableHead {
border-bottom: 1px solid var(--borderFaintColor);
}
} }
} }

5
src/renderer/components/table/table-head.scss
View File

@ -36,4 +36,9 @@
} }
} }
} }
&.flat {
background-color: transparent;
font-weight: 600;
}
} }

4
src/renderer/components/table/table-head.tsx
View File

@ -15,6 +15,7 @@ export interface TableHeadProps extends React.DOMAttributes<HTMLDivElement> {
showTopLine?: boolean; // show border line at the top showTopLine?: boolean; // show border line at the top
sticky?: boolean; // keep header on top when scrolling sticky?: boolean; // keep header on top when scrolling
nowrap?: boolean; // white-space: nowrap, align inner <TableCell> in one line nowrap?: boolean; // white-space: nowrap, align inner <TableCell> in one line
flat?: boolean; // no header background
} }
export class TableHead extends React.Component<TableHeadProps> { export class TableHead extends React.Component<TableHeadProps> {
@ -23,10 +24,11 @@ export class TableHead extends React.Component<TableHeadProps> {
}; };
render() { render() {
const { className, sticky, nowrap, showTopLine, children, ...headProps } = this.props; const { className, sticky, nowrap, showTopLine, flat, children, ...headProps } = this.props;
const classNames = cssNames("TableHead", className, { const classNames = cssNames("TableHead", className, {
sticky, nowrap, sticky, nowrap,
topLine: showTopLine, topLine: showTopLine,
flat,
}); });
return ( return (