Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-29 07:39:36 +02:00
Code Issues Releases Wiki Activity

Table component. Bookmarks edit view

Browse source
This commit is contained in:
unknown 2021-05-25 11:44:11 +02:00
parent 4eaf9659d1
commit bd5354a2e3
12 changed files with 281 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

50
client/src/components/Apps/AppTable/AppTable.module.css
View file

@ -1,58 +1,8 @@
.TableContainer {
width: 100%;
}
.Table {
border-collapse: collapse;
width: 100%;
text-align: left;
font-size: 16px;
color: var(--color-primary);
}
.Table th,
.Table td {
/* border: 1px solid orange; */
padding: 10px;
}
/* Head */
.Table th {
--header-radius: 4px;
background-color: var(--color-primary);
color: var(--color-background);
}
.Table th:first-child {
border-top-left-radius: var(--header-radius);
border-bottom-left-radius: var(--header-radius);
}
.Table th:last-child {
border-top-right-radius: var(--header-radius);
border-bottom-right-radius: var(--header-radius);
}
/* Body */
.Table td {
/* opacity: 0.5; */
transition: all 0.2s;
}
/* .Table td:hover {
opacity: 1;
} */
/* Actions */
.TableActions {
display: flex;
align-items: center;
}
.TableAction {
width: 22px;
}

90
client/src/components/Apps/AppTable/AppTable.tsx
View file

@ -5,6 +5,7 @@ import { pinApp, deleteApp } from '../../../store/actions';
import classes from './AppTable.module.css';
import Icon from '../../UI/Icons/Icon/Icon';
import Table from '../../UI/Table/Table';
interface ComponentProps {
apps: App[];
@ -29,55 +30,48 @@ const AppTable = (props: ComponentProps): JSX.Element => {
}
return (
<div className={classes.TableContainer}>
<table className={classes.Table}>
<thead className={classes.TableHead}>
<tr>
<th>Name</th>
<th>Url</th>
<th>Icon</th>
<th>Actions</th>
<Table headers={[
'Name',
'URL',
'Icon',
'Actions'
]}>
{props.apps.map((app: App): JSX.Element => {
return (
<tr key={app.id}>
<td>{app.name}</td>
<td>{app.url}</td>
<td>{app.icon}</td>
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
tabIndex={0}>
<Icon icon='mdiDelete' />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
tabIndex={0}>
<Icon icon='mdiPencil' />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
tabIndex={0}>
{app.isPinned
? <Icon icon='mdiPinOff' color='var(--color-accent)' />
: <Icon icon='mdiPin' />
}
</div>
</td>
</tr>
</thead>
<tbody className={classes.TableBody}>
{props.apps.map((app: App): JSX.Element => {
return (
<tr key={app.id}>
<td>{app.name}</td>
<td>{app.url}</td>
<td>{app.icon}</td>
<td className={classes.TableActions}>
<div
className={classes.TableAction}
onClick={() => deleteAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
tabIndex={0}>
<Icon icon='mdiDelete' />
</div>
<div
className={classes.TableAction}
onClick={() => props.updateAppHandler(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
tabIndex={0}>
<Icon icon='mdiPencil' />
</div>
<div
className={classes.TableAction}
onClick={() => props.pinApp(app)}
onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
tabIndex={0}>
{app.isPinned
? <Icon icon='mdiPinOff' color='var(--color-accent)' />
: <Icon icon='mdiPin' />
}
</div>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
)
})}
</Table>
)
}