From dde3e5da60ef24203d69026beedbb47302fe2cb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20V=C3=A1clav=C3=ADk?= Date: Wed, 29 Jan 2025 22:22:00 +0100 Subject: [PATCH] EditDialog: Improve tabs (#912) --- .../EditDialog/EditContent/EditContent.tsx | 81 ++++++++++++++----- .../EditFeatureMap/EditFeatureMap.tsx | 1 + .../FeatureEditSection/PresetSearchBox.tsx | 4 +- .../FeatureEditSection/PresetSelect.tsx | 4 +- .../EditDialog/EditContent/FeatureRow.tsx | 7 +- .../EditDialog/EditContent/MembersEditor.tsx | 3 +- .../EditDialog/EditContent/ParentsEditor.tsx | 2 +- .../EditDialog/EditContent/helpers.tsx | 13 ++- .../FeaturePanel/EditDialog/EditDialog.tsx | 4 +- .../EditDialog/EditDialogTitle.tsx | 22 +++-- .../HomepagePanel/HomepageOpenClimbing.tsx | 15 +++- .../HomepageOpenClimbingGallery.tsx | 26 ++++-- 12 files changed, 135 insertions(+), 47 deletions(-) diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx index 477d372a..c2641176 100644 --- 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 ( + + + + {tags.name ?? shortId} + + + + + {presetName} + + + ); + }; - const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); return ( <> {items.length > 1 && ( { alignItems: isSmallScreen ? undefined : 'baseline', textAlign: isSmallScreen ? undefined : 'left', }, + ...(isSmallScreen + ? {} + : { + resize: 'horizontal', + minWidth: 120, + maxWidth: '50%', + }), }} > - {items.map(({ shortId, tags }, idx) => ( + {items.map((item, idx) => ( - {tags.name ?? shortId}{' '} - - - } - value={shortId} + label={} + value={item.shortId} + sx={{ + maxWidth: '100%', + ...(isSmallScreen + ? {} + : { borderBottom: `solid 1px ${theme.palette.divider}` }), + }} /> ))} )} - +
e.preventDefault()} diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx index 0fe567d2..b74697a4 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/EditFeatureMap/EditFeatureMap.tsx +++ b/src/components/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 index d8d471cf..361f0b42 100644 --- 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 index 1c6fe79a..230b0b8f 100644 --- 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, @@ -81,7 +81,7 @@ const useMatchTags = ( }, [tags, feature, setPreset]); }; -const useOptions = () => { +export const useOptions = () => { const [options, setOptions] = useState([]); useEffect(() => { getTranslatedPresets().then((presets) => setOptions(presets)); diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx index 28bdf2dd..256e59b3 100644 --- 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 ( <> @@ -21,7 +24,9 @@ export const FeatureRow = ({ label, shortId, onClick }) => { > - {label ?? shortId} + + {label ?? shortId} + diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MembersEditor.tsx index 8f5e1c4d..565e79bd 100644 --- 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 index d6b4f223..fab4a5a4 100644 --- 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 index de4636ef..b31bfaba 100644 --- 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, shortId: string) => items.find((item) => item.shortId === shortId); -export const useGetHandleClick = () => { +export const useGetHandleClick = ({ + setIsExpanded, +}: { + setIsExpanded?: Dispatch>; +}) => { 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 index 9028dce4..6875e79a 100644 --- 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%' }} > - + {successInfo ? : } ); diff --git a/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx b/src/components/FeaturePanel/EditDialog/EditDialogTitle.tsx index a4e68cd7..534d19d2 100644 --- 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,7 +25,7 @@ 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(); @@ -32,9 +33,20 @@ export const EditDialogTitle = () => { return ( - - {loggedIn ? : } - {dialogTitle} + + + {loggedIn ? : } + {dialogTitle} + + + + + ); diff --git a/src/components/HomepagePanel/HomepageOpenClimbing.tsx b/src/components/HomepagePanel/HomepageOpenClimbing.tsx index dd085c7d..953e9fbe 100644 --- 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" > @@ -235,6 +243,11 @@ export function HomepageOpenClimbing({ onClose }: { onClose: () => void }) { + + + Made in Prague with ♥ + + diff --git a/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx b/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx index dedcef6d..1049d662 100644 --- a/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx +++ b/src/components/HomepagePanel/HomepageOpenClimbingGallery.tsx @@ -70,10 +70,13 @@ export const DiscoveryMoreText = styled.div` text-transform: lowercase; font-weight: normal; margin-bottom: 8px; + line-height: 2.5; `; export const GalleryWrapper = styled.div` width: calc(100% + 32px * 2); - height: calc(${HOMEPAGE_GALLERY_HEIGHT}px + 10px); // 10px for scrollbar + height: calc( + ${HOMEPAGE_GALLERY_HEIGHT}px + 26px + ); // 16px for scrollbar and 10px for shadow min-height: calc( ${HOMEPAGE_GALLERY_HEIGHT}px + 10px ); // otherwise it shrinks b/c of flex @@ -83,7 +86,7 @@ export const GalleryWrapper = styled.div` const Gradient = styled.div<{ blur?: boolean }>` position: absolute; width: 100%; - height: calc(100% - 6px); + height: 100%; top: 0; transition: all 0.2s; ${({ blur }) => @@ -102,7 +105,7 @@ const Gradient = styled.div<{ blur?: boolean }>` const Text = styled.div<{ center: boolean }>` position: absolute; - bottom: 12px; + bottom: 16px; text-align: center; width: 100%; font-weight: 900; @@ -113,9 +116,12 @@ const Text = styled.div<{ center: boolean }>` ${({ center }) => center === true && `top: 40%`}; `; +const StyledLink = styled(Link)` + line-height: 0; + display: block; +`; + const StyledScrollbars = styled(Scrollbars)` - width: 100%; - height: ${HOMEPAGE_GALLERY_HEIGHT}px; white-space: nowrap; text-align: center; // one image centering overflow-y: hidden; @@ -129,11 +135,17 @@ const GalleryItemContainer = styled.div` position: relative; vertical-align: top; overflow: hidden; + margin-top: 10px; margin-right: 12px; cursor: pointer; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + &:first-of-type { margin-left: 30px; } + &:last-of-type { + margin-right: 30px; + } `; type GalleryItemProps = { @@ -158,7 +170,7 @@ const GalleryItem = ({ title, }: GalleryItemProps) => ( - + <> {children} - + );