nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 20:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

user details page

Browse Source
This commit is contained in:
nyne
2025-05-14 16:48:52 +08:00
parent cbac071dd2
commit 3b7d52a7a8
20 changed files with 450 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/navigator.tsx
View File

@@ -74,7 +74,11 @@ function UserButton() {
id={"navi_dropdown_menu"}
tabIndex={0}
className="menu dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow">
<li><a onClick={() => navigate(`/user/${app.user?.id}`)}>{t("My Profile")}</a></li>
<li><a onClick={() => {
navigate(`/user/${app.user?.username}`);
const menu = document.getElementById("navi_dropdown_menu") as HTMLUListElement;
menu.blur();
}}>{t("My Profile")}</a></li>
<li><a onClick={() => {
navigate(`/publish`);
const menu = document.getElementById("navi_dropdown_menu") as HTMLUListElement;

84
frontend/src/components/popup.tsx
View File

@@ -2,60 +2,60 @@ import React from "react";
import { createRoot } from "react-dom/client";
export default function showPopup(content: React.ReactNode, element: HTMLElement) {
const eRect = element.getBoundingClientRect();
const eRect = element.getBoundingClientRect();
const div = document.createElement("div");
div.style.position = "fixed";
if (eRect.x > window.innerWidth / 2) {
div.style.right = `${window.innerWidth - eRect.x}px`;
} else {
div.style.left = `${eRect.x}px`;
}
if (eRect.y > window.innerHeight / 2) {
div.style.bottom = `${window.innerHeight - eRect.y}px`;
} else {
div.style.top = `${eRect.y}px`;
}
const div = document.createElement("div");
div.style.position = "fixed";
if (eRect.x > window.innerWidth / 2) {
div.style.right = `${window.innerWidth - eRect.x}px`;
} else {
div.style.left = `${eRect.x}px`;
}
if (eRect.y > window.innerHeight / 2) {
div.style.bottom = `${window.innerHeight - eRect.y}px`;
} else {
div.style.top = `${eRect.y}px`;
}
div.style.zIndex = "9999";
div.className = "animate-appearance-in";
div.style.zIndex = "9999";
div.className = "animate-appearance-in";
document.body.appendChild(div);
document.body.appendChild(div);
const mask = document.createElement("div");
const mask = document.createElement("div");
const close = () => {
console.log("close popup");
document.body.removeChild(div);
document.body.removeChild(mask);
};
const close = () => {
console.log("close popup");
document.body.removeChild(div);
document.body.removeChild(mask);
};
mask.style.position = "fixed";
mask.style.top = "0";
mask.style.left = "0";
mask.style.width = "100%";
mask.style.height = "100%";
mask.style.zIndex = "9998";
mask.onclick = close;
document.body.appendChild(mask);
mask.style.position = "fixed";
mask.style.top = "0";
mask.style.left = "0";
mask.style.width = "100%";
mask.style.height = "100%";
mask.style.zIndex = "9998";
mask.onclick = close;
document.body.appendChild(mask);
createRoot(div).render(<context.Provider value={close}>
{content}
</context.Provider>)
createRoot(div).render(<context.Provider value={close}>
{content}
</context.Provider>)
}
const context = React.createContext<() => void>(() => {});
const context = React.createContext<() => void>(() => { });
export function useClosePopup() {
return React.useContext(context);
return React.useContext(context);
}
export function PopupMenuItem({ children, onClick }: { children: React.ReactNode, onClick: () => void }) {
const close = useClosePopup();
return <li onClick={() => {
close();
onClick();
}}>
{children}
</li>
const close = useClosePopup();
return <li onClick={() => {
close();
onClick();
}}>
{children}
</li>
}