0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1881 from benphelps/fix/issue-1878

Browse source 
Fix location of quicklaunch, some focus issues
This commit is contained in:
shamoon 2023-08-29 09:37:58 -07:00 • committed by GitHub
commit 3b05655fb0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/quicklaunch.jsx
View file

@ -61,7 +61,6 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
} }
} }
function handleItemHover(event) { function handleItemHover(event) {
setCurrentItemIndex(parseInt(event.target?.dataset?.index, 10)); setCurrentItemIndex(parseInt(event.target?.dataset?.index, 10));
} }
@ -71,6 +70,16 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
openCurrentItem(event.metaKey); openCurrentItem(event.metaKey);
} }
function handleItemKeyDown(event) {
if (!isOpen) return;
// native button handles other keys
if (event.key === "Escape") {
closeAndReset();
event.preventDefault();
}
}
useEffect(() => { useEffect(() => {
if (searchString.length === 0) setResults([]); if (searchString.length === 0) setResults([]);
else { else {
@ -162,10 +171,10 @@ export default function QuickLaunch({servicesAndBookmarks, searchString, setSear
{results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2"> {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto m-2">
{results.map((r, i) => ( {results.map((r, i) => (
<li key={r.container ?? r.app ?? `${r.name}-${r.href}`}> <li key={r.container ?? r.app ?? `${r.name}-${r.href}`}>
<button type="button" data-index={i} onMouseEnter={handleItemHover} className={classNames( <button type="button" data-index={i} onMouseEnter={handleItemHover} onClick={handleItemClick} onKeyDown={handleItemKeyDown} className={classNames(
"flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200", "flex flex-row w-full items-center justify-between rounded-md text-sm md:text-xl py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200",
i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50", i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
)} onClick={handleItemClick}> )}>
<div className="flex flex-row items-center mr-4 pointer-events-none"> <div className="flex flex-row items-center mr-4 pointer-events-none">
{(r.icon || r.abbr) && <div className="w-5 text-xs mr-4"> {(r.icon || r.abbr) && <div className="w-5 text-xs mr-4">
{r.icon && <ResolvedIcon icon={r.icon} />} {r.icon && <ResolvedIcon icon={r.icon} />}

19
src/pages/index.jsx
View file

@ -213,8 +213,8 @@ function Home({ initialSettings }) {
useEffect(() => { useEffect(() => {
function handleKeyDown(e) { function handleKeyDown(e) {
if (e.target.tagName === "BODY") { if (e.target.tagName === "BODY" || e.target.id === "inner_wrapper") {
if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { if (String.fromCharCode(e.keyCode).match(/(\w|\s)/g) && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.code === "Tab")) {
setSearching(true); setSearching(true);
} else if (e.key === "Escape") { } else if (e.key === "Escape") {
setSearchString(""); setSearchString("");
@ -255,13 +255,6 @@ function Home({ initialSettings }) {
<meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} /> <meta name="theme-color" content={themes[initialSettings.color || "slate"][initialSettings.theme || "dark"]} />
</Head> </Head>
<div className="relative container m-auto flex flex-col justify-start z-10 h-full"> <div className="relative container m-auto flex flex-col justify-start z-10 h-full">
<div
className={classNames(
"flex flex-row flex-wrap justify-between",
headerStyles[headerStyle],
initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
)}
>
<QuickLaunch <QuickLaunch
servicesAndBookmarks={servicesAndBookmarks} servicesAndBookmarks={servicesAndBookmarks}
searchString={searchString} searchString={searchString}
@ -270,6 +263,13 @@ function Home({ initialSettings }) {
close={setSearching} close={setSearching}
searchProvider={settings.quicklaunch?.hideInternetSearch ? null : searchProvider} searchProvider={settings.quicklaunch?.hideInternetSearch ? null : searchProvider}
/> />
<div
className={classNames(
"flex flex-row flex-wrap justify-between",
headerStyles[headerStyle],
initialSettings.cardBlur !== undefined && headerStyle === "boxed" && `backdrop-blur${initialSettings.cardBlur.length ? '-' : ""}${initialSettings.cardBlur}`
)}
>
{widgets && ( {widgets && (
<> <>
{widgets {widgets
@ -375,6 +375,7 @@ export default function Wrapper({ initialSettings, fallback }) {
> >
<div <div
id="inner_wrapper" id="inner_wrapper"
tabindex="-1"
className={classNames( className={classNames(
'fixed overflow-auto w-full h-full', 'fixed overflow-auto w-full h-full',
backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`, backgroundBlur && `backdrop-blur${initialSettings.background.blur.length ? '-' : ""}${initialSettings.background.blur}`,