EditDialog: Improve tabs (#912)

zbycz · Jan 29, 2025 · dde3e5d · dde3e5d
1 parent 3c799b5
commit dde3e5d
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 47 deletions.
diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx
@@ -3,35 +3,70 @@ import {
   Stack,
   Tab,
   Tabs,
+  Typography,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
 import { EditDialogActions } from './EditDialogActions';
 import { CommentField } from './CommentField';
 import { OsmUserLogged } from './OsmUserLogged';
 import { ContributionInfoBox } from './ContributionInfoBox';
 import { OsmUserLoggedOut } from './OsmUserLoggedOut';
 import { FeatureEditSection } from './FeatureEditSection/FeatureEditSection';
-import { useEditDialogFeature } from '../utils';
 import { useEditContext } from '../EditContext';
-import { getShortId } from '../../../../services/helpers';
-import { fetchSchemaTranslations } from '../../../../services/tagging/translations';
 import { TestApiWarning } from '../../helpers/TestApiWarning';
 import { getOsmTypeFromShortId, NwrIcon } from '../../NwrIcon';
+import { useFeatureContext } from '../../../utils/FeatureContext';
+import { useMatchTags, useOptions } from './FeatureEditSection/PresetSelect';
 
 export const EditContent = () => {
-  const { items, addFeature, current, setCurrent } = useEditContext();
+  const { items, current, setCurrent } = useEditContext();
   const theme = useTheme();
+  const options = useOptions();
+
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const RenderTabLabel = ({ item: { shortId, tags } }) => {
+    const [preset, setPreset] = useState('');
+    const { feature } = useFeatureContext();
+
+    useMatchTags(feature, tags, setPreset);
+    const presetName = options.find((o) => o.presetKey === preset)?.name;
+
+    return (
+      <Stack direction="column" alignItems="flex-start">
+        <Stack
+          direction="row"
+          gap={1}
+          alignItems="center"
+          justifyContent="space-between"
+          width="100%"
+        >
+          <Typography variant="button" whiteSpace="nowrap">
+            {tags.name ?? shortId}
+          </Typography>
+          <NwrIcon osmType={getOsmTypeFromShortId(shortId)} />
+        </Stack>
+        <Typography
+          variant="caption"
+          textTransform="lowercase"
+          whiteSpace="nowrap"
+        >
+          {presetName}
+        </Typography>
+      </Stack>
+    );
+  };
 
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
   return (
     <>
       <Stack
         direction={isSmallScreen ? 'column' : 'row'}
-        gap={2}
+        gap={1}
         overflow="hidden"
         flex={1}
+        sx={{ borderTop: `solid 1px ${theme.palette.divider}` }}
       >
         {items.length > 1 && (
           <Tabs
@@ -49,29 +84,31 @@ export const EditContent = () => {
                 alignItems: isSmallScreen ? undefined : 'baseline',
                 textAlign: isSmallScreen ? undefined : 'left',
               },
+              ...(isSmallScreen
+                ? {}
+                : {
+                    resize: 'horizontal',
+                    minWidth: 120,
+                    maxWidth: '50%',
+                  }),
             }}
           >
-            {items.map(({ shortId, tags }, idx) => (
+            {items.map((item, idx) => (
               <Tab
                 key={idx}
-                label={
-                  <Stack
-                    direction="row"
-                    gap={1}
-                    alignItems="center"
-                    justifyContent="space-between"
-                    width="100%"
-                  >
-                    {tags.name ?? shortId}{' '}
-                    <NwrIcon osmType={getOsmTypeFromShortId(shortId)} />
-                  </Stack>
-                }
-                value={shortId}
+                label={<RenderTabLabel item={item} />}
+                value={item.shortId}
+                sx={{
+                  maxWidth: '100%',
+                  ...(isSmallScreen
+                    ? {}
+                    : { borderBottom: `solid 1px ${theme.palette.divider}` }),
+                }}
               />
             ))}
           </Tabs>
         )}
-        <DialogContent dividers>
+        <DialogContent dividers sx={{ flex: 1, borderTop: 0 }}>
           <form
             autoComplete="off"
             onSubmit={(e) => e.preventDefault()}

diff --git a/.../FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx b/.../FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx
@@ -20,6 +20,7 @@ const Container = styled.div`
   width: 100%;
   height: 500px;
   position: relative;
+  overflow: hidden;
 `;
 
 const LoadingContainer = styled.div`

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSearchBox.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSearchBox.tsx
@@ -40,9 +40,9 @@ const StyledListSubheader = styled(ListSubheader)`
 const emptyOptions =
   PROJECT_ID === 'openclimbing'
     ? [
-        'climbing/route_bottom',
-        'climbing/route',
         'climbing/crag',
+        'climbing/route_bottom',
+        // 'climbing/route',
         // 'climbing/area',
       ]
     : [

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSelect.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/PresetSelect.tsx
@@ -60,7 +60,7 @@ const LabelWrapper = styled.div`
   margin-right: 1em;
 `;
 
-const useMatchTags = (
+export const useMatchTags = (
   feature: Feature,
   tags: FeatureTags,
   setPreset: Setter<string>,
@@ -81,7 +81,7 @@ const useMatchTags = (
   }, [tags, feature, setPreset]);
 };
 
-const useOptions = () => {
+export const useOptions = () => {
   const [options, setOptions] = useState<PresetsCache>([]);
   useEffect(() => {
     getTranslatedPresets().then((presets) => setOptions(presets));

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx
@@ -8,8 +8,11 @@ import {
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import React from 'react';
 import { getOsmTypeFromShortId, NwrIcon } from '../../NwrIcon';
+import { useEditContext } from '../EditContext';
 
 export const FeatureRow = ({ label, shortId, onClick }) => {
+  const { items } = useEditContext();
+  const isAlreadyOpen = items.find((item) => item.shortId === shortId);
   return (
     <>
       <ListItem onClick={onClick}>
@@ -21,7 +24,9 @@ export const FeatureRow = ({ label, shortId, onClick }) => {
         >
           <ListItemText>
             <Stack direction="row" gap={2} alignItems="center">
-              <Typography>{label ?? shortId}</Typography>
+              <Typography color={isAlreadyOpen ? 'secondary' : undefined}>
+                {label ?? shortId}
+              </Typography>
               <NwrIcon osmType={getOsmTypeFromShortId(shortId)} />
             </Stack>
           </ListItemText>

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx
@@ -20,8 +20,8 @@ export const MembersEditor = () => {
   const { members, tags, nodeLonLat } = useFeatureEditData();
   const theme = useTheme();
   const isClimbingCrag = tags.climbing === 'crag';
-  const handleClick = useGetHandleClick();
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const handleClick = useGetHandleClick({ setIsExpanded });
 
   const getSectionName = () => {
     const isClimbingArea = tags.climbing === 'area';
@@ -84,7 +84,6 @@ export const MembersEditor = () => {
             shortId={member.shortId}
             label={member.label}
             onClick={(e) => {
-              setIsExpanded(false);
               handleClick(e, member.shortId);
             }}
           />

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/ParentsEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/ParentsEditor.tsx
@@ -28,8 +28,8 @@ export const ParentsEditor = () => {
   const { tags } = useFeatureEditData();
   const [parents, setParents] = useState([]);
   const theme = useTheme();
-  const handleClick = useGetHandleClick();
   const [isExpanded, setIsExpanded] = React.useState(false);
+  const handleClick = useGetHandleClick({ setIsExpanded });
 
   const getSectionName = () => {
     const isClimbingCrag = tags.climbing === 'crag';

diff --git a/src/components/FeaturePanel/EditDialog/EditContent/helpers.tsx b/src/components/FeaturePanel/EditDialog/EditContent/helpers.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Box, Stack } from '@mui/material';
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 import { EditDataItem } from '../useEditItems';
 import { useEditContext } from '../EditContext';
 import { getApiId, getShortId } from '../../../../services/helpers';
@@ -58,12 +58,21 @@ export const getInputTypeForKey = (key: string) => {
 const isInItems = (items: Array<EditDataItem>, shortId: string) =>
   items.find((item) => item.shortId === shortId);
 
-export const useGetHandleClick = () => {
+export const useGetHandleClick = ({
+  setIsExpanded,
+}: {
+  setIsExpanded?: Dispatch<SetStateAction<boolean>>;
+}) => {
   const { addFeature, items, setCurrent } = useEditContext();
 
   return async (e, shortId: string) => {
     const isCmdClicked = e.ctrlKey || e.metaKey;
     const apiId = getApiId(shortId);
+
+    if (!isCmdClicked) {
+      setIsExpanded?.(false);
+    }
+
     if (apiId.id < 0) {
       if (!isCmdClicked) setCurrent(shortId);
       return;

diff --git a/src/components/FeaturePanel/EditDialog/EditDialog.tsx b/src/components/FeaturePanel/EditDialog/EditDialog.tsx
@@ -12,7 +12,7 @@ import { getReactKey } from '../../../services/helpers';
 
 const useIsFullScreen = () => {
   const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down('sm'));
+  return useMediaQuery(theme.breakpoints.down('md'));
 };
 
 const StyledDialog = styled(Dialog)`
@@ -42,7 +42,7 @@ const EditDialogInner = () => {
       aria-labelledby="edit-dialog-title"
       sx={{ height: '100%' }}
     >
-      <EditDialogTitle />
+      <EditDialogTitle onClose={onClose} />
       {successInfo ? <SuccessContent /> : <EditContent />}
     </StyledDialog>
   );

diff --git a/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx b/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx
@@ -1,4 +1,4 @@
-import { DialogTitle, Stack } from '@mui/material';
+import { DialogTitle, IconButton, Stack } from '@mui/material';
 import React from 'react';
 import { useEditDialogFeature } from './utils';
 import { useOsmAuthContext } from '../../utils/OsmAuthContext';
@@ -7,6 +7,7 @@ import { getLabel } from '../../../helpers/featureLabel';
 import CommentIcon from '@mui/icons-material/Comment';
 import EditIcon from '@mui/icons-material/Edit';
 import { useEditContext } from './EditContext';
+import CloseIcon from '@mui/icons-material/Close';
 
 const useGetDialogTitle = (isAddPlace, isUndelete, feature) => {
   const { loggedIn } = useOsmAuthContext();
@@ -24,17 +25,28 @@ const useGetDialogTitle = (isAddPlace, isUndelete, feature) => {
   return `${t('editdialog.edit_heading')} ${getLabel(feature)}`;
 };
 
-export const EditDialogTitle = () => {
+export const EditDialogTitle = ({ onClose }) => {
   const { loggedIn } = useOsmAuthContext();
   const { feature, isAddPlace, isUndelete } = useEditDialogFeature();
 
   const dialogTitle = useGetDialogTitle(isAddPlace, isUndelete, feature);
 
   return (
     <DialogTitle id="edit-dialog-title">
-      <Stack direction="row" gap={1} alignItems="center">
-        {loggedIn ? <EditIcon /> : <CommentIcon />}
-        {dialogTitle}
+      <Stack
+        direction="row"
+        gap={1}
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Stack direction="row" gap={2} alignItems="center">
+          {loggedIn ? <EditIcon /> : <CommentIcon />}
+          {dialogTitle}
+        </Stack>
+
+        <IconButton color="secondary" edge="end" onClick={onClose}>
+          <CloseIcon fontSize="small" />
+        </IconButton>
       </Stack>
     </DialogTitle>
   );

diff --git a/src/components/HomepagePanel/HomepageOpenClimbing.tsx b/src/components/HomepagePanel/HomepageOpenClimbing.tsx
@@ -29,6 +29,14 @@ const AccordionStyle = {
   },
 };
 
+export const From = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-top: 2em;
+  padding-bottom: 10px;
+`;
+
 export const Divider = styled.div`
   align-items: center;
   display: flex;
@@ -148,7 +156,7 @@ const Banners = () => (
     spacing={1}
     direction={'row'}
     mt={6}
-    mb={2}
+    sx={{ paddingBottom: 3 }}
     justifyContent="space-between"
   >
     <a href="https://www.maptiler.com" target="_blank">
@@ -235,6 +243,11 @@ export function HomepageOpenClimbing({ onClose }: { onClose: () => void }) {
             <ImportantLinks />
             <SupportUs />
             <Banners />
+            <From>
+              <Typography variant="caption" color="secondary" letterSpacing={1}>
+                Made in Prague with ♥
+              </Typography>
+            </From>
           </Stack>
         </Content>
       </PanelScrollbars>