FeaturePanel: polish FeaturePanelFooter (#899)

zbycz · Jan 26, 2025 · 0cff23a · 0cff23a
1 parent 484887f
commit 0cff23a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 96 deletions.
diff --git a/src/components/FeaturePanel/Coordinates.tsx b/src/components/FeaturePanel/Coordinates.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useFeatureContext } from '../utils/FeatureContext';
 import { positionToDeg } from '../../utils';
 import { PositionBoth } from '../../services/types';
+import { Typography } from '@mui/material';
 
 type Props = { coords: PositionBoth };
 
@@ -21,7 +22,11 @@ const Coordinates = () => {
   const { feature } = useFeatureContext();
   const { center, roundedCenter = undefined } = feature;
   const coords = roundedCenter ?? center;
-  return coords ? <Coords coords={coords} /> : null;
+  return coords ? (
+    <Typography variant="caption" color="secondary">
+      <Coords coords={coords} />
+    </Typography>
+  ) : null;
 };
 
 export default Coordinates;
diff --git a/src/components/FeaturePanel/FeatureDescription.tsx b/src/components/FeaturePanel/FeatureDescription.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Grid, Typography } from '@mui/material';
+import { Box, Grid, Stack, Typography } from '@mui/material';
 import styled from '@emotion/styled';
 import { capitalize } from '../helpers';
 import { t, Translation } from '../../services/intl';
@@ -8,19 +8,9 @@ import { TooltipButton } from '../utils/TooltipButton';
 import { Feature } from '../../services/types';
 import { OSM_WEBSITE } from '../../services/osm/consts';
 
