feat: adds tooltips to layertree icons

terrestris · Dec 19, 2024 · c102572 · c102572
1 parent 5814db4
commit c102572
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/src/components/ToolMenu/LayerTree/index.tsx b/src/components/ToolMenu/LayerTree/index.tsx
@@ -13,6 +13,10 @@ import {
   FontAwesomeIcon
 } from '@fortawesome/react-fontawesome';
 
+import {
+  Tooltip
+} from 'antd';
+
 import {
   getUid
 } from 'ol';
@@ -249,22 +253,34 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
                 className='layer-icons-group'
               >
                 {layer.get('searchable') && layerIconsVisible && (
-                  <FontAwesomeIcon
-                    icon={faMagnifyingGlass}
-                    className='layer-icon'
-                  />
+                  <>
+                    <Tooltip title={t('ToolMenu.searchable')}>
+                      <FontAwesomeIcon
+                        icon={faMagnifyingGlass}
+                        className='layer-icon'
+                      />
+                    </Tooltip>
+                  </>
                 )}
                 {layer.get('hoverable') && layer.get('visible') && layerIconsVisible && (
-                  <FontAwesomeIcon
-                    icon={faCircleInfo}
-                    className='layer-icon'
-                  />
+                  <>
+                    <Tooltip title={t('ToolMenu.queryable')}>
+                      <FontAwesomeIcon
+                        icon={faCircleInfo}
+                        className='layer-icon'
+                      />
+                    </Tooltip>
+                  </>
                 )}
                 {layer.get('editable') && layerIconsVisible && (
-                  <FontAwesomeIcon
-                    icon={faPen}
-                    className='layer-icon'
-                  />
+                  <>
+                    <Tooltip title={t('ToolMenu.editable')}>
+                      <FontAwesomeIcon
+                        icon={faPen}
+                        className='layer-icon'
+                      />
+                    </Tooltip>
+                  </>
                 )}
               </span>
             </span>

diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -124,7 +124,10 @@ export default {
         uploadData: 'Daten hochladen',
         print: 'Export',
         layertree: 'Karten',
-        languageSelect: 'Sprachauswahl'
+        languageSelect: 'Sprachauswahl',
+        searchable: 'durchsuchbar',
+        queryable: 'abfragbar',
+        editable: 'editierbar'
       },
       PrintForm: {
         title: 'Kartentitel',
@@ -420,7 +423,10 @@ export default {
         uploadData: 'Upload data',
         print: 'Export',
         layertree: 'Maps',
-        languageSelect: 'Language selector'
+        languageSelect: 'Language selector',
+        searchable: 'searchable',
+        queryable: 'queryable',
+        editable: 'editable'
       },
       PrintForm: {
         title: 'Title',