Dialog component

This commit is contained in:
Eric van der Vlist 2022-11-30 22:44:02 +01:00
parent 1e65ca2f72
commit 8bd0c74727
3 changed files with 761 additions and 405 deletions

1051
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,28 +0,0 @@
.control {
opacity: 1;
position: fixed !important;
top: 0px;
margin-left: calc(100% - 70px) !important;
z-index: 1;
}
.dialog {
min-width: 500px;
}
.title {
background-color: rgba(14, 116, 144, 0.7);
color: white;
clear: both;
}
.close {
align-self: right;
margin-right: 2px;
padding-top: 16px;
}
.body {
padding: 20px;
background-color: rgba(255, 255, 255, 0.7);
}

View File

@ -1,26 +1,14 @@
import { import { Grid, IconButton } from '@suid/material';
Box,
Dialog,
DialogContent,
DialogTitle,
Grid,
IconButton,
Typography,
} from '@suid/material';
import { Feature } from 'ol'; import { Feature } from 'ol';
import { Geometry } from 'ol/geom'; import { Geometry } from 'ol/geom';
import { Component, createSignal, For } from 'solid-js'; import { Component, createSignal, For } from 'solid-js';
import { unwrap } from 'solid-js/store'; import { unwrap } from 'solid-js/store';
import { import { useI18n } from '@solid-primitives/i18n';
I18nContext,
createI18nContext,
useI18n,
} from '@solid-primitives/i18n';
import CloseIcon from '@suid/icons-material/Close'; import CloseIcon from '@suid/icons-material/Close';
import { tree } from '../map'; import { tree } from '../map';
import style from './Infos.module.css';
import { Paper, Stack } from '@suid/material'; import { Paper, Stack } from '@suid/material';
import styled from '@suid/material/styles/styled'; import styled from '@suid/material/styles/styled';
import Dialog from '../dialog';
const Item = styled(Paper)(({ theme }) => ({ const Item = styled(Paper)(({ theme }) => ({
...theme.typography.body2, ...theme.typography.body2,
@ -63,45 +51,29 @@ export const clickHandler = (event: any) => {
const Infos: Component<{}> = (props) => { const Infos: Component<{}> = (props) => {
const [t, { add, locale, dict }] = useI18n(); const [t, { add, locale, dict }] = useI18n();
const handleClickOpen = () => { const handleClick = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false); setOpen(false);
}; };
return ( return (
<Dialog <Dialog closeHandler={handleClick} open={open()} title={t('nearby')}>
onClose={handleClose} <Stack
open={open()} spacing={1}
class={style.dialog} direction='column'
PaperProps={{ sx: { minWidth: '300px' } }} alignItems='center'
sx={{ width: 'calc(100% - 5px)' }}
> >
<DialogTitle class={style.title}>
<Grid container spacing={2} alignItems='center'>
<Grid item xs={11}>
<div>{t('nearby')}</div>
</Grid>
<Grid item xs={1} class={style.close}>
<IconButton onClick={handleClose}>
<CloseIcon />
</IconButton>
</Grid>
</Grid>
</DialogTitle>
<DialogContent>
<Stack spacing={1} direction='column' alignItems='left'>
<For each={selectedFeatures}> <For each={selectedFeatures}>
{(feature) => ( {(feature) => (
<Item sx={{ width: '95%' }}> <Item sx={{ width: 'calc(100% - 1px)' }}>
<Grid container spacing={2} alignItems='left'> <Grid container spacing={2} alignItems='center'>
<Grid item xs={11}> <Grid item xs={11}>
{feature.get('name') {feature.get('name')
? `${feature.get('name')} (${t(feature.get('type'))})` ? `${feature.get('name')} (${t(feature.get('type'))})`
: t(feature.get('type'))} : t(feature.get('type'))}
</Grid> </Grid>
<Grid item xs={1}> <Grid item xs={1} sx={{ paddingLeft: '0px' }}>
<IconButton onClick={handleClose}> <IconButton onClick={handleClick}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</Grid> </Grid>
@ -110,7 +82,6 @@ const Infos: Component<{}> = (props) => {
)} )}
</For> </For>
</Stack> </Stack>
</DialogContent>
</Dialog> </Dialog>
); );
}; };