Merge branch 'main' of github.com:shefing/numbers_line

shefing · Jan 22, 2024 · d677d55 · d677d55
2 parents bf4878b + 9efc995
commit d677d55
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 53 deletions.
diff --git a/public/fonts/Abraham.otf b/public/fonts/Abraham.otf
diff --git a/src/App.css b/src/App.css
@@ -5,6 +5,12 @@
   text-align: center;
 }
 
+@font-face {
+  font-family: 'Abraham';
+  src: local('abraham'), url('/fonts/Abraham.otf') format('woff');
+  font-display: swap;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;

diff --git a/src/assets/icons/Group 1299.svg → src/assets/icons/arrow-left.svg b/src/assets/icons/Group 1299.svg → src/assets/icons/arrow-left.svg
diff --git a/src/assets/icons/Group 1300.svg → src/assets/icons/arrow-right.svg b/src/assets/icons/Group 1300.svg → src/assets/icons/arrow-right.svg
diff --git a/src/assets/icons/image.png → src/assets/icons/grass.png b/src/assets/icons/image.png → src/assets/icons/grass.png
diff --git a/src/assets/icons/menuButtonClose.svg b/src/assets/icons/menuButtonClose.svg
diff --git a/src/assets/icons/menuButtonOpen.svg b/src/assets/icons/menuButtonOpen.svg
diff --git a/src/components/GrassImg.tsx b/src/components/GrassImg.tsx
@@ -1,4 +1,4 @@
-import urlImg from "../../src/assets/icons/image.png";
+import urlImg from "../../src/assets/icons/grass.png";
 
 const GrassImg = () => {
   return (

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -2,7 +2,7 @@ import LineDefinition from "./toolbar/LineDefinition";
 
 const Toolbar = () => {
   return (
-    <div className="flex justify-between bg-sky-100 absolute w-full top-0 left-0 ">
+    <div className="flex justify-between absolute w-full top-0 left-0 h-[11%] bg-[#ECF9FF]">
       <div className="flex-none">{/* TODO: add butotns */}</div>
       <div className="flex ">{/* TODO: add butotns */}</div>
       <div className="flex-none">

diff --git a/src/components/ruler/Arrows.tsx b/src/components/ruler/Arrows.tsx
@@ -1,5 +1,5 @@
-import leftArrowIcon from "../../assets/icons/Group 1299.svg";
-import rightArrowIcon from "../../assets/icons/Group 1300.svg";
+import leftArrowIcon from "../../assets/icons/arrow-left.svg";
+import rightArrowIcon from "../../assets/icons/arrow-right.svg";
 
 interface IProps {
   startIndex: number;

diff --git a/src/components/ruler/Numbers.tsx b/src/components/ruler/Numbers.tsx
@@ -19,9 +19,9 @@ const Numbers = ({ labels, startIndex, setStartIndex }: IProps) => {
       {labels.slice(startIndex, startIndex + 21).map((label) => (
         <div
           key={label}
-          className={`text-xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
+          className={` text-2xl text-color flex flex-col items-center ${flag && label % 50 == 0 ? "font-bold" : !flag && label % 5 === 0 && "font-bold"}`}
         >
-          <div className="h-3 border-l-2 border-gray-900 w-1366 flex-shrink-0" />
+          <div className="h-3 border-l-4 border-gray-900 w-1366 flex-shrink-0" />
           {label}
         </div>
       ))}

diff --git a/src/components/ruler/XAxis.tsx b/src/components/ruler/XAxis.tsx
@@ -13,12 +13,12 @@ const XAxis = ({ labels }: IProps) => {
       {labels.length == 101 ? (
         <>
           <Arrows startIndex={startIndex} setStartIndex={setStartIndex} />
-          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+          <div className="stroke-3 stroke-var-black fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
             <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
           </div>
         </>
       ) : (
-        <div className="fixed left-0 right-0 flex justify-between border-t-2 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
+        <div className="fixed left-0 right-0 flex justify-between border-t-4 border-gray-900 pt-0 mx-0 items-center pl-8 pr-8 ">
           <Numbers labels={labels} startIndex={startIndex} setStartIndex={setStartIndex} />
         </div>
       )}

diff --git a/src/components/toolbar/LineDefinition.tsx b/src/components/toolbar/LineDefinition.tsx
@@ -1,68 +1,71 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "../ui/button";
-import { LineRange } from "../../type/Line";
+import { LineRange, fontButtonClassName } from "../../type/Line";
 import { useNumbersLineContext } from "../../context/numbersLineContext";
+import openMenu from "../../assets/icons/menuButtonOpen.svg";
+import closeMenu from "../../assets/icons/menuButtonClose.svg";
 
 const LineDefinition = () => {
-  const [isMenuOpen, setMenuOpen] = useState(false);
-
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { setKind } = useNumbersLineContext();
+  const wrapperRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const handleOutsideClick = (event: any) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+    };
+  }, [isMenuOpen]);
 
   const handleButtonClick = () => {
-    setMenuOpen(!isMenuOpen);
+    setIsMenuOpen(!isMenuOpen);
   };
 
-  const closeMenu = () => {
-    setMenuOpen(false);
+  const handleMenuButtonClick = (type: LineRange) => {
+    setKind(type);
+    setIsMenuOpen(false);
   };
 
   return (
-    <div className="relative">
-      <Button className={`m-1 text-xl font-bold ${isMenuOpen ? "text-blue-600" : "text-sky-600"}`} variant="ghost" onClick={handleButtonClick}>
-        <span className="mr-3">&#x25BC;</span> הגדרת הישר
-      </Button>
+    <button
+      ref={wrapperRef}
+      className={`flex flex-col items-end  right-0 absolute  mt-[1.5%] mr-[1.5%] rounded-md  ${isMenuOpen && "shadow-2xl bg-[#009FDE]"}`}
+    >
+      <div className={`cursor-pointer flex  w-259 text-xl font-bold rounded-md ${isMenuOpen && "bg-[#009FDE]"}`} onClick={handleButtonClick}>
+        <img className="flex-shrink-0 p-5 pr-5" src={isMenuOpen ? closeMenu : openMenu} />
+        <div
+          className={`flex-shrink-0 text-capitalize p-2 font-Abraham font-normal h-[17px] text-[32px] text-[#009FDE] font-[Abraham] font-[500] ${
+            isMenuOpen && " text-[#ffffff]"
+          }`}
+        >
+          הגדרת הישר
+        </div>
+      </div>
 
       {isMenuOpen && (
-        <div className="absolute top-8 right-0 bg-sky-100 border border-gray-300 rounded-md p-2">
-          <Button
-            className="block mb-2 text-blue-600 font-bold"
-            onClick={() => {
-              setKind(LineRange.ten);
-              closeMenu();
-            }}
-          >
-            0 -10
+        <div className="flex flex-col items-end pt-8 pb-2 rounded-tl-5 right-0 rounded-md opacity-100 bg-#009FDE">
+          <Button className={fontButtonClassName} onClick={() => handleMenuButtonClick(LineRange.ten)}>
+            10-0
           </Button>
-          <Button
-            className="block mb-2 text-blue-600 font-bold"
-            onClick={() => {
-              setKind(LineRange.twenty);
-              closeMenu();
-            }}
-          >
-            0 - 20
+          <Button className={fontButtonClassName} onClick={() => handleMenuButtonClick(LineRange.twenty)}>
+            20-0
           </Button>
-          <Button
-            className="block mb-2 text-blue-600 font-bold"
-            onClick={() => {
-              setKind(LineRange.hundred);
-              closeMenu();
-            }}
-          >
-            0 - 100 (קפיצות של 1)
+          <Button className={fontButtonClassName} onClick={() => handleMenuButtonClick(LineRange.hundredCircular)}>
+            (קפיצות של 10) 100-0
           </Button>
-          <Button
-            className="block text-blue-600 font-bold"
-            onClick={() => {
-              setKind(LineRange.hundredCircular);
-              closeMenu();
-            }}
-          >
-            O0 - 100 (קפיצות של 10)
+          <Button className={fontButtonClassName} onClick={() => handleMenuButtonClick(LineRange.hundred)}>
+            (קפיצות של 1) 100-0
           </Button>
         </div>
       )}
-    </div>
+    </button>
   );
 };
 

diff --git a/src/type/Line.ts b/src/type/Line.ts
@@ -4,3 +4,4 @@ export enum LineRange {
   hundred = 101,
   hundredCircular = 10,
 }
+export const fontButtonClassName:string = "bg-white text-block m-[1rem] mb-[1rem] hover:bg-sky-100 transition rounded-[20px] font-[Abraham] text-[24px] font-[400] h-[48px]"