forked from Kieran/snort
close graph on esc
This commit is contained in:
parent
6bef3ccf58
commit
29bba9aef3
@ -21,10 +21,12 @@ export function LogoHeader({ showText = false }) {
|
||||
<Link to="/" className="logo" onClick={handleLogoClick}>
|
||||
<h1 className="flex flex-row items-center">
|
||||
<img src={CONFIG.navLogo} className="w-8 h-8" />
|
||||
{showText && <div className="md:hidden xl:inline ml-2">
|
||||
{extra()}
|
||||
{CONFIG.appName}
|
||||
</div>}
|
||||
{showText && (
|
||||
<div className="md:hidden xl:inline ml-2">
|
||||
{extra()}
|
||||
{CONFIG.appName}
|
||||
</div>
|
||||
)}
|
||||
</h1>
|
||||
{currentSubscription && (
|
||||
<div className="flex items-center g4 text-sm font-semibold tracking-wider">
|
||||
|
@ -52,7 +52,7 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
|
||||
const c = isActive
|
||||
? "py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
|
||||
: "py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
|
||||
return classNames(c, { "xl:ml-1": !narrow })
|
||||
return classNames(c, { "xl:ml-1": !narrow });
|
||||
};
|
||||
|
||||
export default function NavSidebar({ narrow = false }) {
|
||||
@ -65,13 +65,16 @@ export default function NavSidebar({ narrow = false }) {
|
||||
const profile = useUserProfile(publicKey);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const className = classNames({"xl:w-56 xl:gap-3 xl:items-start": !narrow}, "sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2")
|
||||
const className = classNames(
|
||||
{ "xl:w-56 xl:gap-3 xl:items-start": !narrow },
|
||||
"sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2",
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<LogoHeader showText={!narrow} />
|
||||
<div className="flex-grow flex flex-col justify-between">
|
||||
<div className={classNames({"xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
|
||||
<div className={classNames({ "xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
|
||||
{MENU_ITEMS.map(item => {
|
||||
if (!item.nonLoggedIn && !publicKey) {
|
||||
return "";
|
||||
@ -91,9 +94,11 @@ export default function NavSidebar({ narrow = false }) {
|
||||
<div className="mt-2">
|
||||
<button onClick={() => navigate("/login/sign-up")} className="flex flex-row items-center primary">
|
||||
<Icon name="sign-in" size={24} />
|
||||
{!narrow && <span className="hidden xl:inline ml-3">
|
||||
<FormattedMessage defaultMessage="Sign up" id="8HJxXG"/>
|
||||
</span>}
|
||||
{!narrow && (
|
||||
<span className="hidden xl:inline ml-3">
|
||||
<FormattedMessage defaultMessage="Sign up" id="8HJxXG" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
@ -6,6 +6,8 @@ import * as THREE from "three";
|
||||
import { defaultAvatar } from "../SnortUtils";
|
||||
import { proxyImg } from "@/Hooks/useImgProxy";
|
||||
import { LoginStore } from "@/Login";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
import Icon from "@/Icons/Icon";
|
||||
|
||||
interface GraphNode {
|
||||
id: UID;
|
||||
@ -71,6 +73,27 @@ const NetworkGraph = () => {
|
||||
// const [direction, setDirection] = useState(Direction.OUTBOUND);
|
||||
// const [renderLimit, setRenderLimit] = useState(NODE_LIMIT);
|
||||
|
||||
const handleCloseGraph = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: { key: string; }) => {
|
||||
if (event.key === "Escape") {
|
||||
handleCloseGraph();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
}
|
||||
|
||||
// Cleanup function to remove the event listener
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const updateConfig = async (changes: Partial<GraphConfig>) => {
|
||||
setGraphConfig(old => {
|
||||
const newConfig = Object.assign({}, old, changes);
|
||||
@ -197,13 +220,13 @@ const NetworkGraph = () => {
|
||||
setOpen(true);
|
||||
refreshData();
|
||||
}}>
|
||||
Show graph
|
||||
<FormattedMessage defaultMessage="Show graph" id="ha8JKG" />
|
||||
</button>
|
||||
)}
|
||||
{open && graphData && (
|
||||
<div className="fixed top-0 left-0 right-0 bottom-0 z-20">
|
||||
<button className="absolute top-6 right-6 z-30 btn hover:bg-gray-900" onClick={() => setOpen(false)}>
|
||||
X
|
||||
<button className="absolute top-6 right-6 z-30 btn hover:bg-gray-900" onClick={handleCloseGraph}>
|
||||
<Icon name="x" size={24} />
|
||||
</button>
|
||||
<div className="absolute top-6 right-0 left-0 z-20 flex flex-col content-center justify-center text-center">
|
||||
<div className="text-center pb-2">Degrees of separation</div>
|
||||
|
@ -1122,6 +1122,9 @@
|
||||
"hY4lzx": {
|
||||
"defaultMessage": "Supports"
|
||||
},
|
||||
"ha8JKG": {
|
||||
"defaultMessage": "Show graph"
|
||||
},
|
||||
"hicxcO": {
|
||||
"defaultMessage": "Show replies"
|
||||
},
|
||||
|
@ -369,6 +369,7 @@
|
||||
"hMzcSq": "Messages",
|
||||
"hRTfTR": "PRO",
|
||||
"hY4lzx": "Supports",
|
||||
"ha8JKG": "Show graph",
|
||||
"hicxcO": "Show replies",
|
||||
"hmZ3Bz": "Media",
|
||||
"hniz8Z": "here",
|
||||
|
Loading…
Reference in New Issue
Block a user