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

Styling list header

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-08-17 15:16:31 +03:00
parent 442884c5b8
commit 9484d76e7a
3 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/list/list.module.scss
View File

@ -6,3 +6,18 @@
.searchInput>label { .searchInput>label {
box-shadow: none!important; box-shadow: none!important;
} }
.listLayout {
background: var(--contentColor);
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.controls {
display: flex;
gap: calc(var(--padding) * 2);
}

19
src/renderer/components/list/list.tsx
View File

@ -7,10 +7,11 @@ import styles from "./list.module.scss";
import themeStyles from "./table-theme.module.scss"; import themeStyles from "./table-theme.module.scss";
import React, { useState } from "react"; import React, { useState } from "react";
import { SearchInput } from "../input"; import { SearchInput, SearchInputUrl } from "../input";
import type { TableOptions } from '@tanstack/react-table' import type { TableOptions } from '@tanstack/react-table'
import { TableList } from "../table-list/table-list"; import { TableList } from "../table-list/table-list";
import { NamespaceSelectFilter } from "../+namespaces/namespace-select-filter";
export type SearchFilter<T> = (item: T) => string; export type SearchFilter<T> = (item: T) => string;
@ -28,18 +29,24 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
)); ));
return ( return (
<> <div className={styles.listLayout}>
<div className="flex align-center justify-between mb-6"> <div className={styles.header}>
<div className="mr-6"> <div>
{title} {title}
</div> </div>
<div> <div>
Showing {filteredData.length} items
</div>
<div className={styles.controls}>
<NamespaceSelectFilter id="object-list-layout-namespace-select-input" />
<SearchInputUrl />
{/*
<SearchInput <SearchInput
value={search} value={search}
theme="round-black" theme="round-black"
onChange={setSearch} onChange={setSearch}
className={styles.searchInput} className={styles.searchInput}
/> /> */}
</div> </div>
</div> </div>
<TableList <TableList
@ -50,6 +57,6 @@ export function List<T>({ columns, data, title, filters }: ListProps<T>) {
{filteredData.length == 0 && ( {filteredData.length == 0 && (
<div className={styles.notFound}>No data found</div> <div className={styles.notFound}>No data found</div>
)} )}
</> </div>
); );
} }

2
src/renderer/components/table-list/table-list.tsx
View File

@ -1,4 +1,4 @@
import type { TableOptions, SortingState, Table as TableType, ColumnDef } from "@tanstack/react-table"; import type { SortingState, Table as TableType, ColumnDef } from "@tanstack/react-table";
import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table"; import { useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table";
import React, { HTMLProps, useMemo } from "react"; import React, { HTMLProps, useMemo } from "react";
import { createColumnHelper } from "@tanstack/react-table"; import { createColumnHelper } from "@tanstack/react-table";