FeaturePanel: move NwrIcon to footer + polish (#917)

zbycz · Feb 1, 2025 · b0a4958 · b0a4958
1 parent e513a43
commit b0a4958
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/src/components/FeaturePanel/FeatureDescription.tsx b/src/components/FeaturePanel/FeatureDescription.tsx
@@ -7,6 +7,7 @@ import { useFeatureContext } from '../utils/FeatureContext';
 import { TooltipButton } from '../utils/TooltipButton';
 import { Feature } from '../../services/types';
 import { OSM_WEBSITE } from '../../services/osm/consts';
+import { NwrIcon } from './NwrIcon';
 
 const A = ({ href, children }) =>
   href ? (
@@ -42,7 +43,7 @@ const Urls = () => {
   );
 };
 
-const FromOsm = () => (
+export const FromOsm = () => (
   <>
     <Stack direction="row" alignItems="flex-start" gap={2}>
       <Typography variant="body2">
@@ -66,11 +67,22 @@ export const FeatureDescription = () => {
   const { type } = osmMeta;
 
   if (point) {
-    return <div>{t('featurepanel.feature_description_point')}</div>;
+    return <>{t('featurepanel.feature_description_point')}</>;
   }
   if (nonOsmObject) {
-    return <div>{t('featurepanel.feature_description_nonosm', { type })}</div>;
+    return <>{t('featurepanel.feature_description_nonosm', { type })}</>;
   }
 
-  return <FromOsm />;
+  return (
+    <>
+      <span
+        style={{ paddingRight: 5, verticalAlign: 'middle', lineHeight: '14px' }}
+      >
+        <NwrIcon osmType={osmMeta.type} />
+      </span>
+      {t('featurepanel.feature_description_osm', {
+        type: capitalize(type),
+      })}
+    </>
+  );
 };
diff --git a/src/components/FeaturePanel/FeatureHeading.tsx b/src/components/FeaturePanel/FeatureHeading.tsx
@@ -52,22 +52,24 @@ const Container = styled.div<{ isStandalone: boolean }>`
   ${({ isStandalone }) => isStandalone && 'padding-bottom: 8px;'}
 `;
 
-const HeadingContainer = styled.div`
+const HeadingsWrapper = styled.div`
   margin: 0 0 12px 0;
-
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
   position: relative;
-`;
-
-const HeadingsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   flex: 1;
 `;
 
-const Headings = ({ onMouseEnter, onMouseLeave, isHovered }) => {
+const Headings = () => {
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const onMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovered(false);
+  };
+
   const { feature } = useFeatureContext();
   const label = getLabel(feature);
   const secondaryLabel = getSecondaryLabel(feature);
@@ -85,7 +87,7 @@ const Headings = ({ onMouseEnter, onMouseLeave, isHovered }) => {
 };
 
 const Heading = styled.h1<{ $deleted: boolean }>`
-  font-size: 46px;
+  font-size: 36px;
   line-height: 1.2;
   ${isOpenClimbing &&
   `
@@ -112,29 +114,10 @@ export const FeatureHeading = React.forwardRef<HTMLDivElement>((_, ref) => {
   const isStandalone = useMediaQuery('(display-mode: standalone)');
   const { feature } = useFeatureContext();
 
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  const onMouseEnter = () => {
-    setIsHovered(true);
-  };
-  const onMouseLeave = () => {
-    setIsHovered(false);
-  };
-
   return (
     <Container ref={ref} isStandalone={isStandalone}>
       <PoiDescription />
-      <HeadingContainer>
-        <Headings
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          isHovered={isHovered}
-        />
-
-        <Box mt={1.1}>
-          <NwrIcon osmType={feature.osmMeta.type} />
-        </Box>
-      </HeadingContainer>
+      <Headings />
 
       <QuickActions />
     </Container>

diff --git a/src/components/FeaturePanel/FeaturePanel.tsx b/src/components/FeaturePanel/FeaturePanel.tsx
@@ -33,6 +33,7 @@ import { climbingTagValues } from './Climbing/utils/climbingTagValues';
 
 const Flex = styled.div`
   flex: 1;
+  margin-bottom: 40px;
 `;
 
 type FeaturePanelProps = {

diff --git a/src/components/FeaturePanel/FeaturePanelFooter.tsx b/src/components/FeaturePanel/FeaturePanelFooter.tsx
@@ -1,8 +1,7 @@
 import { useToggleState } from '../helpers';
 import { useFeatureContext } from '../utils/FeatureContext';
-import { getFullOsmappLink } from '../../services/helpers';
 import { PanelFooterWrapper, PanelSidePadding } from '../utils/PanelHelpers';
-import { FeatureDescription } from './FeatureDescription';
+import { FeatureDescription, FromOsm } from './FeatureDescription';
 import Coordinates from './Coordinates';
 import { t } from '../../services/intl';
 import { ObjectsAround } from './ObjectsAround';
@@ -14,7 +13,8 @@ import {
   Box,
   Typography,
 } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { NwrIcon } from './NwrIcon';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 
 type Props = {
   advanced: boolean;
@@ -41,15 +41,15 @@ export const FeaturePanelFooter = ({
 
   return (
     <Accordion disableGutters elevation={0} square onClick={onClick}>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+      <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
         <Typography variant="caption">
-          {t('featurepanel.footer_title')}
+          <FeatureDescription />
         </Typography>
       </AccordionSummary>
       <AccordionDetails>
         <PanelFooterWrapper>
           <PanelSidePadding>
-            <FeatureDescription />
+            {feature.point ? null : <FromOsm />}
             <Box mt={3} mb={1}>
               <Typography color="secondary">
                 <label>

diff --git a/src/components/FeaturePanel/OsmError.tsx b/src/components/FeaturePanel/OsmError.tsx
@@ -47,7 +47,11 @@ export const OsmError = () => {
     );
   }
 
-  if (Object.keys(feature.tags).length === 0 && !feature.point) {
+  if (
+    Object.keys(feature.tags).length === 0 &&
+    !feature.point &&
+    !feature.skeleton
+  ) {
     return (
       <Alert variant="outlined" severity="info" sx={{ mb: 2 }}>
         {t('featurepanel.info_no_tags')}