From ea49095b0a33e242194ef770077c24cf39696219 Mon Sep 17 00:00:00 2001 From: sccalabr <4111230+sccalabr@users.noreply.github.com> Date: Sat, 5 Oct 2024 18:16:09 -0700 Subject: [PATCH] Addressing comments --- frontend/src/App.tsx | 6 +- frontend/src/Navigation.tsx | 33 ++------ frontend/src/assets/documentation-dark.svg | 5 +- frontend/src/assets/documentation.svg | 5 +- frontend/src/assets/envelope-dark.svg | 3 + frontend/src/assets/envelope.svg | 3 + frontend/src/components/Dropdown.tsx | 94 +++++++++++---------- frontend/src/components/Help.tsx | 97 ++++++++++++++++++++++ frontend/src/components/SourceDropdown.tsx | 9 +- frontend/src/locale/i18n.ts | 2 +- 10 files changed, 174 insertions(+), 83 deletions(-) create mode 100644 frontend/src/assets/envelope-dark.svg create mode 100644 frontend/src/assets/envelope.svg create mode 100644 frontend/src/components/Help.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1455f495..176ae518 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -32,9 +32,9 @@ function MainLayout() { } export default function App() { - const [,,componentMounted] = useDarkTheme(); - if(!componentMounted) { - return
+ const [, , componentMounted] = useDarkTheme(); + if (!componentMounted) { + return
; } return (
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 621ae96b..09245d9d 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -11,7 +11,6 @@ import Discord from './assets/discord.svg'; import Expand from './assets/expand.svg'; import Github from './assets/github.svg'; import Hamburger from './assets/hamburger.svg'; -import InfoDark from './assets/info-dark.svg'; import SettingGear from './assets/settingGear.svg'; import Twitter from './assets/TwitterX.svg'; import UploadIcon from './assets/upload.svg'; @@ -41,7 +40,7 @@ import { setSourceDocs, } from './preferences/preferenceSlice'; import Upload from './upload/Upload'; -import Dropdown from './components/Dropdown'; +import Help from './components/Help'; interface NavigationProps { navOpen: boolean; @@ -305,7 +304,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { <> )}
-
@@ -360,30 +358,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {

-
-
- - { - if (selectedOption.value === 'documentation') { - window.open(' https://docs.docsgpt.cloud/', '_blank'); - } else if (selectedOption.value === 'email') { - window.location.href = `mailto:contact@arc53.com`; - } - }} - /> -
-
+
+
+
+ +
- + + + diff --git a/frontend/src/assets/documentation.svg b/frontend/src/assets/documentation.svg index f9f7c596..955d392f 100644 --- a/frontend/src/assets/documentation.svg +++ b/frontend/src/assets/documentation.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/frontend/src/assets/envelope-dark.svg b/frontend/src/assets/envelope-dark.svg new file mode 100644 index 00000000..a61bec4f --- /dev/null +++ b/frontend/src/assets/envelope-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/envelope.svg b/frontend/src/assets/envelope.svg new file mode 100644 index 00000000..a4c25032 --- /dev/null +++ b/frontend/src/assets/envelope.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx index 97c074a7..07f33650 100644 --- a/frontend/src/components/Dropdown.tsx +++ b/frontend/src/components/Dropdown.tsx @@ -47,8 +47,6 @@ function Dropdown({ }) { const dropdownRef = React.useRef(null); const [isOpen, setIsOpen] = React.useState(false); - const [dropdownPosition, setDropdownPosition] = React.useState({ top: 0 }); - const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl'; const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl'; @@ -67,33 +65,6 @@ function Dropdown({ document.removeEventListener('mousedown', handleClickOutside); }; }, []); - - const handleToggleDropdown = () => { - setIsOpen((prev) => !prev); - if (!isOpen) { - adjustDropdownPosition(); - } - }; - - const adjustDropdownPosition = () => { - if (dropdownRef.current) { - const rect = dropdownRef.current.getBoundingClientRect(); - const dropdownMenuHeight = Math.min(200, options.length * 40); // Adjust height based on options - const viewportHeight = window.innerHeight; - - // Check if dropdown overflows the bottom of the viewport - const newPosition = { - top: - rect.bottom + dropdownMenuHeight > viewportHeight - ? -dropdownMenuHeight - : 0, - left: 0, - }; - - setDropdownPosition(newPosition); - } - }; - return (
{isOpen && (
{options.map((option: any, index) => (
{typeof option === 'string' ? option - : option.name || option.label || option.description} + : option.name + ? option.name + : option.label + ? option.label + : `${ + option.value < 1e9 + ? option.value + ` (${option.description})` + : option.description + }`} {showEdit && onEdit && ( Edit { - onEdit(option); + onEdit({ + id: option.id, + name: option.name, + type: option.type, + }); setIsOpen(false); }} /> @@ -163,7 +163,11 @@ function Dropdown({ Delete )} diff --git a/frontend/src/components/Help.tsx b/frontend/src/components/Help.tsx new file mode 100644 index 00000000..b61f9c52 --- /dev/null +++ b/frontend/src/components/Help.tsx @@ -0,0 +1,97 @@ +import React, { useState, useRef, useEffect } from 'react'; +import InfoDark from '../assets/info-dark.svg'; +import PageIcon from '../assets/documentation.svg'; // Ensure this path is correct +import EmailIcon from '../assets/envelope.svg'; // Replace with your actual email icon path + +const Help = () => { + const [isOpen, setIsOpen] = useState(false); + const dropdownRef = useRef(null); + const buttonRef = useRef(null); + + const toggleDropdown = () => { + setIsOpen((prev) => !prev); + }; + + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) && + buttonRef.current && + !buttonRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + + useEffect(() => { + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const dropdownPosition = () => { + if (!buttonRef.current) return { top: '100%', left: '0' }; + + const rect = buttonRef.current.getBoundingClientRect(); + const dropdownHeight = 80; // Adjust based on the content height + const spaceBelow = window.innerHeight - rect.bottom; + + const dropdownWidth = 192; // Adjust to fit your design + const spaceRight = window.innerWidth - rect.right; + + let leftPosition = 0; // Default to align with the button + + if (spaceRight < dropdownWidth) { + leftPosition = dropdownWidth - rect.width; + } + + if (spaceBelow >= dropdownHeight) { + return { top: '100%', left: `${leftPosition}px` }; // Open downward + } else { + return { top: `${-dropdownHeight}px`, left: `${leftPosition}px` }; // Open upward + } + }; + + return ( +
+ + {isOpen && ( + + )} +
+ ); +}; + +export default Help; diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx index 6a348161..f92173a0 100644 --- a/frontend/src/components/SourceDropdown.tsx +++ b/frontend/src/components/SourceDropdown.tsx @@ -121,9 +121,12 @@ function SourceDropdown({ className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe" onClick={handleEmptyDocumentSelect} > - { - handlePostDocumentSelect(null); - }}> + { + handlePostDocumentSelect(null); + }} + > {t('none')}
diff --git a/frontend/src/locale/i18n.ts b/frontend/src/locale/i18n.ts index 674a3467..72f9ec28 100644 --- a/frontend/src/locale/i18n.ts +++ b/frontend/src/locale/i18n.ts @@ -25,7 +25,7 @@ i18n zh: { translation: zh, }, - "zh-TW": { + 'zh-TW': { translation: zhTW, }, },