fix: check condition for icon display and styling

terrestris · Dec 11, 2024 · bc33a7e · bc33a7e
1 parent 2f6538f
commit bc33a7e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/src/components/ToolMenu/LayerTree/index.less b/src/components/ToolMenu/LayerTree/index.less
@@ -19,21 +19,26 @@
   .ant-tree-node-content-wrapper {
     flex: 1;
     overflow-x: auto;
+
     .ant-tree-title {
       .tree-node-header {
         display: flex;
 
-        .layer-name{
+        .layer-name {
           margin-right: 8px;
         }
 
-        .layer-icon{
-          margin-left: 5px;
-          margin-right: 5px;
+        .layer-icons-group {
+          margin-left: 15px;
+
+          .layer-icon {
+            margin-right: 8px;
+          }
         }
 
-        .loading-dots{
+        .loading-dots {
           position: fixed;
+          margin-right: 5px;
         }
 
         .loading-indicator {

diff --git a/src/components/ToolMenu/LayerTree/index.tsx b/src/components/ToolMenu/LayerTree/index.tsx
@@ -76,7 +76,7 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
   const initialLayersUid = map?.getAllLayers().map(l => getUid(l));
 
   const showLegendsState: boolean = useAppSelector(state => state.layerTree.showLegends) ?? false;
-  const [visibleLegendsIds, setVisibleLegendsIds] = useState<string[]> (showLegendsState ? initialLayersUid ?? [] : []);
+  const [visibleLegendsIds, setVisibleLegendsIds] = useState<string[]>(showLegendsState ? initialLayersUid ?? [] : []);
   const [layerTileLoadCounter, setLayerTileLoadCounter] = useState<LayerTileLoadCounter>({});
   const layerIconsVisible: boolean = useAppSelector(state => state.layerTree.layerIconsVisible) ?? false;
 
@@ -210,7 +210,6 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
     const scale = resolution ? MapUtil.getScaleForResolution(resolution, unit) : undefined;
     const percent = layer instanceof OlLayer && getUid(layer.getSource()) ?
       layerTileLoadCounter[getUid(layer.getSource())]?.percent : 100;
-    const shouldDisplayIcon = layer.get('visible') && layerIconsVisible;
 
     if (layer instanceof OlLayerGroup) {
       return (
@@ -232,29 +231,33 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
               className='layer-name'
             >
               {layer.get('name')}
-              {layer.get('searchable') && shouldDisplayIcon && (
-                < FontAwesomeIcon
-                  icon={faMagnifyingGlass}
-                  className='layer-icon'
-                />
-              )}
-              {layer.get('hoverable') && shouldDisplayIcon && (
-                < FontAwesomeIcon
-                  icon={faCircleInfo}
-                  className='layer-icon'
-                />
-              )}
-              {layer.get('editable') && shouldDisplayIcon && (
-                < FontAwesomeIcon
-                  icon={faPen}
-                  className='layer-icon'
-                />
-              )}
               <span
                 className='loading-dots'
               >
                 {percent < 100 && <LoadingIndicator />}
               </span>
+              <span
+                className='layer-icons-group'
+              >
+                {layer.get('searchable') && layerIconsVisible && (
+                  <FontAwesomeIcon
+                    icon={faMagnifyingGlass}
+                    className='layer-icon'
+                  />
+                )}
+                {layer.get('hoverable') && layer.get('visible') && layerIconsVisible && (
+                  <FontAwesomeIcon
+                    icon={faCircleInfo}
+                    className='layer-icon'
+                  />
+                )}
+                {layer.get('editable') && layerIconsVisible && (
+                  <FontAwesomeIcon
+                    icon={faPen}
+                    className='layer-icon'
+                  />
+                )}
+              </span>
             </span>
             {
               (layer instanceof OlLayerTile || layer instanceof OlLayerImage) && (