FeaturePanel: add description for NwrIcon (#948)

zbycz · Feb 8, 2025 · f19e5a2 · f19e5a2
1 parent 49bfb54
commit f19e5a2
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 22 deletions.
diff --git a/src/components/FeaturePanel/NwrIcon.tsx b/src/components/FeaturePanel/NwrIcon.tsx
@@ -11,32 +11,61 @@ import { getApiId } from '../../services/helpers';
 export const getOsmTypeFromShortId = (shortId: string): OsmType =>
   getApiId(shortId).type;
 
-type NwrIconProps = {
-  osmType: OsmType;
-  color?: string;
-  fontSize?: string;
-};
-
 type TypeMap = {
-  [key: string]: { name: OsmType; icon: React.ElementType; scale?: number };
+  [key: string]: {
+    Icon: React.ElementType;
+    scale?: number;
+    label: string;
+    description: string;
+  };
 };
 
 const typeMap: TypeMap = {
-  node: { name: 'node', icon: CircleIcon, scale: 0.7 },
-  way: { name: 'way', icon: TimelineIcon },
-  relation: { name: 'relation', icon: HubIcon },
+  node: {
+    Icon: CircleIcon,
+    scale: 0.7,
+    label: t('osmtype.node'),
+    description: t('osmtype.node.description'),
+  },
+  way: {
+    Icon: TimelineIcon,
+    label: t('osmtype.way'),
+    description: t('osmtype.way.description'),
+  },
+  relation: {
+    Icon: HubIcon,
+    label: t('osmtype.relation'),
+    description: t('osmtype.relation.description'),
+  },
+};
+
+type Props = {
+  osmType: OsmType;
+  color?: string;
+  fontSize?: string;
 };
 
-export const NwrIcon = ({ osmType, color, fontSize }: NwrIconProps) => {
+export const NwrIcon = ({ osmType, color, fontSize }: Props) => {
   const type = typeMap[osmType];
-  if (!type) return null;
+  if (!type) {
+    return null;
+  }
 
-  const IconComponent = type.icon;
-  const { name, scale } = type;
+  const { Icon, scale, label, description } = type;
+  const english = label.toLowerCase() === osmType ? '' : ` (${osmType})`;
 
   return (
-    <Tooltip title={`OSM ${t(`osmtype_${name}`)}`}>
-      <IconComponent
+    <Tooltip
+      title={
+        <>
+          OSM {label}
+          {english}
+          <br />
+          {description}
+        </>
+      }
+    >
+      <Icon
         fontSize={fontSize || 'inherit'}
         color={color || 'secondary'}
         sx={{ transform: `scale(${scale || 1})` }}

diff --git a/src/locales/cs.js b/src/locales/cs.js
@@ -285,9 +285,12 @@ export default {
   'sharedialog.copied': 'Zkopírováno!',
   'sharedialog.share': 'Sdílet',
 
-  osmtype_node: 'Uzel',
-  osmtype_way: 'Cesta',
-  osmtype_relation: 'Relace',
+  'osmtype.node': 'Uzel',
+  'osmtype.node.description': 'Bod zájmu či bod v cestě – nese polohu a vlastnosti (tagy).',
+  'osmtype.way': 'Cesta',
+  'osmtype.way.description': 'Linie se skládá z dalších uzlů (node).',
+  'osmtype.relation': 'Relace',
+  'osmtype.relation.description': 'Skupina dalších prvků – cest, uzlů a případně dalších relací.',
 
   weather: 'Počasí',
 };
diff --git a/src/locales/vocabulary.js b/src/locales/vocabulary.js
@@ -376,9 +376,12 @@ export default {
   'sharedialog.copied': 'Copied!',
   'sharedialog.share': 'Share',
 
-  osmtype_node: 'Node',
-  osmtype_way: 'Way',
-  osmtype_relation: 'Relation',
+  'osmtype.node': 'Node',
+  'osmtype.node.description': 'Point of interest OR point in a way – contains coordinates and properties (tags).',
+  'osmtype.way': 'Way',
+  'osmtype.way.description': 'Line consisting of severel (many) nodes.',
+  'osmtype.relation': 'Relation',
+  'osmtype.relation.description': 'Group of other elements – ways, nodes, and even other relations.',
 
   weather: 'Weather',
 };