-const InfoTooltipWrapper = styled.span`
-  position: relative;
-  top: -3px;
-  left: -3px;
-
-  svg {
-    font-size: 17px;
-  }
-`;
-
 const A = ({ href, children }) =>
   href ? (
-    <a href={href} target="_blank" className="colorInherit">
+    <a href={href} target="_blank">
       {children}
     </a>
   ) : (
@@ -44,81 +34,43 @@ const Urls = () => {
   const date = timestamp?.split('T')[0];
 
   return (
-    <>
+    <Typography variant="caption">
       <A href={itemUrl}>{capitalize(type)}</A> •{' '}
       <A href={historyUrl}>version {version}</A> •{' '}
       <A href={changesetUrl}>{date}</A> • <A href={userUrl}>{user || 'n/a'}</A>
-    </>
+    </Typography>
   );
 };
 
 const FromOsm = () => (
-  <Box m={1}>
-    <Grid
-      component="div"
-      container
-      direction="row"
-      alignItems="flex-start"
-      justifyContent="flex-start"
-    >
-      <Grid item xs={3}>
-        <Box mt={2}>
-          <img
-            src="/logo-osm.svg"
-            alt="OpenStreetMap logo"
-            width={50}
-            height={50}
-          />
-        </Box>
-      </Grid>
-      <Grid item xs={9} md={7}>
-        <Box my={1}>
-          <Typography variant="body2">
-            <Translation id="homepage.about_osm" />
-          </Typography>
-        </Box>
-      </Grid>
-    </Grid>
+  <>
+    <Stack direction="row" alignItems="flex-start" gap={2}>
+      <Typography variant="body2">
+        <Translation id="homepage.about_osm" />
+      </Typography>
+      <img
+        src="/logo-osm.svg"
+        alt="OpenStreetMap logo"
+        width={50}
+        height={50}
+      />
+    </Stack>
     <Urls />
-  </Box>
+  </>
 );
 
-export const FeatureDescription = ({ advanced, setAdvanced }) => {
+export const FeatureDescription = () => {
   const {
     feature: { osmMeta, nonOsmObject, point },
   } = useFeatureContext();
   const { type } = osmMeta;
 
-  const onClick = (e: React.MouseEvent) => {
-    // Alt+Shift+click to enable FeaturePanel advanced mode
-    if (e.shiftKey && e.altKey) {
-      setAdvanced((v) => !v);
-    }
-  };
-
   if (point) {
     return <div>{t('featurepanel.feature_description_point')}</div>;
   }
   if (nonOsmObject) {
     return <div>{t('featurepanel.feature_description_nonosm', { type })}</div>;
   }
 
-  return (
-    <div>
-      {advanced ? (
-        <Urls />
-      ) : (
-        t('featurepanel.feature_description_osm', {
-          type: capitalize(type),
-        })
-      )}
-      <InfoTooltipWrapper>
-        <TooltipButton
-          tooltip={<FromOsm />}
-          onClick={onClick}
-          color="secondary"
-        />
-      </InfoTooltipWrapper>
-    </div>
-  );
+  return <FromOsm />;
 };
diff --git a/src/components/FeaturePanel/FeaturePanelFooter.tsx b/src/components/FeaturePanel/FeaturePanelFooter.tsx
@@ -7,6 +7,14 @@ import Coordinates from './Coordinates';
 import { t } from '../../services/intl';
 import { ObjectsAround } from './ObjectsAround';
 import React from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Typography,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 type Props = {
   advanced: boolean;
@@ -24,35 +32,53 @@ export const FeaturePanelFooter = ({
   const { feature } = useFeatureContext();
   const { point, skeleton, deleted } = feature;
 
-  const osmappLink = getFullOsmappLink(feature);
+  const onClick = (e: React.MouseEvent) => {
+    // Alt+Shift+click to enable FeaturePanel advanced mode
+    if (e.shiftKey && e.altKey) {
+      setAdvanced((v) => !v);
+    }
+  };
 
   return (
-    <PanelFooterWrapper>
-      <PanelSidePadding>
-        <FeatureDescription advanced={advanced} setAdvanced={setAdvanced} />
-        <Coordinates />
-        <br />
-        <a href={osmappLink}>{osmappLink}</a>
-        <br />
-        <label>
-          <input
-            type="checkbox"
-            onChange={toggleShowTags}
-            checked={showTagsTable}
-            disabled={point || deleted || (!skeleton && !feature.schema)}
-          />{' '}
-          {t('featurepanel.show_tags')}
-        </label>{' '}
-        <label>
-          <input
-            type="checkbox"
-            onChange={toggleShowAround}
-            checked={showAround}
-          />{' '}
-          {t('featurepanel.show_objects_around')}
-        </label>
-        {showAround && <ObjectsAround advanced={advanced} />}
-      </PanelSidePadding>
-    </PanelFooterWrapper>
+    <Accordion disableGutters elevation={0} square onClick={onClick}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <Typography variant="caption">
+          {t('featurepanel.footer_title')}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <PanelFooterWrapper>
+          <PanelSidePadding>
+            <FeatureDescription />
+            <Box mt={3} mb={1}>
+              <Typography color="secondary">
+                <label>
+                  <input
+                    type="checkbox"
+                    onChange={toggleShowTags}
+                    checked={showTagsTable}
+                    disabled={
+                      point || deleted || (!skeleton && !feature.schema)
+                    }
+                  />{' '}
+                  {t('featurepanel.show_tags')}
+                </label>
+                <br />
+                <label>
+                  <input
+                    type="checkbox"
+                    onChange={toggleShowAround}
+                    checked={showAround}
+                  />{' '}
+                  {t('featurepanel.show_objects_around')}
+                </label>
+                {showAround && <ObjectsAround advanced={advanced} />}
+              </Typography>
+            </Box>
+            <Coordinates />
+          </PanelSidePadding>
+        </PanelFooterWrapper>
+      </AccordionDetails>
+    </Accordion>
   );
 };
diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -138,6 +138,7 @@ export default {
   'featurepanel.inline_edit_title': 'Upravit',
   'featurepanel.objects_around': 'Objekty v okolí',
   'featurepanel.climbing_restriction': 'Lezecké omezení',
+  'featurepanel.footer_title': 'Ostatní informace',
   'featurepanel.climbing_sectors': 'Lezecké sektory',
   'featurepanel.climbing_sectors_in': 'v oblasti',
 

diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -176,6 +176,7 @@ export default {
   'featurepanel.more_in_openplaceguide': 'More information on __instanceName__',
   'featurepanel.climbing_restriction': 'Climbing restriction',
   'featurepanel.login': 'Login',
+  'featurepanel.footer_title': 'Other info',
   'featurepanel.climbing_sectors': 'Climbing sectors',
   'featurepanel.climbing_sectors_in': 'in',