xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

fixed the dropdown

This commit is contained in:
daniel31x13 2023-10-28 12:50:11 -04:00
parent db47a2a142
commit 2856e23a4a
11 changed files with 120 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Checkbox.tsx
View File

@ -11,7 +11,9 @@ type Props = {
export default function Checkbox({ label, state, className, onClick }: Props) {
return (
<label className={`cursor-pointer flex items-center gap-2 ${className}`}>
<label
className={`cursor-pointer flex items-center gap-2 ${className || ""}`}
>
<input
type="checkbox"
checked={state}

12
components/ClickAwayHandler.tsx
View File

@ -5,6 +5,7 @@ type Props = {
onClickOutside: Function;
className?: string;
style?: React.CSSProperties;
onMount?: (rect: DOMRect) => void;
};
function useOutsideAlerter(
@ -32,10 +33,19 @@ export default function ClickAwayHandler({
onClickOutside,
className,
style,
onMount,
}: Props) {
const wrapperRef = useRef(null);
const wrapperRef = useRef<HTMLDivElement | null>(null);
useOutsideAlerter(wrapperRef, onClickOutside);
useEffect(() => {
if (wrapperRef.current && onMount) {
const rect = wrapperRef.current.getBoundingClientRect();
onMount(rect); // Pass the bounding rectangle to the parent
}
}, []);
return (
<div ref={wrapperRef} className={className} style={style}>
{children}

4
components/CollectionCard.tsx
View File

@ -40,7 +40,9 @@ export default function CollectionCard({ collection, className }: Props) {
theme === "dark" ? "#262626" : "#f3f4f6"
} 50%, ${theme === "dark" ? "#262626" : "#f9fafb"} 100%)`,
}}
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${className}`}
className={`border border-solid border-sky-100 dark:border-neutral-700 self-stretch min-h-[12rem] rounded-2xl shadow duration-100 hover:shadow-none hover:opacity-80 group relative ${
className || ""
}`}
>
<div
onClick={() => setExpandDropdown(!expandDropdown)}

63
components/Dropdown.tsx
View File

@ -1,5 +1,5 @@
import Link from "next/link";
import React, { MouseEventHandler } from "react";
import React, { MouseEventHandler, useEffect, useState } from "react";
import ClickAwayHandler from "./ClickAwayHandler";
type MenuItem =
@ -19,26 +19,78 @@ type Props = {
onClickOutside: Function;
className?: string;
items: MenuItem[];
points: { x: number; y: number };
style?: React.CSSProperties;
width: number; // in rem
};
export default function Dropdown({
style,
points,
onClickOutside,
className,
items,
width,
}: Props) {
const [pos, setPos] = useState<{ x: number; y: number }>();
const [dropdownHeight, setDropdownHeight] = useState<number>();
function convertRemToPixels(rem: number) {
return (
rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
);
}
useEffect(() => {
const dropdownWidth = convertRemToPixels(width);
let finalX = points.x;
let finalY = points.y;
// Check for x-axis overflow (left side)
if (points.x + dropdownWidth > window.innerWidth) {
finalX = points.x - dropdownWidth;
}
// Check for y-axis overflow (bottom side)
if (dropdownHeight && points.y + dropdownHeight > window.innerHeight) {
finalY =
window.innerHeight - (dropdownHeight + (window.innerHeight - points.y));
}
setPos({ x: finalX, y: finalY });
}, [points, width, dropdownHeight]);
useEffect(() => {
const dropdownWidth = convertRemToPixels(width);
if (points.x + dropdownWidth > window.innerWidth) {
setPos({ x: points.x - dropdownWidth, y: points.y });
} else setPos(points);
}, [points, width]);
return (
pos && (
<ClickAwayHandler
style={style}
onMount={(e) => {
setDropdownHeight(e.height);
}}
style={{
position: "fixed",
top: `${pos?.y}px`,
left: `${pos?.x}px`,
}}
onClickOutside={onClickOutside}
className={`${className} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
className={`${
className || ""
} py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20 w-[${width}rem]`}
>
{items.map((e, i) => {
const inner = e && (
<div className="cursor-pointer rounded-md">
<div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
<p className="text-black dark:text-white select-none">{e.name}</p>
<p className="text-black dark:text-white select-none">
{e.name}
</p>
</div>
</div>
);
@ -56,5 +108,6 @@ export default function Dropdown({
);
})}
</ClickAwayHandler>
)
);
}

13
components/LinkCard.tsx
View File

@ -132,14 +132,15 @@ export default function LinkCard({ link, count, className }: Props) {
return (
<div
className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${className}`}
className={`h-fit border border-solid border-sky-100 dark:border-neutral-700 bg-gradient-to-tr from-slate-200 dark:from-neutral-800 from-10% to-gray-50 dark:to-[#303030] via-20% shadow hover:shadow-none duration-100 rounded-2xl relative group ${
className || ""
}`}
>
{(permissions === true ||
permissions?.canUpdate ||
permissions?.canDelete) && (
<div
onClick={(e) => {
console.log(expandDropdown);
setExpandDropdown({ x: e.clientX, y: e.clientY });
}}
id={"expand-dropdown" + link.id}
@ -228,11 +229,7 @@ export default function LinkCard({ link, count, className }: Props) {
</div>
{expandDropdown ? (
<Dropdown
style={{
position: "fixed",
top: `${expandDropdown.y}px`,
left: `${expandDropdown.x}px`,
}}
points={{ x: expandDropdown.x, y: expandDropdown.y }}
items={[
permissions === true
? {
@ -278,7 +275,7 @@ export default function LinkCard({ link, count, className }: Props) {
if (target.id !== "expand-dropdown" + link.id)
setExpandDropdown(false);
}}
className="w-40"
width={10}
/>
) : null}
</div>

2
components/Modal/index.tsx
View File

@ -14,7 +14,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
<div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex justify-center items-center fade-in z-30">
<ClickAwayHandler
onClickOutside={toggleModal}
className={`m-auto ${className}`}
className={`m-auto ${className || ""}`}
>
<div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
<div

8
components/ProfilePhoto.tsx
View File

@ -24,7 +24,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
return !image ? (
<div
className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${className}`}
className={`bg-sky-600 dark:bg-sky-600 text-white h-10 w-10 aspect-square shadow rounded-full border border-slate-200 dark:border-neutral-700 flex items-center justify-center ${
className || ""
}`}
>
<FontAwesomeIcon icon={faUser} className="w-1/2 h-1/2 aspect-square" />
</div>
@ -36,7 +38,9 @@ export default function ProfilePhoto({ src, className, priority }: Props) {
width={112}
priority={priority}
draggable={false}
className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${className}`}
className={`h-10 w-10 bg-sky-600 dark:bg-sky-600 shadow rounded-full aspect-square border border-slate-200 dark:border-neutral-700 ${
className || ""
}`}
/>
);
}

4
components/SettingsSidebar.tsx
View File

@ -32,7 +32,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
return (
<div
className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${
className || ""
}`}
>
<div className="flex flex-col gap-1">
<Link href="/settings/account">

4
components/Sidebar.tsx
View File

@ -51,7 +51,9 @@ export default function Sidebar({ className }: { className?: string }) {
return (
<div
className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${className}`}
className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 px-2 z-20 ${
className || ""
}`}
>
<div className="flex justify-center gap-2 mt-2">
<Link

2
components/SubmitButton.tsx
View File

@ -25,7 +25,7 @@ export default function SubmitButton({
loading
? "bg-sky-600 cursor-auto"
: "bg-sky-700 hover:bg-sky-600 cursor-pointer"
} ${className}`}
} ${className || ""}`}
onClick={() => {
if (!loading && onClick) onClick();
}}

4
components/TextInput.tsx
View File

@ -27,7 +27,9 @@ export default function TextInput({
value={value}
onChange={onChange}
onKeyDown={onKeyDown}
className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${className}`}
className={`w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-950 border-solid border outline-none focus:border-sky-300 focus:dark:border-sky-600 duration-100 ${
className || ""
}`}
/>
);
}