mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Align table rows
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
parent
a1cbc7a568
commit
64ee0cb486
@ -4,7 +4,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.extensionDescription {
|
.extensionDescription {
|
||||||
@apply mt-2;
|
@apply mt-1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.enabled {
|
.enabled {
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
import styles from "./installed-extensions.module.css";
|
import styles from "./installed-extensions.module.css";
|
||||||
import { Avatar } from "@material-ui/core";
|
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
|
import { ExtensionDiscovery, InstalledExtension } from "../../../extensions/extension-discovery";
|
||||||
import { ExtensionLoader } from "../../../extensions/extension-loader";
|
import { ExtensionLoader } from "../../../extensions/extension-loader";
|
||||||
@ -70,9 +69,6 @@ export function InstalledExtensions({ extensions, uninstall }: Props) {
|
|||||||
return {
|
return {
|
||||||
extension: (
|
extension: (
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<div className="mr-4 mt-2">
|
|
||||||
<Avatar/>
|
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.extensionName}>{name}</div>
|
<div className={styles.extensionName}>{name}</div>
|
||||||
<div className={styles.extensionDescription}>{description}</div>
|
<div className={styles.extensionDescription}>{description}</div>
|
||||||
|
|||||||
@ -112,6 +112,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:focus:not(:active) {
|
&:focus:not(:active) {
|
||||||
transition: box-shadow 350ms;
|
transition: box-shadow 350ms;
|
||||||
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
|
||||||
|
|||||||
@ -11,12 +11,17 @@
|
|||||||
height: 33px;
|
height: 33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thead .tr {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tr {
|
.tr {
|
||||||
|
margin: var(--margin) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th {
|
.th {
|
||||||
@apply relative whitespace-nowrap;
|
@apply relative whitespace-nowrap;
|
||||||
padding: var(--padding);
|
padding: 0 var(--padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
.headIcon {
|
.headIcon {
|
||||||
@ -30,7 +35,7 @@
|
|||||||
|
|
||||||
.td {
|
.td {
|
||||||
@apply flex items-center;
|
@apply flex items-center;
|
||||||
padding: var(--padding);
|
padding: 0 var(--padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
|
|||||||
@ -51,7 +51,7 @@ export function Table({ columns, data, virtual, headless }: Props) {
|
|||||||
{...row.getRowProps({
|
{...row.getRowProps({
|
||||||
style,
|
style,
|
||||||
})}
|
})}
|
||||||
className="tr"
|
className={styles.tr}
|
||||||
>
|
>
|
||||||
{row.cells.map((cell, index) => (
|
{row.cells.map((cell, index) => (
|
||||||
<div {...cell.getCellProps()} key={cell.getCellProps().key} className={cssNames(styles.td, columns[index].accessor)}>
|
<div {...cell.getCellProps()} key={cell.getCellProps().key} className={cssNames(styles.td, columns[index].accessor)}>
|
||||||
@ -70,7 +70,7 @@ export function Table({ columns, data, virtual, headless }: Props) {
|
|||||||
{headerGroups.map(headerGroup => (
|
{headerGroups.map(headerGroup => (
|
||||||
<div {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key} className={styles.tr}>
|
<div {...headerGroup.getHeaderGroupProps()} key={headerGroup.getHeaderGroupProps().key} className={styles.tr}>
|
||||||
{headerGroup.headers.map(column => (
|
{headerGroup.headers.map(column => (
|
||||||
<div {...column.getHeaderProps(column.getSortByToggleProps())} key={column.getHeaderProps().key} className={styles.tr}>
|
<div {...column.getHeaderProps(column.getSortByToggleProps())} key={column.getHeaderProps().key} className={styles.th}>
|
||||||
{column.render("Header")}
|
{column.render("Header")}
|
||||||
{/* Sort direction indicator */}
|
{/* Sort direction indicator */}
|
||||||
<span>
|
<span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user