Mirrors/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2026-03-10 06:23:11 +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>
);
};

22
client/src/components/Settings/Themer/ThemeBuilder/ThemeCreator.tsx
View File

@@ -1,17 +1,27 @@
import { ChangeEvent, FormEvent, useState } from 'react';
import { useDispatch } from 'react-redux';
import { ChangeEvent, FormEvent, useState, useEffect } from 'react';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { bindActionCreators } from 'redux';
import { actionCreators } from '../../../../store';
import { Theme } from '../../../../interfaces';
import { Button, InputGroup, ModalForm } from '../../../UI';
import { State } from '../../../../store/reducers';
// UI
import { Button, InputGroup, ModalForm } from '../../../UI';
import classes from './ThemeCreator.module.css';
// Other
import { Theme } from '../../../../interfaces';
interface Props {
modalHandler: () => void;
}
export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
const {
theme: { activeTheme },
} = useSelector((state: State) => state);
const { addTheme } = bindActionCreators(actionCreators, useDispatch());
const [formData, setFormData] = useState<Theme>({
@@ -24,6 +34,10 @@ export const ThemeCreator = ({ modalHandler }: Props): JSX.Element => {
},
});
useEffect(() => {
setFormData({ ...formData, colors: activeTheme.colors });
}, [activeTheme]);
const inputChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;