Merge pull request #107 from OCA-UFCG/refact/maps-menu

Adds category divisions on maps menu
OCA-UFCG · Oct 10, 2024 · 76f7a31 · 76f7a31
2 parents 5d532e1 + ae1c841
commit 76f7a31
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 43 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/app/globalStyles.tsx b/src/app/globalStyles.tsx
@@ -17,13 +17,13 @@ export const GlobalStyles = createGlobalStyle`
 
     ::-webkit-scrollbar {
       height: 0.5rem;
-      width: 0.5rem;
+      width: 0.25rem;
       padding: 10px;
     }
     
     ::-webkit-scrollbar-thumb {
       background: ${({ theme }) => theme.colors.green}75;
-      scroll-padding: 1rem;
+      scroll-padding: 0.2rem;
       background-clip: padding-box;
     }
 
@@ -140,7 +140,7 @@ export const GlobalStyles = createGlobalStyle`
     font-size: 100%;
     font: inherit;
     vertical-align: baseline;
-    color: ${({ theme }) => theme.colors.black}
+    color: ${({ theme }) => theme.colors["dark-gray"]}
   }
 
   /* HTML5 display-role reset for older browsers */

diff --git a/src/app/theme.ts b/src/app/theme.ts
@@ -8,6 +8,7 @@ declare module "styled-components" {
     maroon: string;
     white: string;
     black: string;
+    "dark-gray": string;
     gray: string;
     orange: string;
     yellow: string;
@@ -27,6 +28,7 @@ export const theme: DefaultTheme = {
     maroon: "#8f4456",
     white: "white",
     black: "#1e1e1e",
+    "dark-gray": "#444444",
     gray: "#858585",
     orange: "#AA633B",
     yellow: "#CEA15B",

diff --git a/src/components/MapsMenu/MapsMenu.styles.tsx b/src/components/MapsMenu/MapsMenu.styles.tsx
@@ -7,22 +7,17 @@ export const ContentWrapper = styled.div`
   align-items: center;
 `;
 
-export const Title = styled.h3`
-  font-weight: bold;
-  font-size: 1.1rem;
-
-  &::before,
-  &::after {
-    content: " - ";
-  }
-`;
-
 export const Form = styled.form`
   display: flex;
   flex-flow: column;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 1.5rem 0 1rem 0;
+  box-sizing: border-box;
+  width: 20rem;
+  height: 100vh;
+  padding-right: 0.3rem;
+
+  max-height: 24rem;
+  overflow-y: scroll;
+  overflow-x: hidden;
 `;
 
 export const ItemWrapper = styled.div`
@@ -31,6 +26,10 @@ export const ItemWrapper = styled.div`
   align-items: center;
 `;
 
+export const InfoContainer = styled.div`
+  margin-right: 0.45rem;
+`;
+
 export const QuestionMarkImg = styled(Icon)`
   max-width: 1rem;
   height: fit-content;
@@ -68,3 +67,66 @@ export const NoDataElement = styled.div<{ delay: number }>`
   width: 100%;
   border-radius: 4px;
 `;
+
+export const SubSectionWrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+  gap: 0.5rem;
+  width: 100%;
+  transition: 100ms;
+  margin-top: 0;
+`;
+
+export const IconWrapper = styled(Icon)`
+  color: ${({ theme }) => theme.colors.black};
+  transition: 100ms linear;
+`;
+
+export const FieldDetails = styled.details`
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.green}40;
+  color: ${({ theme }) => theme.colors.green};
+
+  &:not([open]) ${IconWrapper} {
+    transform: rotate(45deg);
+  }
+
+  &[open] ${SubSectionWrapper} {
+    margin-top: 1rem;
+  }
+
+  &:not([open]) ${SubSectionWrapper} {
+    margin-top: 0rem;
+  }
+`;
+
+export const Title = styled.h3`
+  font-weight: bold;
+  transition: 300ms;
+`;
+
+export const Summary = styled.summary`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  margin-left: 1px;
+  transition: 300ms;
+
+  &:hover {
+    background: #cdcdcd20;
+  }
+
+  &:hover ${Title}, &:hover ${IconWrapper} {
+    color: ${({ theme }) => theme.colors.green};
+  }
+`;
diff --git a/src/components/MapsMenu/MapsMenu.tsx b/src/components/MapsMenu/MapsMenu.tsx
@@ -11,6 +11,11 @@ import {
   NoDataContainer,
   NoDataElement,
   QuestionMarkImg,
+  SubSectionWrapper,
+  FieldDetails,
+  Summary,
+  IconWrapper,
+  InfoContainer,
   Title,
 } from "./MapsMenu.styles";
 
@@ -32,8 +37,10 @@ const MapsMenu = ({
   onQuestionSelect: (newItem: string, retract?: boolean) => void;
 }) => {
   const [formValues, setFormValues] = useState<IFormItem[]>([]);
+  const [mapTypes, setMapTypes] = useState<{ [key: string]: IFormItem[] }>({});
   const [currentImagedata, setcurrentImageData] = useState<IImageData>({});
   const [currentName, setCurrentName] = useState<string>("");
+  const [currentCategory, setCurrentCategory] = useState<string>("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -61,16 +68,30 @@ const MapsMenu = ({
         if (item.id === newValue) {
           setCurrentName(item.id);
           setcurrentImageData(item.imageData);
+          currentCategory === "" && setCurrentCategory(item.type);
         }
 
         return {
           id: item.id,
           name: item.name,
           checked: item.id === newValue,
           imageData: item.imageData,
+          type: item.type,
         };
       }),
     );
+
+    const typesMap: { [key: string]: IFormItem[] } = {};
+
+    formValues.forEach((item) => {
+      if (!typesMap[item.type]) {
+        typesMap[item.type] = [];
+      }
+
+      typesMap[item.type].push(item);
+    });
+
+    setMapTypes(typesMap);
   };
 
   useEffect(() => {
@@ -87,31 +108,46 @@ const MapsMenu = ({
       setRetracted={setRetracted}
     >
       <ContentWrapper>
-        <Title>Visualizações Disponíveis</Title>
         {formValues.length > 0 ? (
           <Form>
-            {formValues
-              .sort((element1, element2) =>
-                element1.name.localeCompare(element2.name),
-              )
-              .map((item: IFormItem) => {
-                return (
-                  <ItemWrapper key={item.id}>
-                    <VisuItem
-                      info={item}
-                      isLoading={isLoading}
-                      onClick={onQuestionSelect}
-                      onChange={onItemChange}
-                    />
-                    <div
-                      onClick={() => onQuestionSelect(item.id)}
-                      title={`Sobre ${item.name}`}
-                    >
-                      <QuestionMarkImg id="question" height={20} width={20} />
-                    </div>
-                  </ItemWrapper>
-                );
-              })}
+            {Object.keys(mapTypes)
+              .sort((a, b) => b.localeCompare(a))
+              .map((type) => (
+                <FieldDetails key={type} open={currentCategory === type}>
+                  <Summary>
+                    <Title>{type}</Title>
+                    <IconWrapper id="close" size={16} stroke-width={2} />
+                  </Summary>
+                  <SubSectionWrapper>
+                    {mapTypes[type]
+                      .sort((element1, element2) =>
+                        element1.name.localeCompare(element2.name),
+                      )
+                      .map((item: IFormItem) => {
+                        return (
+                          <ItemWrapper key={item.id}>
+                            <VisuItem
+                              info={item}
+                              isLoading={isLoading}
+                              onClick={onQuestionSelect}
+                              onChange={onItemChange}
+                            />
+                            <InfoContainer
+                              onClick={() => onQuestionSelect(item.id)}
+                              title={`Sobre ${item.name}`}
+                            >
+                              <QuestionMarkImg
+                                id="question"
+                                height={20}
+                                width={20}
+                              />
+                            </InfoContainer>
+                          </ItemWrapper>
+                        );
+                      })}
+                  </SubSectionWrapper>
+                </FieldDetails>
+              ))}
           </Form>
         ) : (
           <NoDataContainer>

diff --git a/src/components/VisuItem/VisuItem.styles.tsx b/src/components/VisuItem/VisuItem.styles.tsx
@@ -14,8 +14,6 @@ export const ItemWrapper = styled.div`
   gap: 0.5rem;
   width: 100%;
   padding: 0.5rem 1rem 0.5rem 0.5rem;
-  background-color: ${({ theme }) => theme.colors.white};
-  box-shadow: 0px 0px 2px #e0e0e0;
   border-radius: 4px;
 `;
 

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -87,6 +87,7 @@ export const defaultEEInfo: IEEInfo = {
   poster: "/defaultMapsPoster.png",
   minScale: 0,
   maxScale: 1,
+  type: "default",
 };
 
 export const defaultNews: INews[] = [

diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
@@ -97,6 +97,7 @@ export interface IEEInfo {
       imageParams: IImageParam[];
     };
   };
+  type: string;
 }
 
 export interface IMapId {
@@ -115,6 +116,7 @@ export interface IFormItem {
   name: string;
   checked: boolean;
   imageData: IImageData;
+  type: string;
 }
 
 export interface IImageData {