Merge pull request #108 from OCA-UFCG/refact/temporal_menu

refact: update MapsMenu temporal bar
OCA-UFCG · Oct 14, 2024 · ea65ccf · ea65ccf
2 parents b61a850 + 3323691
commit ea65ccf
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 106 deletions.
diff --git a/src/components/DateInput/DateInput.styles.tsx b/src/components/DateInput/DateInput.styles.tsx
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { Icon } from "../Icon/Icon";
 
 export const Wrapper = styled.div<{ disabled: string }>`
   display: flex;
   gap: 0.5rem;
-  align-items: center;
   width: 100%;
   margin-top: 0.5rem;
+  align-items: center;
+  justify-content: space-around;
   ${({ disabled }) =>
     disabled === "true" &&
     `
@@ -17,133 +17,94 @@ export const Wrapper = styled.div<{ disabled: string }>`
   box-sizing: border-box;
 `;
 
-export const CalendarImage = styled(Icon)`
-  height: fit-content;
-`;
-
-export const DateInfo = styled.p`
-  width: max-content;
-  text-wrap: nowrap;
-  margin: 0;
+export const InputWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0rem;
+  width: 100%;
+  // height: 2rem;
 `;
 
-export const InputWrapper = styled.div`
+export const InputContainer = styled.div`
   width: 100%;
+  height: 2rem;
 `;
 
 export const RangeInput = styled.input`
   width: 100%;
   -webkit-appearance: none;
   background: transparent;
   cursor: pointer;
-  /* z-index: 0; */
-  padding-inline: 0.25rem;
+  height: 0.25rem;
 
   input[type="range"] {
     height: 22px;
     -webkit-appearance: none;
-    margin: 10px 0;
     width: 100%;
   }
+
   &::-webkit-slider-runnable-track {
     width: 100%;
-    height: 8px;
+    height: 4px;
     cursor: pointer;
-    box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black};
     background: ${({ theme }) => theme.colors.black}70;
     border-radius: 48px;
-    border: 0px solid ${({ theme }) => theme.colors.black};
   }
+
   &::-webkit-slider-thumb {
-    box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black};
-    border: 0px solid #b3b5e3;
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     border-radius: 16px;
     background: ${({ theme }) => theme.colors.orange};
     cursor: pointer;
-    -webkit-appearance: none;
     margin-top: -4px;
   }
-  &:focus::-webkit-slider-runnable-track {
-    background: ${({ theme }) => theme.colors.black};
-  }
+
   &::-moz-range-track {
     width: 100%;
-    height: 8px;
-    cursor: pointer;
-    box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black};
+    height: 4px;
     background: ${({ theme }) => theme.colors.black};
     border-radius: 48px;
-    border: 0px solid ${({ theme }) => theme.colors.black};
   }
+
   &::-moz-range-thumb {
-    box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black};
-    border: 0px solid #b3b5e3;
-    height: 16px;
-    width: 16px;
+    height: 12px;
+    width: 12px;
     border-radius: 16px;
     background: ${({ theme }) => theme.colors.orange};
     cursor: pointer;
   }
-  &::-ms-track {
-    width: 100%;
-    height: 4px;
-    cursor: pointer;
-    background: transparent;
-    border-color: transparent;
-    color: transparent;
-  }
-  &::-ms-fill-lower {
-    background: ${({ theme }) => theme.colors.black};
-    border: 0px solid ${({ theme }) => theme.colors.black};
-    border-radius: 96px;
-    box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black};
-  }
-  &::-ms-fill-upper {
-    background: ${({ theme }) => theme.colors.black};
-    border: 0px solid ${({ theme }) => theme.colors.black};
-    border-radius: 96px;
-    box-shadow: 0px 0px 0px ${({ theme }) => theme.colors.black};
-  }
-  &::-ms-thumb {
-    margin-top: 1px;
-    box-shadow: 0px 0px 2px ${({ theme }) => theme.colors.black};
-    height: 16px;
-    width: 16px;
-    border-radius: 16px;
-    cursor: pointer;
-  }
-  &:focus::-ms-fill-lower {
-    background: ${({ theme }) => theme.colors.black};
-  }
-  &:focus::-ms-fill-upper {
-    background: ${({ theme }) => theme.colors.black};
-  }
 
   &:disabled {
     cursor: not-allowed;
   }
 `;
 
-export const DateList = styled.ul`
+export const DateContainer = styled.div`
   width: 100%;
   display: flex;
   justify-content: space-between;
+  align-items: end;
+  height: 1.7rem;
+
   position: relative;
-  transform: translate(-10px, 3px);
   opacity: 0.7;
   z-index: -2;
 `;
 
