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 iconPicker component + other improvements

This commit is contained in:
daniel31x13 2024-08-19 18:14:09 -04:00
parent 2893d3caf2
commit dc388ebba5
15 changed files with 222 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/Icon.tsx Normal file
View File

@ -0,0 +1,16 @@
import React, { forwardRef } from "react";
import * as Icons from "@phosphor-icons/react";
type Props = {
icon: string;
} & Icons.IconProps;
const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }) => {
const IconComponent: any = Icons[icon as keyof typeof Icons];
if (!IconComponent) {
return <></>;
} else return <IconComponent {...rest} />;
});
export default Icon;

104
components/IconPicker.tsx
View File

@ -2,6 +2,9 @@ import { icons } from "@/lib/client/icons";
import React, { useMemo, useState } from "react";
import Fuse from "fuse.js";
import TextInput from "./TextInput";
import Popover from "./Popover";
import { HexColorPicker } from "react-colorful";
import Icon from "./Icon";
const fuse = new Fuse(icons, {
keys: [{ name: "name", weight: 4 }, "tags", "categories"],
@ -9,9 +12,29 @@ const fuse = new Fuse(icons, {
useExtendedSearch: true,
});
type Props = {};
type Props = {
onClose: Function;
alignment?: "left" | "right" | "bottom" | "top";
color: string;
setColor: Function;
iconName: string;
setIconName: Function;
weight: "light" | "regular" | "bold" | "fill" | "duotone";
setWeight: Function;
className?: string;
};
const IconPicker = (props: Props) => {
const IconPicker = ({
onClose,
alignment,
color,
setColor,
iconName,
setIconName,
weight,
setWeight,
className,
}: Props) => {
const [query, setQuery] = useState("");
const filteredQueryResultsSelector = useMemo(() => {
@ -22,24 +45,67 @@ const IconPicker = (props: Props) => {
}, [query]);
return (
<div className="w-fit">
<TextInput
className="p-2 rounded w-full mb-5"
placeholder="Search icons"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<div className="grid grid-cols-6 gap-5 w-fit">
{filteredQueryResultsSelector.map((icon) => {
const IconComponent = icon.Icon;
return (
<div key={icon.name} onClick={() => console.log(icon.name)}>
<IconComponent size={32} weight="fill" />
</div>
);
})}
<Popover
onClose={onClose}
className={
className +
" bg-base-200 border border-neutral-content p-3 h-72 w-72 overflow-y-auto rounded-lg"
}
>
<div>
<div className="mb-3 flex gap-3">
<div className="w-full flex flex-col justify-between">
<Icon
icon={iconName}
size={80}
weight={weight as any}
color={color}
className="mx-auto"
/>
<select
className="border border-neutral-content bg-base-100 focus:outline-none focus:border-primary duration-100 w-full rounded-[0.375rem] h-7"
value={weight}
onChange={(e) => setWeight(e.target.value)}
>
<option value="regular">Regular</option>
<option value="thin">Thin</option>
<option value="light">Light</option>
<option value="bold">Bold</option>
<option value="fill">Fill</option>
<option value="duotone">Duotone</option>
</select>
</div>
<HexColorPicker color={color} onChange={(e) => setColor(e)} />
</div>
<TextInput
className="p-2 rounded w-full mb-3 h-7 text-sm"
placeholder="Search icons"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<div className="grid grid-cols-5 gap-1 w-full">
{filteredQueryResultsSelector.map((icon) => {
const IconComponent = icon.Icon;
return (
<div
key={icon.pascal_name}
onClick={() => setIconName(icon.pascal_name)}
className={`cursor-pointer btn p-1 box-border ${
icon.pascal_name === iconName
? "outline outline-1 outline-primary"
: ""
}`}
>
<IconComponent size={32} weight={weight} color={color} />
</div>
);
})}
</div>
</div>
</div>
</Popover>
);
};

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

@ -105,24 +105,23 @@ export default function LinkActions({
alignToTop ? "" : "translate-y-10"
}`}
>
{permissions === true ||
(permissions?.canUpdate && (
<li>
<div
role="button"
tabIndex={0}
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
pinLink();
}}
className="whitespace-nowrap"
>
{link?.pinnedBy && link.pinnedBy[0]
? t("unpin")
: t("pin_to_dashboard")}
</div>
</li>
))}
{(permissions === true || permissions?.canUpdate) && (
<li>
<div
role="button"
tabIndex={0}
onClick={() => {
(document?.activeElement as HTMLElement)?.blur();
pinLink();
}}
className="whitespace-nowrap"
>
{link?.pinnedBy && link.pinnedBy[0]
? t("unpin")
: t("pin_to_dashboard")}
</div>
</li>
)}
<li>
<div
role="button"
@ -173,8 +172,9 @@ export default function LinkActions({
tabIndex={0}
onClick={async (e) => {
(document?.activeElement as HTMLElement)?.blur();
console.log(e.shiftKey);
e.shiftKey
? async () => {
? (async () => {
const load = toast.loading(t("deleting"));
await deleteLink.mutateAsync(link.id as number, {
@ -188,7 +188,7 @@ export default function LinkActions({
}
},
});
}
})()
: setDeleteLinkModal(true);
}}
className="whitespace-nowrap"

40
components/ModalContent/EditCollectionModal.tsx
View File

@ -6,6 +6,8 @@ import Modal from "../Modal";
import { useTranslation } from "next-i18next";
import { useUpdateCollection } from "@/hooks/store/collections";
import toast from "react-hot-toast";
import IconPicker from "../IconPicker";
import Icon from "../Icon";
type Props = {
onClose: Function;
@ -20,6 +22,7 @@ export default function EditCollectionModal({
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
const [iconPicker, setIconPicker] = useState(false);
const [submitLoader, setSubmitLoader] = useState(false);
const updateCollection = useUpdateCollection();
@ -71,17 +74,32 @@ export default function EditCollectionModal({
<div>
<p className="w-full mb-2">{t("color")}</p>
<div className="color-picker flex justify-between items-center">
<HexColorPicker
color={collection.color}
onChange={(color) =>
setCollection({ ...collection, color })
}
/>
<div className="flex flex-col gap-2 items-center w-32">
<i
className="bi-folder-fill text-5xl"
style={{ color: collection.color }}
></i>
<div className="flex flex-col gap-2 items-center w-32 relative">
<Icon
icon={collection.icon as string}
size={80}
weight={collection.iconWeight as any}
color={collection.color as string}
onClick={() => setIconPicker(true)}
/>
{iconPicker && (
<IconPicker
onClose={() => setIconPicker(false)}
className="top-20"
color={collection.color as string}
setColor={(color: string) =>
setCollection({ ...collection, color })
}
weight={collection.iconWeight as any}
setWeight={(iconWeight: string) =>
setCollection({ ...collection, iconWeight })
}
iconName={collection.icon as string}
setIconName={(icon: string) =>
setCollection({ ...collection, icon })
}
/>
)}
<div
className="btn btn-ghost btn-xs"
onClick={() =>

33
components/ModalContent/LinkDetailModal.tsx
View File

@ -120,25 +120,24 @@ export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
<div className="sm:m-auto p-10 w-full max-w-xl">
<LinkDetails link={link} />
{permissions === true ||
(permissions?.canUpdate && (
<>
<br />
<br />
{(permissions === true || permissions?.canUpdate) && (
<>
<br />
<br />
<div className="mx-auto text-center">
<div
className="btn btn-sm btn-ghost"
onClick={() => {
onEdit();
onClose();
}}
>
{t("edit_link")}
</div>
<div className="mx-auto text-center">
<div
className="btn btn-sm btn-ghost"
onClick={() => {
onEdit();
onClose();
}}
>
{t("edit_link")}
</div>
</>
))}
</div>
</>
)}
</div>
</Drawer>
);

4
components/ModalContent/NewCollectionModal.tsx
View File

@ -88,7 +88,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
<p className="w-full mb-2">{t("color")}</p>
<div className="color-picker flex justify-between items-center">
<HexColorPicker
color={collection.color}
color={collection.color as string}
onChange={(color) =>
setCollection({ ...collection, color })
}
@ -96,7 +96,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
<div className="flex flex-col gap-2 items-center w-32">
<i
className={"bi-folder-fill text-5xl"}
style={{ color: collection.color }}
style={{ color: collection.color as string }}
></i>
<div
className="btn btn-ghost btn-xs"

3
components/ModalContent/NewLinkModal.tsx
View File

@ -31,6 +31,9 @@ export default function NewLinkModal({ onClose }: Props) {
readable: "",
monolith: "",
textContent: "",
icon: "",
iconWeight: "",
color: "",
collection: {
name: "",
ownerId: data?.user.id as number,

3
components/ModalContent/UploadFileModal.tsx
View File

@ -35,6 +35,9 @@ export default function UploadFileModal({ onClose }: Props) {
readable: "",
monolith: "",
textContent: "",
icon: "",
iconWeight: "",
color: "",
collection: {
name: "",
ownerId: data?.user.id as number,

21
components/Popover.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from "react";
import ClickAwayHandler from "./ClickAwayHandler";
type Props = {
children: React.ReactNode;
onClose: Function;
className?: string;
};
const Popover = ({ children, className, onClose }: Props) => {
return (
<ClickAwayHandler
onClickOutside={() => onClose()}
className={`absolute z-50 ${className || ""}`}
>
{children}
</ClickAwayHandler>
);
};
export default Popover;

2
components/ReadableView.tsx
View File

@ -205,7 +205,7 @@ export default function ReadableView({ link }: Props) {
>
<i
className="bi-folder-fill drop-shadow text-2xl"
style={{ color: link?.collection.color }}
style={{ color: link?.collection.color as string }}
></i>
<p
title={link?.collection.name}

2
pages/collections/[id].tsx
View File

@ -112,7 +112,7 @@ export default function Index() {
<div className="flex items-center gap-2">
<i
className="bi-folder-fill text-3xl drop-shadow"
style={{ color: activeCollection?.color }}
style={{ color: activeCollection?.color as string }}
></i>
<p className="sm:text-3xl text-2xl capitalize w-full py-1 break-words hyphens-auto font-thin">

8
prisma/migrations/20240819003838_add_icon_related_fields_to_link_and_collection_model/migration.sql Normal file
View File

@ -0,0 +1,8 @@
-- AlterTable
ALTER TABLE "Collection" ADD COLUMN "icon" TEXT,
ADD COLUMN "iconWeight" TEXT;
-- AlterTable
ALTER TABLE "Link" ADD COLUMN "color" TEXT,
ADD COLUMN "icon" TEXT,
ADD COLUMN "iconWeight" TEXT;

3
prisma/migrations/20240819005010_remove_collection_model_default_color/migration.sql Normal file
View File

@ -0,0 +1,3 @@
-- AlterTable
ALTER TABLE "Collection" ALTER COLUMN "color" DROP NOT NULL,
ALTER COLUMN "color" DROP DEFAULT;

7
prisma/schema.prisma
View File

@ -94,7 +94,9 @@ model Collection {
id Int @id @default(autoincrement())
name String
description String @default("")
color String @default("#0ea5e9")
icon String?
iconWeight String?
color String?
parentId Int?
parent Collection? @relation("SubCollections", fields: [parentId], references: [id])
subCollections Collection[] @relation("SubCollections")
@ -133,6 +135,9 @@ model Link {
collection Collection @relation(fields: [collectionId], references: [id])
collectionId Int
tags Tag[]
icon String?
iconWeight String?
color String?
url String?
textContent String?
preview String?

8
styles/globals.css
View File

@ -36,6 +36,14 @@
scrollbar-width: none;
}
.hide-color-picker {
opacity: 0;
display: block;
width: 32px;
height: 32px;
border: none;
}
.hyphens {
hyphens: auto;
}