From 249c820e505ad25638985ca99b9006529650e4f2 Mon Sep 17 00:00:00 2001 From: lifeparticle Date: Mon, 9 Oct 2023 22:49:51 +1100 Subject: [PATCH] fix path issue --- ui/public/resource/icon.json | 48 +++++++++++++++++++++++ ui/src/hooks/useParamsValue.ts | 1 - ui/src/pages/About/About.module.scss | 3 +- ui/src/pages/Colors/ColorPicker/index.tsx | 32 +++++++++------ ui/src/pages/Home/Home.module.scss | 2 +- ui/src/pages/Tools/Diagramming/index.tsx | 43 +++++++++++++++++++- ui/src/styles/typography.css | 18 ++++----- 7 files changed, 121 insertions(+), 26 deletions(-) diff --git a/ui/public/resource/icon.json b/ui/public/resource/icon.json index f45e264d..bfd8f47e 100644 --- a/ui/public/resource/icon.json +++ b/ui/public/resource/icon.json @@ -154,5 +154,53 @@ "name": "" } ] + }, + { + "name": "iconsax", + "category": "Icons", + "subCategory": ["React", "Frontend"], + "url": "https://iconsax.io/", + "socials": [ + { + "url": "", + "name": "" + } + ] + }, + { + "name": "Iconizer", + "category": "Icons", + "subCategory": ["React", "Frontend"], + "url": "https://www.iconizer.io/", + "socials": [ + { + "url": "", + "name": "" + } + ] + }, + { + "name": "Iconly", + "category": "Icons", + "subCategory": ["React", "Frontend"], + "url": "https://iconly.pro/", + "socials": [ + { + "url": "", + "name": "" + } + ] + }, + { + "name": "Flaticon", + "category": "Icons", + "subCategory": ["React", "Frontend"], + "url": "https://www.flaticon.com/", + "socials": [ + { + "url": "", + "name": "" + } + ] } ] diff --git a/ui/src/hooks/useParamsValue.ts b/ui/src/hooks/useParamsValue.ts index 6745fd3e..558e4009 100644 --- a/ui/src/hooks/useParamsValue.ts +++ b/ui/src/hooks/useParamsValue.ts @@ -27,7 +27,6 @@ const useParamsValue = (initialParams: Params) => { for (const key in initialParams) { if (initialParams[key]) { const element = initialParams[key]; - console.log("element", element); updateParamsValue(key, element); hasRan.current = true; } diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss index dc93ece3..7020ae4e 100644 --- a/ui/src/pages/About/About.module.scss +++ b/ui/src/pages/About/About.module.scss @@ -25,10 +25,9 @@ rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1) ), - url("src/assets/About/card_bg.jpg") no-repeat left / cover; + url("../../assets/About/card_bg.jpg") no-repeat left / cover; background-blend-mode: color-dodge; - object-fit: cover; background-color: #9c9c9c98; display: flex; diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx index 2432c42c..e165d958 100644 --- a/ui/src/pages/Colors/ColorPicker/index.tsx +++ b/ui/src/pages/Colors/ColorPicker/index.tsx @@ -23,20 +23,18 @@ const ColorPicker: React.FC = () => { format: INITIAL_FORMAT, }); - const [color, setColor] = useState(String(searchParams.get("color"))); + const [colorPickerRan, setColorPickerRan] = useState(false); + const [formatState, setFormatState] = useState(""); + const color = String(searchParams.get("color")); const format = String(searchParams.get("format")) as FormatType; const colors = useMemo(() => calculateColors(color), [color]); - const debouncedSearchTerm = useDebounce(color); + const debouncedSearchTerm = useDebounce(formatState); useEffect(() => { - updateParamsValue("color", debouncedSearchTerm); - }, [debouncedSearchTerm, updateParamsValue]); - - const handleInputChange = (e: React.ChangeEvent) => { - const inputValue = e.target.value; - setColor(inputValue); - updateParamsValue("format", determineFormat(inputValue)); - }; + if (debouncedSearchTerm && !colorPickerRan) { + updateParamsValue("color", debouncedSearchTerm); + } + }, [debouncedSearchTerm, updateParamsValue, colorPickerRan]); return (
@@ -47,7 +45,14 @@ const ColorPicker: React.FC = () => { { + updateParamsValue("color", e.target.value); + setColorPickerRan(true); + updateParamsValue( + "format", + determineFormat(e.target.value) + ); + }} type="text" /> { { + setFormatState(value); + setColorPickerRan(false); + }} size="xl" /> diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss index fe9a8d64..34b206b4 100644 --- a/ui/src/pages/Home/Home.module.scss +++ b/ui/src/pages/Home/Home.module.scss @@ -23,7 +23,7 @@ gap: var(--bt-size-10); &_title { text-align: left; - font-family: "Pixelify Sans"; + // font-family: var(--font-pixelify-sans); } &_paragraph { text-align: left; diff --git a/ui/src/pages/Tools/Diagramming/index.tsx b/ui/src/pages/Tools/Diagramming/index.tsx index f513876e..3c3d1144 100644 --- a/ui/src/pages/Tools/Diagramming/index.tsx +++ b/ui/src/pages/Tools/Diagramming/index.tsx @@ -1,12 +1,53 @@ import { Excalidraw } from "@excalidraw/excalidraw"; import style from "./Diagramming.module.scss"; import useMode from "hooks/useMode"; +// import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types"; +// import { ExcalidrawInitialDataState } from "@excalidraw/excalidraw/types/types"; +// import { useRef, useState } from "react"; +// import useCombinedKeyPress from "hooks/useCombinedKeyPress"; const Diagramming = () => { const { isDarkMode } = useMode(); + // const lastElementsRef = useRef([]); + // const [btEcalidraw, setBtEcalidraw] = + // useState({ + // elements: [], + // }); + + // useCombinedKeyPress(() => { + // console.log("Element removed"); + // if ( + // btEcalidraw && + // btEcalidraw.elements && + // btEcalidraw.elements.length > 0 + // ) { + // const newElements = btEcalidraw.elements.slice(0, -1); // Remove the last element + // setBtEcalidraw({ + // ...btEcalidraw, + // elements: newElements, + // }); + // console.log("Element removed"); + // } + // }, "KeyZ"); + + // const onChange = (elements: readonly ExcalidrawElement[]) => { + // if (elements !== lastElementsRef.current) { + // setBtEcalidraw((prevData) => ({ + // ...prevData, + // elements: elements, + // })); + // lastElementsRef.current = elements; + // console.log("btEcalidraw", btEcalidraw); + // } + // }; + return (
- +
); }; diff --git a/ui/src/styles/typography.css b/ui/src/styles/typography.css index e5f47103..0c7ff669 100644 --- a/ui/src/styles/typography.css +++ b/ui/src/styles/typography.css @@ -1,22 +1,22 @@ :where(html) { @font-face { - font-family: "Pixelify Sans"; - src: url("./src/assets/fonts/PixelifySans-Regular.ttf") + font-family: "AAA"; + src: url("./../assets/fonts/PixelifySans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; } - @font-face { + /* @font-face { font-family: "FreightText"; - src: url("./src/assets/fonts/fFreightText-Light.otf") format("truetype"); + src: url("./src/assets/fonts/FreightText-Light.otf") format("truetype"); font-weight: 400; font-style: normal; - } + } */ - --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, - Cantarell, Noto Sans, sans-serif; + /* --font-sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, + Cantarell, Noto Sans, sans-serif; */ - --font-pixelify-sans: "Pixelify Sans", system-ui, -apple-system, Segoe UI, - Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-pixelify-sans: "AAA", system-ui, -apple-system, Segoe UI, Roboto, + Ubuntu, Cantarell, Noto Sans, sans-serif, Aacute; }