mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Restyling extensions page with tailwindcss (#2796)
* Setting up tailwind and css modules env Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using tailwind with scss files also Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Introducing react-table Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Spread extensions to smaller components Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add table sorting Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing inputs line-height Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fine-tuning page view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Align table rows Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding extension notice Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fine-tuning overall styling Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding a extensions placeholder Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Updating MaterialIcons font Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Aligning not found state Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Making extension components observable Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing search input cross icon Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix drag-n-drop indication Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing extension name sorting Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix linter Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Ignoring ts files to tailwind purge Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Renaming Table -> ReactTable Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing integration tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving tailwind imports into app.scss Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving userExtensionList() out from extension-loader Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Transform extension list to array Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Expand install input placeholder a bit Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev authored and 
GitHub committed
1 parent
ef21eba724
commit
0899ace037
35 files changed
+1677
-360
No files matched your search
@@ -0,0 +1,43 @@
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
border-top: thin solid var(--hrColor);
|
||||
}
|
||||
|
||||
.thead {
|
||||
@apply overflow-hidden font-bold;
|
||||
border-bottom: thin solid var(--hrColor);
|
||||
color: var(--textColorAccent);
|
||||
padding-top: 7px;
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.thead .tr {
|
||||
margin: 0 var(--margin);
|
||||
}
|
||||
|
||||
.tr {
|
||||
margin: calc(var(--margin) * 1.6) var(--margin);
|
||||
}
|
||||
|
||||
.th {
|
||||
@apply relative whitespace-nowrap;
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
|
||||
.headIcon {
|
||||
font-weight: normal;
|
||||
color: var(--textColorAccent);
|
||||
}
|
||||
|
||||
.disabledArrow {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.td {
|
||||
@apply flex items-center;
|
||||
padding: 0 var(--padding);
|
||||
}
|
||||
|
||||
.actions {
|
||||
@apply justify-end;
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
|
||||
import styles from "./react-table.module.css";
|
||||
import React from "react";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { useFlexLayout, useSortBy, useTable, UseTableOptions } from "react-table";
|
||||
import { Icon } from "../icon";
|
||||
import { cssNames } from "../../utils";
|
||||
|
||||
interface Props extends UseTableOptions<any> {
|
||||
headless?: boolean;
|
||||
}
|
||||
|
||||
export function ReactTable({ columns, data, headless }: Props) {
|
||||
const defaultColumn = useMemo(
|
||||
() => ({
|
||||
minWidth: 20,
|
||||
width: 100,
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
rows,
|
||||
prepareRow,
|
||||
} = useTable(
|
||||
{
|
||||
columns,
|
||||
data,
|
||||
defaultColumn,
|
||||
},
|
||||
useFlexLayout,
|
||||
useSortBy,
|
||||
);
|
||||
|
||||
const RenderRow = useCallback(
|
||||
({ index, style }) => {
|
||||
const row = rows[index];
|
||||
|
||||
prepareRow(row);
|
||||
|
||||
return (
|
||||
<div
|
||||
{...row.getRowProps({
|
||||
style,
|
||||
})}
|
||||
className={styles.tr}
|
||||
>
|
||||
{row.cells.map((cell, index) => (
|
||||
<div {...cell.getCellProps()} key={cell.getCellProps().key} className={cssNames(styles.td, columns[index].accessor)}>
|
||||
{cell.render("Cell")}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
[columns, prepareRow, rows]
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...getTableProps()} className={styles.table}>
|
||||
{!headless && <div className={styles.thead}>
|
||||
{headerGroups.map(headerGroup => (
|
||||
<div {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key} className={styles.tr}>
|
||||
{headerGroup.headers.map(column => (
|
||||
<div {...column.getHeaderProps(column.getSortByToggleProps())} key={column.getHeaderProps().key} className={styles.th}>
|
||||
{column.render("Header")}
|
||||
{/* Sort direction indicator */}
|
||||
<span>
|
||||
{column.isSorted
|
||||
? column.isSortedDesc
|
||||
? <Icon material="arrow_drop_down" small/>
|
||||
: <Icon material="arrow_drop_up" small/>
|
||||
: !column.disableSortBy && <Icon material="arrow_drop_down" small className={styles.disabledArrow}/>}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>}
|
||||
|
||||
<div {...getTableBodyProps()}>
|
||||
{rows.map((row, index) => RenderRow({index}))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user