Fix/legend height fix (#1592)

* fix(mapLegends): map legend cleanup * fix(accordion): remove ref prop * fix(projectDetailsV2): add handle click outside on map legend
hotosm · Jun 21, 2024 · 1457eb5 · 1457eb5
1 parent 45217ad
commit 1457eb5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 30 deletions.
diff --git a/src/frontend/src/components/MapLegends.jsx b/src/frontend/src/components/MapLegends.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import CoreModules from '@/shared/CoreModules';
 import AssetModules from '@/shared/AssetModules';
 
-const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatus }) => {
+const MapLegends = ({ iconBtnProps, defaultTheme }) => {
   const MapDetails = [
     {
       value: 'Ready',
@@ -29,11 +29,6 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
       color: defaultTheme.palette.mapFeatureColors.validated,
       status: 'none',
     },
-    // {
-    //   value: 'Bad',
-    //   color: defaultTheme.palette.mapFeatureColors.bad,
-    //   status: 'none',
-    // },
     {
       value: 'More mapping needed',
       color: defaultTheme.palette.mapFeatureColors.invalidated,
@@ -67,28 +62,8 @@ const MapLegends = ({ direction, spacing, iconBtnProps, defaultTheme, valueStatu
       </div>
     );
   };
+
   return (
-    // <CoreModules.Stack direction={direction} spacing={spacing}>
-    //   {MapDetails.map((data, index) => {
-    //     return (
-    //       <CoreModules.Stack key={index} direction={'row'} spacing={1} p={1}>
-    //         <CoreModules.IconButton
-    //           style={{ backgroundColor: data.color, borderRadius: 0 }}
-    //           {...iconBtnProps}
-    //           color="primary"
-    //           component="label"
-    //         >
-    //           <AssetModules.LockIcon style={{ color: data.status == 'none' ? data.color : 'white' }} />
-    //         </CoreModules.IconButton>
-    //         {valueStatus && (
-    //           <CoreModules.Stack style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
-    //             <CoreModules.Typography>{data.value}</CoreModules.Typography>
-    //           </CoreModules.Stack>
-    //         )}
-    //       </CoreModules.Stack>
-    //     );
-    //   })}
-    // </CoreModules.Stack>
     <div className="fmtm-py-3">
       <div className="fmtm-flex fmtm-flex-col fmtm-gap-2 sm:fmtm-gap-4">
         {MapDetails.map((data, index) => {

diff --git a/src/frontend/src/components/common/Accordion.tsx b/src/frontend/src/components/common/Accordion.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import AssetModules from '@/shared/AssetModules';
 
 interface IAccordion {
+  ref?: string | null;
   collapsed?: boolean;
   header: any;
   body: any;
@@ -12,6 +13,7 @@ interface IAccordion {
 }
 
 export default function Accordion({
+  ref = null,
   collapsed: isCollapsed,
   header,
   body,
@@ -27,7 +29,7 @@ export default function Accordion({
   }, [isCollapsed]);
 
   return (
-    <div className={`fmtm-bg-white fmtm-p-2 fmtm-pb-3 ${className} `}>
+    <div ref={ref} className={`fmtm-bg-white fmtm-p-2 fmtm-pb-3 ${className} `}>
       <div className="">
         <div
           className={`fmtm-flex fmtm-items-center fmtm-justify-between

diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -49,6 +49,7 @@ const ProjectDetailsV2 = () => {
   const navigate = useNavigate();
   const { windowSize } = WindowDimension();
   const [divRef, toggle, handleToggle] = useOutsideClick();
+  const [legendRef, legendToggle, handleLegendToggle] = useOutsideClick();
 
   const [mainView, setView] = useState<any>();
   const [selectedTaskArea, setSelectedTaskArea] = useState();
@@ -512,16 +513,19 @@ const ProjectDetailsV2 = () => {
               />
               <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-left-3 fmtm-z-50 fmtm-rounded-lg">
                 <Accordion
+                  ref={legendRef}
                   body={<MapLegends defaultTheme={defaultTheme} />}
                   header={
                     <div className="fmtm-flex fmtm-items-center fmtm-gap-1 sm:fmtm-gap-2">
                       <AssetModules.LegendToggleIcon className=" fmtm-text-primaryRed" sx={{ fontSize: '30px' }} />
                       <p className="fmtm-text-lg fmtm-font-normal">Legend</p>
                     </div>
                   }
-                  onToggle={() => {}}
+                  onToggle={() => {
+                    handleLegendToggle();
+                  }}
                   className="fmtm-py-0 !fmtm-pb-0 fmtm-rounded-lg hover:fmtm-bg-gray-50"
-                  collapsed={true}
+                  collapsed={!legendToggle}
                 />
               </div>
               <div className="fmtm-absolute fmtm-bottom-20 sm:fmtm-bottom-5 fmtm-right-3 fmtm-z-50 fmtm-h-fit">