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

bug fixed + optimizations

This commit is contained in:
daniel31x13 2024-09-12 13:47:18 -04:00
parent 906779010e
commit 7bd3872195
6 changed files with 31 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
components/CopyButton.tsx
View File

@ -1,34 +1,30 @@
import React from "react";
import React, { useState } from "react";
type Props = {
text: string;
};
const CopyButton = ({ text }: Props) => {
const CopyButton: React.FC<Props> = ({ text }) => {
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => {
setCopied(false);
}, 1000);
} catch (err) {
console.log(err);
}
};
return (
<div
className="bi-copy text-xl text-neutral btn btn-sm btn-square btn-ghost"
onClick={() => {
try {
navigator.clipboard.writeText(text).then(() => {
const copyIcon = document.querySelector(".bi-copy");
if (copyIcon) {
copyIcon.classList.remove("bi-copy");
copyIcon.classList.add("bi-check2");
copyIcon.classList.add("text-success");
}
setTimeout(() => {
if (copyIcon) {
copyIcon.classList.remove("bi-check2");
copyIcon.classList.remove("text-success");
copyIcon.classList.add("bi-copy");
}
}, 1000);
});
} catch (err) {
console.log(err);
}
}}
className={`text-xl text-neutral btn btn-sm btn-square btn-ghost ${
copied ? "bi-check2 text-success" : "bi-copy"
}`}
onClick={handleCopy}
></div>
);
};

11
components/LinkViews/LinkComponents/LinkActions.tsx
View File

@ -17,11 +17,10 @@ import usePinLink from "@/lib/client/pinLink";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount;
className?: string;
btnStyle?: string;
};
export default function LinkActions({ link, className, btnStyle }: Props) {
export default function LinkActions({ link, btnStyle }: Props) {
const { t } = useTranslation();
const permissions = usePermissions(link.collection.id as number);
@ -60,9 +59,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
<>
{isPublicRoute ? (
<div
className={clsx(className || "top-3 right-3 absolute z-20")}
tabIndex={0}
role="button"
className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
onMouseDown={dropdownTriggerer}
onClick={() => setLinkModal(true)}
>
@ -72,9 +69,7 @@ export default function LinkActions({ link, className, btnStyle }: Props) {
</div>
) : (
<div
className={`dropdown dropdown-end absolute ${
className || "top-3 right-3"
} z-20`}
className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
>
<div
tabIndex={0}

13
components/LinkViews/LinkComponents/LinkCard.tsx
View File

@ -232,17 +232,8 @@ export default function LinkCard({ link, columns, editMode }: Props) {
{/* Overlay on hover */}
<div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
<LinkActions
link={link}
collection={collection}
className={
"top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
}
/>
<LinkPin
link={link}
className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
/>
<LinkActions link={link} collection={collection} />
<LinkPin link={link} />
</div>
);
}

15
components/LinkViews/LinkComponents/LinkList.tsx
View File

@ -135,19 +135,8 @@ export default function LinkCardCompact({ link, editMode }: Props) {
</div>
</div>
</div>
<LinkPin
link={link}
className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
btnStyle="btn-ghost"
/>
<LinkActions
link={link}
collection={collection}
className={
"absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
}
btnStyle="btn-ghost"
/>
<LinkPin link={link} btnStyle="btn-ghost" />
<LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
</div>
<div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
</>

13
components/LinkViews/LinkComponents/LinkMasonry.tsx
View File

@ -240,17 +240,8 @@ export default function LinkMasonry({ link, editMode, columns }: Props) {
{/* Overlay on hover */}
<div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-2xl duration-100"></div>
<LinkActions
link={link}
collection={collection}
className={
"top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
}
/>
<LinkPin
link={link}
className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
/>
<LinkActions link={link} collection={collection} />
<LinkPin link={link} />
</div>
);
}

5
components/LinkViews/LinkComponents/LinkPin.tsx
View File

@ -5,11 +5,10 @@ import usePinLink from "@/lib/client/pinLink";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
className?: string;
btnStyle?: string;
};
export default function LinkPin({ link, className, btnStyle }: Props) {
export default function LinkPin({ link, btnStyle }: Props) {
const pinLink = usePinLink();
const router = useRouter();
@ -18,7 +17,7 @@ export default function LinkPin({ link, className, btnStyle }: Props) {
return (
<div
className={clsx(className || "top-3 right-3 absolute")}
className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
onClick={() => pinLink(link)}
>
<div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>