Mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2026-03-11 14:53:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added CompactTable and ActionIcons UI components

Browse Source
This commit is contained in:
Paweł Malak
2022-03-25 11:04:16 +01:00
parent 9ab6c65d85
commit bd96f6ca50
10 changed files with 106 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.module.css
View File

@@ -1,30 +0,0 @@
.QueriesGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.QueriesGrid span {
color: var(--color-primary);
}
.QueriesGrid span:last-child {
margin-bottom: 10px;
}
.ActionIcons {
display: flex;
}
.ActionIcons svg {
width: 20px;
}
.ActionIcons svg:hover {
cursor: pointer;
}
.Separator {
grid-column: 1 / 4;
border-bottom: 1px solid var(--color-primary);
margin: 10px 0;
}

53
client/src/components/Settings/GeneralSettings/CustomQueries/CustomQueries.tsx
View File

@@ -9,11 +9,8 @@ import { actionCreators } from '../../../../store';
// Typescript
import { Query } from '../../../../interfaces';
// CSS
import classes from './CustomQueries.module.css';
// UI
import { Modal, Icon, Button } from '../../../UI';
import { Modal, Icon, Button, CompactTable, ActionIcons } from '../../../UI';
// Components
import { QueriesForm } from './QueriesForm';
@@ -67,33 +64,25 @@ export const CustomQueries = (): JSX.Element => {
)}
</Modal>
<div>
<div className={classes.QueriesGrid}>
{customQueries.length > 0 && (
<Fragment>
<span>Name</span>
<span>Prefix</span>
<span>Actions</span>
<div className={classes.Separator}></div>
</Fragment>
)}
{customQueries.map((q: Query, idx) => (
<Fragment key={idx}>
<span>{q.name}</span>
<span>{q.prefix}</span>
<span className={classes.ActionIcons}>
<span onClick={() => updateHandler(q)}>
<Icon icon="mdiPencil" />
</span>
<span onClick={() => deleteHandler(q)}>
<Icon icon="mdiDelete" />
</span>
</span>
</Fragment>
))}
</div>
<section>
{customQueries.length && (
<CompactTable headers={['Name', 'Prefix', 'Actions']}>
{customQueries.map((q: Query, idx) => (
<Fragment key={idx}>
<span>{q.name}</span>
<span>{q.prefix}</span>
<ActionIcons>
<span onClick={() => updateHandler(q)}>
<Icon icon="mdiPencil" />
</span>
<span onClick={() => deleteHandler(q)}>
<Icon icon="mdiDelete" />
</span>
</ActionIcons>
</Fragment>
))}
</CompactTable>
)}
<Button
click={() => {
@@ -103,7 +92,7 @@ export const CustomQueries = (): JSX.Element => {
>
Add new search provider
</Button>
</div>
</section>
</Fragment>
);
};