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

improved UI

This commit is contained in:
daniel31x13 2023-12-05 15:17:36 -05:00
parent 0e6b47d068
commit f8811a49c0
12 changed files with 92 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1 @@
{}

2
components/CollectionCard.tsx
View File

@ -65,7 +65,7 @@ export default function CollectionCard({ collection, className }: Props) {
return (
<div className="relative">
<div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-10">
<div className="dropdown dropdown-bottom dropdown-end absolute top-3 right-3 z-20">
<div
tabIndex={0}
role="button"

109
components/LinkCard.tsx
View File

@ -13,7 +13,11 @@ import Image from "next/image";
import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections";
import useAccountStore from "@/store/account";
import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
import {
faCalendarDays,
faFileImage,
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
import isValidUrl from "@/lib/shared/isValidUrl";
@ -210,62 +214,79 @@ export default function LinkCard({ link, count, className }: Props) {
<div
onClick={() => router.push("/links/" + link.id)}
className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-4"
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
>
{url && (
{link.url && url ? (
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={64}
height={64}
alt=""
className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-5 right-5 select-none z-10`}
className={`absolute w-12 bg-white shadow rounded-md p-1 bottom-3 right-3 select-none z-10`}
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
) : link.type === "pdf" ? (
<FontAwesomeIcon
icon={faFilePdf}
className="absolute h-12 w-12 bg-primary text-primary-content shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
/>
) : link.type === "image" ? (
<FontAwesomeIcon
icon={faFileImage}
className="absolute h-12 w-12 bg-primary text-primary-content shadow rounded-md p-2 bottom-3 right-3 select-none z-10"
/>
) : undefined}
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{count + 1}</p>
<p className="text-lg truncate w-full pr-8">
{unescapeString(link.name || link.description) || shortendURL}
</p>
</div>
{link.type === "url" ? (
<Link
href={link.url || ""}
target="_blank"
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
>
<FontAwesomeIcon
icon={faLink}
className="mt-1 w-4 h-4 text-primary"
/>
<p className="truncate w-full">{shortendURL}</p>
</Link>
) : (
<div className="badge badge-primary badge-sm my-1">{link.type}</div>
)}
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{count + 1}</p>
<p className="text-lg truncate capitalize w-full pr-8">
{unescapeString(link.name || link.description)}
</p>
</div>
<Link
href={`/collections/${link.collection.id}`}
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
>
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }}
/>
<p className="truncate capitalize w-full">{collection?.name}</p>
</Link>
<Link
href={`/collections/${link.collection.id}`}
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
>
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }}
/>
<p className="truncate capitalize w-full">{collection?.name}</p>
</Link>
<Link
href={link.url || ""}
target="_blank"
onClick={(e) => {
e.stopPropagation();
}}
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
>
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
<p className="truncate w-full">{shortendURL}</p>
</Link>
<div className="flex items-center gap-1 text-neutral">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>
{link.tags[0] ? (
<div className="flex items-center gap-1 text-neutral">
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
<p>{formattedDate}</p>
</div>
{/* {link.tags[0] ? (
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
<div className="flex gap-1 items-center flex-nowrap">
{link.tags.map((e, i) => (
@ -285,9 +306,7 @@ export default function LinkCard({ link, count, className }: Props) {
</div>
) : (
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
)}
</div>
</div>
)} */}
</div>
{editLinkModal ? (
<EditLinkModal

2
components/ModalContent/DeleteCollectionModal.tsx
View File

@ -68,7 +68,7 @@ export default function DeleteCollectionModal({
{permissions === true ? "Delete" : "Leave"} Collection
</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3">
{permissions === true ? (

2
components/ModalContent/DeleteLinkModal.tsx
View File

@ -44,7 +44,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
<Modal toggleModal={onClose}>
<p className="text-xl font-thin text-red-500">Delete Link</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3">
<p>Are you sure you want to delete this Link?</p>

2
components/ModalContent/EditCollectionModal.tsx
View File

@ -51,7 +51,7 @@ export default function EditCollectionModal({
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">Edit Collection Info</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3">
<div className="flex flex-col sm:flex-row gap-3">

4
components/ModalContent/EditCollectionSharingModal.tsx
View File

@ -99,7 +99,7 @@ export default function EditCollectionSharingModal({
{permissions === true ? "Share and Collaborate" : "Team"}
</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3">
{permissions === true && (
@ -203,7 +203,7 @@ export default function EditCollectionSharingModal({
<div className="flex flex-col gap-3 rounded-md">
<div
className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
className="relative border px-2 rounded-xl border-neutral-content bg-base-200 flex min-h-[6rem] sm:min-h-[4.1rem] gap-2 justify-between"
title={`@${collectionOwner.username} is the owner of this collection.`}
>
<div className="flex items-center gap-2 w-full">

2
components/ModalContent/EditLinkModal.tsx
View File

@ -80,7 +80,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">Edit Link</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
{link.url ? (
<Link

2
components/ModalContent/NewCollectionModal.tsx
View File

@ -56,7 +56,7 @@ export default function NewCollectionModal({ onClose }: Props) {
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">Create a New Collection</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="flex flex-col gap-3">
<div className="flex flex-col sm:flex-row gap-3">

2
components/ModalContent/NewLinkModal.tsx
View File

@ -120,7 +120,7 @@ export default function NewLinkModal({ onClose }: Props) {
<Modal toggleModal={onClose}>
<p className="text-xl font-thin">Create a New Link</p>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
<div className="sm:col-span-3 col-span-5">

23
components/ModalContent/UploadFileModal.tsx
View File

@ -104,20 +104,31 @@ export default function UploadFileModal({ onClose }: Props) {
const submit = async () => {
if (!submitLoader && file) {
let fileType: ArchivedFormat | null = null;
let linkType: "url" | "image" | "pdf" | null = null;
if (file?.type === "image/jpg" || file.type === "image/jpeg")
if (file?.type === "image/jpg" || file.type === "image/jpeg") {
fileType = ArchivedFormat.jpeg;
else if (file.type === "image/png") fileType = ArchivedFormat.png;
else if (file.type === "application/pdf") fileType = ArchivedFormat.pdf;
linkType = "image";
} else if (file.type === "image/png") {
fileType = ArchivedFormat.png;
linkType = "image";
} else if (file.type === "application/pdf") {
fileType = ArchivedFormat.pdf;
linkType = "pdf";
}
if (fileType !== null) {
if (fileType !== null && linkType !== null) {
setSubmitLoader(true);
let response;
const load = toast.loading("Creating...");
response = await addLink(link);
response = await addLink({
...link,
type: linkType,
name: link.name ? link.name : file.name.replace(/\.[^/.]+$/, ""),
});
toast.dismiss(load);
@ -150,7 +161,7 @@ export default function UploadFileModal({ onClose }: Props) {
<div className="flex gap-2 items-start">
<p className="text-xl font-thin">Upload File</p>
</div>
<div className="divider my-3"></div>
<div className="divider mb-3 mt-1"></div>
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
<div className="sm:col-span-3 col-span-5">
<p className="mb-2">File</p>

2
pages/collections/index.tsx
View File

@ -57,7 +57,7 @@ export default function Collections() {
className="w-5 h-5"
/>
</div>
<ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">
<li>
<div
role="button"