Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor, better handle mouseover

Browse Source
This commit is contained in:
Michael Shamoon 2022-10-19 13:55:18 -07:00
parent db9633496b
commit ba4a1eb646
2 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/search.jsx → src/components/quicklaunch.jsx
View File

@ -4,7 +4,7 @@ import classNames from "classnames";
import { resolveIcon } from "./services/item"; import { resolveIcon } from "./services/item";
export default function HomepageSearch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) { export default function QuickLaunch({bookmarksAndServices, searchString, setSearchString, isOpen, close}) {
const { t } = useTranslation(); const { t } = useTranslation();
const searchField = useRef(); const searchField = useRef();
@ -37,6 +37,10 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
} }
} }
function handleItemHover(event) {
setCurrentItemIndex(parseInt(event.target?.dataset?.index));
}
function handleItemClick() { function handleItemClick() {
resetAndClose(); resetAndClose();
} }
@ -84,9 +88,9 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
{results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto"> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
{results.map((r, i) => ( {results.map((r, i) => (
<li key={r.name}> <li key={r.name}>
<a className={classNames( <a data-index={i} onMouseEnter={handleItemHover} className={classNames(
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50", i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
"flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30", "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
)} href={r.href} target="_blank" rel="noreferrer" onClick={handleItemClick}> )} href={r.href} target="_blank" rel="noreferrer" onClick={handleItemClick}>
<div className="flex flex-row items-center mr-4"> <div className="flex flex-row items-center mr-4">
<div className="w-5 text-xs mr-4"> <div className="w-5 text-xs mr-4">

4
src/pages/index.jsx
View File

@ -21,7 +21,7 @@ import { SettingsContext } from "utils/contexts/settings";
import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response"; import { bookmarksResponse, servicesResponse, widgetsResponse } from "utils/config/api-response";
import ErrorBoundary from "components/errorboundry"; import ErrorBoundary from "components/errorboundry";
import themes from "utils/styles/themes"; import themes from "utils/styles/themes";
import HomepageSearch from "components/search"; import QuickLaunch from "components/quicklaunch";
const ThemeToggle = dynamic(() => import("components/toggles/theme"), { const ThemeToggle = dynamic(() => import("components/toggles/theme"), {
ssr: false, ssr: false,
@ -236,7 +236,7 @@ function Home({ initialSettings }) {
headerStyles[initialSettings.headerStyle || "underlined"] headerStyles[initialSettings.headerStyle || "underlined"]
)} )}
> >
<HomepageSearch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} /> <QuickLaunch bookmarksAndServices={bookmarksAndServices} searchString={searchString} setSearchString={setSearchString} isOpen={searching} close={setSearching} />
{widgets && ( {widgets && (
<> <>
{widgets {widgets