More dialog, I can't stand suid/mui :( !

This commit is contained in:
Eric van der Vlist 2022-11-30 18:08:45 +01:00
parent b5cd2cd58b
commit 1e65ca2f72
4 changed files with 58 additions and 20 deletions

View File

@ -6,18 +6,20 @@
z-index: 1; z-index: 1;
} }
.dialog {
min-width: 500px;
}
.title { .title {
background-color: rgba(14, 116, 144, 0.7); background-color: rgba(14, 116, 144, 0.7);
color: white; color: white;
clear: both; clear: both;
} }
.title-text {
float: left;
}
.close { .close {
float: right; align-self: right;
margin-right: 2px;
padding-top: 16px;
} }
.body { .body {

View File

@ -1,4 +1,12 @@
import { Dialog, DialogTitle, IconButton } from '@suid/material'; import {
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';
@ -63,18 +71,46 @@ const Infos: Component<{}> = (props) => {
}; };
return ( return (
<Dialog onClose={handleClose} open={open()} class={style.dialog}> <Dialog
onClose={handleClose}
open={open()}
class={style.dialog}
PaperProps={{ sx: { minWidth: '300px' } }}
>
<DialogTitle class={style.title}> <DialogTitle class={style.title}>
<div class={style['title-text']}>{t('nearby')}</div> <Grid container spacing={2} alignItems='center'>
<IconButton onClick={handleClose} class={style.close}> <Grid item xs={11}>
<div>{t('nearby')}</div>
</Grid>
<Grid item xs={1} class={style.close}>
<IconButton onClick={handleClose}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>
</Grid>
</Grid>
</DialogTitle> </DialogTitle>
<Stack spacing={1}> <DialogContent>
<Stack spacing={1} direction='column' alignItems='left'>
<For each={selectedFeatures}> <For each={selectedFeatures}>
{(feature) => <Item>{t(feature.get('type'))}</Item>} {(feature) => (
<Item sx={{ width: '95%' }}>
<Grid container spacing={2} alignItems='left'>
<Grid item xs={11}>
{feature.get('name')
? `${feature.get('name')} (${t(feature.get('type'))})`
: t(feature.get('type'))}
</Grid>
<Grid item xs={1}>
<IconButton onClick={handleClose}>
<CloseIcon />
</IconButton>
</Grid>
</Grid>
</Item>
)}
</For> </For>
</Stack> </Stack>
</DialogContent>
</Dialog> </Dialog>
); );
}; };

View File

@ -8,8 +8,8 @@ const dict = {
wpt: 'place', wpt: 'place',
trk: 'track', trk: 'track',
trkseg: 'track segment', trkseg: 'track segment',
'trkseg-start': 'start', 'trkseg-start': 'start of track segment',
'trkseg-finish': 'end', 'trkseg-finish': 'end of track segment',
}; };
export default dict; export default dict;

View File

@ -11,8 +11,8 @@ const dict = {
wpt: 'lieu', wpt: 'lieu',
trk: 'trace', trk: 'trace',
trkseg: 'segment de trace', trkseg: 'segment de trace',
'trkseg-start': 'début', 'trkseg-start': 'début de segment de trace',
'trkseg-finish': 'fin', 'trkseg-finish': 'fin de segment de trace',
}; };
export default dict; export default dict;