yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Improve settings layout (#3234)

Browse Source 
* Setup, and security settings

* Settings -> Details

* Settings -> Notifications

* Profile

* lint

* fix: Flash of loading on members screen

* align language input

* feat: Move share links management to sortable table

* Add account menu to sidebar on settings page

* Aesthetic tweaks, light borders between settings and slight column offset
This commit is contained in:
Tom Moor
2022-03-14 17:44:56 -07:00
committed by GitHub
parent 1633bbf5aa
commit d63326066f
26 changed files with 682 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/components/Table.tsx
View File

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
import { useTable, useSortBy, usePagination } from "react-table";
import styled from "styled-components";
import Button from "~/components/Button";
import DelayedMount from "~/components/DelayedMount";
import Empty from "~/components/Empty";
import Flex from "~/components/Flex";
import PlaceholderText from "~/components/PlaceholderText";
@@ -121,7 +122,11 @@ function Table({
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<Head {...column.getHeaderProps(column.getSortByToggleProps())}>
<SortWrapper align="center" gap={4}>
<SortWrapper
align="center"
$sortable={!column.disableSortBy}
gap={4}
>
{column.render("Header")}
{column.isSorted &&
(column.isSortedDesc ? (
@@ -190,17 +195,19 @@ export const Placeholder = ({
rows?: number;
}) => {
return (
<tbody>
{new Array(rows).fill(1).map((_, row) => (
<Row key={row}>
{new Array(columns).fill(1).map((_, col) => (
<Cell key={col}>
<PlaceholderText minWidth={25} maxWidth={75} />
</Cell>
))}
</Row>
))}
</tbody>
<DelayedMount>
<tbody>
{new Array(rows).fill(1).map((_, row) => (
<Row key={row}>
{new Array(columns).fill(1).map((_, col) => (
<Cell key={col}>
<PlaceholderText minWidth={25} maxWidth={75} />
</Cell>
))}
</Row>
))}
</tbody>
</DelayedMount>
);
};
@@ -214,6 +221,8 @@ const Pagination = styled(Flex)`
`;
const DescSortIcon = styled(CollapsedIcon)`
margin-left: -2px;
&:hover {
fill: ${(props) => props.theme.text};
}
@@ -229,12 +238,22 @@ const InnerTable = styled.table`
width: 100%;
`;
const SortWrapper = styled(Flex)`
const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
display: inline-flex;
height: 24px;
user-select: none;
border-radius: 4px;
margin: 0 -4px;
padding: 0 4px;
&:hover {
background: ${(props) =>
props.$sortable ? props.theme.secondaryBackground : "none"};
}
`;
const Cell = styled.td`
padding: 6px;
padding: 8px 6px;
border-bottom: 1px solid ${(props) => props.theme.divider};
font-size: 14px;