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

custom preview initial commit

This commit is contained in:
daniel31x13 2024-08-26 21:04:52 -04:00
parent 0371695eb3
commit 6498ae794b
8 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Drawer.tsx
View File

@ -40,7 +40,7 @@ export default function Drawer({
<ClickAwayHandler
onClickOutside={() => dismissible && setDrawerIsOpen(false)}
>
<D.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
<D.Content className="flex flex-col rounded-t-2xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%]">
<div
className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
data-testid="mobile-modal-container"

2
components/Modal.tsx
View File

@ -40,7 +40,7 @@ export default function Modal({
<ClickAwayHandler
onClickOutside={() => dismissible && setDrawerIsOpen(false)}
>
<Drawer.Content className="flex flex-col rounded-t-2xl min-h-max mt-24 fixed bottom-0 left-0 right-0 z-30">
<Drawer.Content className="flex flex-col rounded-t-2xl h-[90%] mt-24 fixed bottom-0 left-0 right-0 z-30">
<div
className="p-4 bg-base-100 rounded-t-2xl flex-1 border-neutral-content border-t overflow-y-auto"
data-testid="mobile-modal-container"

2
components/ModalContent/EditCollectionModal.tsx
View File

@ -97,7 +97,7 @@ export default function EditCollectionModal({
<div className="w-full">
<p className="mb-2">{t("description")}</p>
<textarea
className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
placeholder={t("collection_description_placeholder")}
value={collection.description}
onChange={(e) =>

34
components/ModalContent/EditLinkModal.tsx
View File

@ -3,7 +3,10 @@ import CollectionSelection from "@/components/InputSelect/CollectionSelection";
import TagSelection from "@/components/InputSelect/TagSelection";
import TextInput from "@/components/TextInput";
import unescapeString from "@/lib/client/unescapeString";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import {
ArchivedFormat,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import Link from "next/link";
import Modal from "../Modal";
import { useTranslation } from "next-i18next";
@ -11,6 +14,8 @@ import { useUpdateLink } from "@/hooks/store/links";
import toast from "react-hot-toast";
import IconPicker from "../IconPicker";
import { IconWeight } from "@phosphor-icons/react";
import Image from "next/image";
import { previewAvailable } from "@/lib/shared/getArchiveValidity";
type Props = {
onClose: Function;
@ -137,11 +142,13 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
setLink({ ...link, description: e.target.value })
}
placeholder={t("link_description_placeholder")}
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
/>
</div>
<div>
<p className="mb-2">{t("icon_and_preview")}</p>
<div className="flex gap-3">
<IconPicker
hideDefaultIcon
color={link.color || "#0ea5e9"}
@ -162,6 +169,29 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
}
alignment="-top-10 translate-x-20"
/>
{previewAvailable(link) ? (
<Image
src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
width={1280}
height={720}
alt=""
className="object-cover h-20 w-32 rounded-lg opacity-80"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.display = "none";
}}
/>
) : link.preview === "unavailable" ? (
<div className="bg-gray-50 duration-100 h-20 w-32 bg-opacity-80 rounded-lg flex flex-col justify-center">
<p className="text-black text-sm text-center">
{t("preview_unavailable")}
</p>
</div>
) : (
<div className="duration-100 h-20 w-32 bg-opacity-80 skeleton rounded-lg"></div>
)}
</div>
</div>
</div>
</div>

2
components/ModalContent/NewCollectionModal.tsx
View File

@ -113,7 +113,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
<div className="w-full">
<p className="mb-2">{t("description")}</p>
<textarea
className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
className="w-full h-32 resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
placeholder={t("collection_description_placeholder")}
value={collection.description}
onChange={(e) =>

2
components/ModalContent/NewLinkModal.tsx
View File

@ -169,7 +169,7 @@ export default function NewLinkModal({ onClose }: Props) {
setLink({ ...link, description: e.target.value })
}
placeholder={t("link_description_placeholder")}
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
/>
</div>
</div>

2
components/ModalContent/UploadFileModal.tsx
View File

@ -207,7 +207,7 @@ export default function UploadFileModal({ onClose }: Props) {
setLink({ ...link, description: e.target.value })
}
placeholder={t("description_placeholder")}
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
className="resize-none w-full h-32 rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
/>
</div>
</div>

4
public/locales/en/common.json
View File

@ -385,5 +385,7 @@
"show": "Show",
"image": "Image",
"icon": "Icon",
"date": "Date"
"date": "Date",
"preview_unavailable": "Preview Unavailable",
"icon_and_preview": "Icon & Preview"
}