diff --git a/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx b/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx index afadfc9e..be1e7c4b 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/AddMemberForm.tsx @@ -9,6 +9,7 @@ import { Alert, Button, TextField } from '@mui/material'; import { LonLat, OsmId } from '../../../../services/types'; import { t } from '../../../../services/intl'; import AddIcon from '@mui/icons-material/Add'; +import { NwrIcon } from '../../NwrIcon'; const hasAtLeastOneNode = (members: Members) => { return members?.some((member) => member.shortId.startsWith('n')); @@ -150,6 +151,7 @@ export const AddMemberForm = ({ color="inherit" variant="text" size="small" + startIcon={} > {t('editdialog.members.convert_button')} diff --git a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx index ca9f9a2f..477d372a 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/EditContent.tsx @@ -18,6 +18,7 @@ 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'; export const EditContent = () => { const { items, addFeature, current, setCurrent } = useEditContext(); @@ -51,7 +52,22 @@ export const EditContent = () => { }} > {items.map(({ shortId, tags }, idx) => ( - + + {tags.name ?? shortId}{' '} + + + } + value={shortId} + /> ))} )} diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx index e451a965..b06c3ecd 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/FeatureEditSection/FeatureEditSection.tsx @@ -19,6 +19,7 @@ const EditFeatureMapDynamic = dynamic( ); import { Stack, Typography } from '@mui/material'; import { useEditContext } from '../../EditContext'; +import { getOsmTypeFromShortId, NwrIcon } from '../../../NwrIcon'; type Props = { shortId: string; @@ -28,10 +29,6 @@ const EditFeatureHeading = (props: { shortId: string }) => { const { items } = useEditContext(); const { tags } = useFeatureEditData(); - if (items.length <= 1) { - return null; - } - return ( { mb={2} > {tags.name || ' '} - - {props.shortId} - + ); }; diff --git a/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx b/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx index 409bea10..28bdf2dd 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/FeatureRow.tsx @@ -1,6 +1,13 @@ -import { Divider, ListItem, ListItemText, Stack } from '@mui/material'; +import { + Divider, + ListItem, + ListItemText, + Stack, + Typography, +} from '@mui/material'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import React from 'react'; +import { getOsmTypeFromShortId, NwrIcon } from '../../NwrIcon'; export const FeatureRow = ({ label, shortId, onClick }) => { return ( @@ -12,7 +19,12 @@ export const FeatureRow = ({ label, shortId, onClick }) => { direction="row" width="100%" > - {label ?? shortId} + + + {label ?? shortId} + + + diff --git a/src/components/FeaturePanel/FeatureHeading.tsx b/src/components/FeaturePanel/FeatureHeading.tsx index 72466655..668140e9 100644 --- a/src/components/FeaturePanel/FeatureHeading.tsx +++ b/src/components/FeaturePanel/FeatureHeading.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from '@emotion/styled'; import EditIcon from '@mui/icons-material/Edit'; -import { IconButton, useMediaQuery } from '@mui/material'; +import { Box, IconButton, Stack, useMediaQuery } from '@mui/material'; import { useEditDialogContext } from './helpers/EditDialogContext'; import { PoiDescription } from './helpers/PoiDescription'; import { getLabel, getSecondaryLabel } from '../../helpers/featureLabel'; @@ -9,16 +9,14 @@ import { useFeatureContext } from '../utils/FeatureContext'; import { t } from '../../services/intl'; import { isMobileDevice } from '../helpers'; import { QuickActions } from './QuickActions/QuickActions'; +import { NwrIcon } from './NwrIcon'; +import { getShortId } from '../../services/helpers'; const StyledEditButton = styled(IconButton)` visibility: hidden; position: relative; top: 3px; `; -const NameWithEdit = styled.div` - display: flex; - gap: 8px; -`; const EditNameButton = () => { const { openWithTag } = useEditDialogContext(); @@ -49,7 +47,6 @@ const HeadingContainer = styled.div` display: flex; justify-content: space-between; - align-items: flex-start; position: relative; &:hover ${StyledEditButton} { @@ -95,16 +92,20 @@ const SecondaryHeading = styled.h2<{ $deleted: boolean }>` export const FeatureHeading = React.forwardRef((_, ref) => { // thw pwa needs space at the bottom const isStandalone = useMediaQuery('(display-mode: standalone)'); + const { feature } = useFeatureContext(); return ( - + {/* */} - + + + + diff --git a/src/components/FeaturePanel/NwrIcon.tsx b/src/components/FeaturePanel/NwrIcon.tsx new file mode 100644 index 00000000..1886cacb --- /dev/null +++ b/src/components/FeaturePanel/NwrIcon.tsx @@ -0,0 +1,49 @@ +import CircleIcon from '@mui/icons-material/Circle'; +import TimelineIcon from '@mui/icons-material/Timeline'; +import HubIcon from '@mui/icons-material/Hub'; +import { Tooltip } from '@mui/material'; +import React from 'react'; +import { t } from '../../services/intl'; +import { OsmType } from '../../services/types'; +import { fontSize } from '@mui/system'; + +export const getOsmTypeFromShortId = (shortId: string) => { + const typeMap = { + n: 'node', + w: 'way', + r: 'relation', + }; + return typeMap[shortId[0]]; +}; + +type NwrIconProps = { + osmType: OsmType; + color?: string; + fontSize?: string; +}; + +type TypeMap = { + [key: string]: { name: OsmType; icon: React.ElementType; scale?: number }; +}; + +const typeMap: TypeMap = { + node: { name: 'node', icon: CircleIcon, scale: 0.7 }, + way: { name: 'way', icon: TimelineIcon }, + relation: { name: 'relation', icon: HubIcon }, +}; + +export const NwrIcon = ({ osmType, color, fontSize }: NwrIconProps) => { + const type = typeMap[osmType]; + const IconComponent = type.icon; + const { name, scale } = type; + + return ( + + + + ); +}; diff --git a/src/locales/cs.js b/src/locales/cs.js index 0078e30c..3a26a836 100644 --- a/src/locales/cs.js +++ b/src/locales/cs.js @@ -259,5 +259,9 @@ export default { 'sharedialog.copied': 'Zkopírováno!', 'sharedialog.share': 'Sdílet', + osmtype_node: 'Uzel', + osmtype_way: 'Cesta', + osmtype_relation: 'Relace', + weather: 'Počasí', }; diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js index b6216723..b4f2bd9d 100644 --- a/src/locales/vocabulary.js +++ b/src/locales/vocabulary.js @@ -356,5 +356,9 @@ export default { 'sharedialog.copied': 'Copied!', 'sharedialog.share': 'Share', + osmtype_node: 'Node', + osmtype_way: 'Way', + osmtype_relation: 'Relation', + weather: 'Weather', };