Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: now search dialog is always on top of other elements #4047

Merged
merged 4 commits into from
Aug 27, 2024
Merged

fix: now search dialog is always on top of other elements #4047

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
36845fd
fix: now search dialog is always on top of other elements
nickytonline Aug 27, 2024
e4a2ea8
removed unused JSX snippet
nickytonline Aug 27, 2024
a482d9a
wip
nickytonline Aug 27, 2024
a21fe0b
cleaned up some styles
nickytonline Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 49 additions & 48 deletions components/organisms/SearchDialog/search-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import useDebounceTerm from "lib/hooks/useDebounceTerm";
import useIsMacOS from "lib/hooks/useIsMacOS";
import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
import { useSearchRepos } from "lib/hooks/useSearchRepos";
import { Dialog, DialogContent } from "components/molecules/Dialog/dialog";

const SearchDialog = () => {
useLockBody();
Expand All @@ -26,6 +27,7 @@ const SearchDialog = () => {
const [isSearching, setIsSearching] = useState(false);
const [isSearchError, setIsSearchError] = useState(false);
const setOpenSearch = store((state) => state.setOpenSearch);
const openSearch = store((state) => state.openSearch);
const debouncedSearchTerm = useDebounceTerm(searchTerm, 300);
const {
data: repoData,
Expand Down Expand Up @@ -136,50 +138,56 @@ const SearchDialog = () => {
};

return (
<div className="fixed left-0 top-0 z-auto p-5 w-full h-full flex justify-center bg-white/30">
<div className="absolute w-full h-full left-0 top-0 z-50 backdrop-blur-sm" onClick={() => setOpenSearch(false)} />
<div
className="flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
onMouseMove={() => cursor !== -1 && setCursor(-1)}
<Dialog open={openSearch} onOpenChange={setOpenSearch}>
nickytonline marked this conversation as resolved.
Show resolved Hide resolved
<DialogContent
className="fixed top-2 lg:top-4 flex justify-center !pb-0 lg:!p-0 bg-transparent !w-full"
onPointerDownOutside={() => {
setOpenSearch(false);
}}
>
<div className="flex w-full h-full items-center border-b p-2 pl-3">
{isSearching ? (
<div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
) : (
<FaSearch className="text-light-slate-9" fontSize={16} />
)}
<input
autoFocus
className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
isSearchError && setIsSearchError(false);
}}
onKeyDown={handleKeyboardCtrl}
/>
<Text keyboard className="text-gray-600 !border-b !px-1">
{isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
</Text>
</div>
<div className="w-full h-full flex flex-col items-center">
{searchTerm.length < 3 ? (
<SearchInfo />
) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
<Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
<HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
We couldn&apos;t find any users or repositories with that name
<div
className="mx-1 md:mx-2 flex flex-col w-full max-w-2xl h-fit max-h-full bg-white shadow-xl border transition rounded-lg ring-light-slate-6 relative z-50 overflow-hidden"
onMouseMove={() => cursor !== -1 && setCursor(-1)}
>
<div className="flex w-full h-full items-center border-b p-2 pl-3">
{isSearching ? (
<div className="flex-none w-4 h-4 rounded-full border-2 border-light-slate-9 border-b-light-slate-5 border-r-light-slate-5 animate-spin" />
) : (
<FaSearch className="text-light-slate-9" fontSize={16} />
)}
<input
autoFocus
className="w-full pl-2 text-sm font-semibold text-slate-700 focus:outline-none"
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
isSearchError && setIsSearchError(false);
}}
onKeyDown={handleKeyboardCtrl}
/>
<Text keyboard className="text-gray-600 !border-b !px-1">
{isMac ? "⌘K" : <span className="text-xs py-2 px-1">CTRL+K</span>}
</Text>
) : (
<>
<section className="flex flex-col w-full">{renderUserSearchState()}</section>
<hr />
<section className="flex flex-col w-full">{renderRepoSearchState()}</section>
</>
)}
</div>
<div className="w-full h-full flex flex-col items-center">
{searchTerm.length < 3 ? (
<SearchInfo />
) : isSearchError && !isSearching && (repoDataError || repoData.length === 0) ? (
<Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
<HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
We couldn&apos;t find any users or repositories with that name
</Text>
) : (
<>
<section className="flex flex-col w-full">{renderUserSearchState()}</section>
<hr />
<section className="flex flex-col w-full">{renderRepoSearchState()}</section>
</>
)}
</div>
</div>
</div>
</div>
</DialogContent>
</Dialog>
);
};

Expand Down Expand Up @@ -237,13 +245,6 @@ const SearchLoading = () => (
</div>
);

const SearchError = () => (
<Text className="block w-full py-1 px-4 text-sauced-orange !font-normal leading-6">
<HiOutlineExclamation className="text-sauced-orange inline-flex mr-2.5" fontSize={20} />
We couldn&apos;t find any users or repositories with that name
</Text>
);

const SearchResult = ({ result, cursor }: { result: GhUser[]; cursor: number }) => (
<div className="w-full py-1 overflow-hidden text-gray-600">
<Text className="block w-full py-1 px-4">Users</Text>
Expand Down
Loading