From 1e65ca2f72cf40c0d5b03d78241bd0cf3db1f6c3 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Wed, 30 Nov 2022 18:08:45 +0100
Subject: [PATCH] More dialog, I can't stand suid/mui :( !

---
 src/components/infos/Infos.module.css | 12 +++---
 src/components/infos/Infos.tsx        | 58 ++++++++++++++++++++++-----
 src/i18n/en.ts                        |  4 +-
 src/i18n/fr.ts                        |  4 +-
 4 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/components/infos/Infos.module.css b/src/components/infos/Infos.module.css
index 41b200c..d4c6c07 100644
--- a/src/components/infos/Infos.module.css
+++ b/src/components/infos/Infos.module.css
@@ -6,18 +6,20 @@
   z-index: 1;
 }
 
+.dialog {
+  min-width: 500px;
+}
+
 .title {
   background-color: rgba(14, 116, 144, 0.7);
   color: white;
   clear: both;
 }
 
-.title-text {
-  float: left;
-}
-
 .close {
-  float: right;
+  align-self: right;
+  margin-right: 2px;
+  padding-top: 16px;
 }
 
 .body {
diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx
index b0424ca..2b3b3b7 100644
--- a/src/components/infos/Infos.tsx
+++ b/src/components/infos/Infos.tsx
@@ -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 { Geometry } from 'ol/geom';
 import { Component, createSignal, For } from 'solid-js';
@@ -63,18 +71,46 @@ const Infos: Component<{}> = (props) => {
   };
 
   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}>
-        <div class={style['title-text']}>{t('nearby')}</div>
-        <IconButton onClick={handleClose} class={style.close}>
-          <CloseIcon />
-        </IconButton>
+        <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>
-      <Stack spacing={1}>
-        <For each={selectedFeatures}>
-          {(feature) => <Item>{t(feature.get('type'))}</Item>}
-        </For>
-      </Stack>
+      <DialogContent>
+        <Stack spacing={1} direction='column' alignItems='left'>
+          <For each={selectedFeatures}>
+            {(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>
+        </Stack>
+      </DialogContent>
     </Dialog>
   );
 };
diff --git a/src/i18n/en.ts b/src/i18n/en.ts
index a933aa3..ba3b6b1 100644
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -8,8 +8,8 @@ const dict = {
   wpt: 'place',
   trk: 'track',
   trkseg: 'track segment',
-  'trkseg-start': 'start',
-  'trkseg-finish': 'end',
+  'trkseg-start': 'start of track segment',
+  'trkseg-finish': 'end of track segment',
 };
 
 export default dict;
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index c3ebd13..7126341 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -11,8 +11,8 @@ const dict = {
   wpt: 'lieu',
   trk: 'trace',
   trkseg: 'segment de trace',
-  'trkseg-start': 'début',
-  'trkseg-finish': 'fin',
+  'trkseg-start': 'début de segment de trace',
+  'trkseg-finish': 'fin de segment de trace',
 };
 
 export default dict;