-export const DateItem = styled.li`
+export const DateSpan = styled.span<{ year: string }>`
   position: relative;
-  list-style: none;
-  width: 2px;
-  height: 8px;
-  border-radius: 2px;
-  margin: 0 7px;
-  padding: 0;
-  background-color: ${({ theme }) => theme.colors.black};
+  display: inline-block;
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.black};
   pointer-events: none;
+
+  &::after {
+    content: "${({ year }) => year}";
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
 `;
diff --git a/src/components/DateInput/DateInput.tsx b/src/components/DateInput/DateInput.tsx
@@ -1,13 +1,11 @@
 import { IImageData, IMapInfo } from "@/utils/interfaces";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef } from "react";
 import {
   Wrapper,
-  DateInfo,
-  CalendarImage,
   RangeInput,
-  DateList,
   InputWrapper,
-  DateItem,
+  DateContainer,
+  DateSpan,
 } from "./DateInput.styles";
 
 const DateInput = ({
@@ -22,21 +20,18 @@ const DateInput = ({
   dates: IImageData;
   onChange: (newValues: IMapInfo) => void;
 }) => {
-  const [currentDate, setCurrentDate] = useState<string>("");
   const inputRef = useRef<HTMLInputElement>(null);
+  const dateKeys: string[] = Object.keys(dates);
+  const hasGeneralDate = "general" in dates;
 
   const handleRangeChange = (event: ChangeEvent<HTMLInputElement>) => {
     const newDate = Object.keys(dates)[Number(event.target.value) - 1];
-    setCurrentDate(newDate);
     onChange({ name: mapId, year: newDate });
   };
 
-  const dateKeys: string[] = Object.keys(dates);
-
   const updateFields = (year: string) => {
     if (inputRef.current)
       inputRef.current.value = [dateKeys.indexOf(year) + 1].toString();
-    setCurrentDate(year);
     onChange({ name: mapId, year: year });
   };
 
@@ -50,24 +45,24 @@ const DateInput = ({
   }, [mapId]);
 
   return (
-    <Wrapper disabled={("general" in dates || isLoading).toString()}>
-      <CalendarImage id="calendar" size={20} />
-      <DateInfo>{dates?.general ? "--" : currentDate}</DateInfo>
-      <InputWrapper>
-        <RangeInput
-          disabled={"general" in dates || isLoading}
-          type="range"
-          ref={inputRef}
-          min={1}
-          max={Object.keys(dates).length}
-          onChange={handleRangeChange}
-        />
-        <DateList>
-          {Object.keys(dates).map((date: string) => (
-            <DateItem key={date} />
-          ))}
-        </DateList>
-      </InputWrapper>
+    <Wrapper disabled={isLoading.toString()}>
+      {!hasGeneralDate && (
+        <InputWrapper>
+          <RangeInput
+            disabled={isLoading}
+            type="range"
+            ref={inputRef}
+            min={1}
+            max={Object.keys(dates).length}
+            onChange={handleRangeChange}
+          />
+          <DateContainer>
+            {Object.keys(dates).map((date) => (
+              <DateSpan key={date} year={date} />
+            ))}
+          </DateContainer>
+        </InputWrapper>
+      )}
     </Wrapper>
   );
 };

diff --git a/src/components/MapsSection/MapsSection.styles.tsx b/src/components/MapsSection/MapsSection.styles.tsx
@@ -141,7 +141,7 @@ export const ExpandBox = styled(Link)`
   border-radius: 6px;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
   cursor: pointer;
-  z-index: 1;
+  z-index: 0;
   transition: 0.3s;
 
   &:hover {