github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1535] chore: project logo picker improvement (#4718)

Browse Source 
* chore: emoji icon picker improvement

* chore: emoji icon picker improvement
This commit is contained in:
Anmol Singh Bhatia 2024-06-07 16:09:27 +05:30 committed by GitHub
parent 15918f2d9f
commit dee57326a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/components/project/form.tsx
View File

@ -144,42 +144,40 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
<img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" /> <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
<div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4"> <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
<div className="flex flex-grow gap-3 truncate"> <div className="flex flex-grow gap-3 truncate">
<div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90"> <Controller
<Controller control={control}
control={control} name="logo_props"
name="logo_props" render={({ field: { value, onChange } }) => (
render={({ field: { value, onChange } }) => ( <CustomEmojiIconPicker
<CustomEmojiIconPicker isOpen={isOpen}
isOpen={isOpen} handleToggle={(val: boolean) => setIsOpen(val)}
handleToggle={(val: boolean) => setIsOpen(val)} className="flex items-center justify-center"
className="flex items-center justify-center" buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90"
buttonClassName="flex items-center justify-center" label={<Logo logo={value} size={28} />}
label={<Logo logo={value} size={28} />} onChange={(val) => {
onChange={(val) => { let logoValue = {};
let logoValue = {};
if (val?.type === "emoji") if (val?.type === "emoji")
logoValue = { logoValue = {
value: convertHexEmojiToDecimal(val.value.unified), value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl, url: val.value.imageUrl,
}; };
else if (val?.type === "icon") logoValue = val.value; else if (val?.type === "icon") logoValue = val.value;
onChange({ onChange({
in_use: val?.type, in_use: val?.type,
[val?.type]: logoValue, [val?.type]: logoValue,
}); });
setIsOpen(false); setIsOpen(false);
}} }}
defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined} defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
defaultOpen={ defaultOpen={
value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
} }
disabled={!isAdmin} disabled={!isAdmin}
/> />
)} )}
/> />
</div>
<div className="flex flex-col gap-1 truncate text-white"> <div className="flex flex-col gap-1 truncate text-white">
<span className="truncate text-lg font-semibold">{watch("name")}</span> <span className="truncate text-lg font-semibold">{watch("name")}</span>
<span className="flex items-center gap-2 text-sm"> <span className="flex items-center gap-2 text-sm">