[WEB-393] feat: new emoji picker using emoji-picker-react (#3868)
* chore: emoji-picker-react package added * chore: emoji and emoji picker component added * chore: emoji picker custom style added * chore: migration of the emoji's * chore: migration changes * chore: project logo prop * chore: added logo props in the serializer * chore: removed unused keys * chore: implement emoji picker throughout the web app * style: emoji icon picker * chore: update project logo renderer in the space app * chore: migrations fixes --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so> Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
b3d3c0fb06
commit
e4f48d6878
58 changed files with 1513 additions and 2462 deletions
|
|
@ -6,14 +6,14 @@ import { LinkIcon, Lock, Pencil, Star } from "lucide-react";
|
|||
// ui
|
||||
import { Avatar, AvatarGroup, Button, Tooltip, TOAST_TYPE, setToast, setPromiseToast } from "@plane/ui";
|
||||
// components
|
||||
import { DeleteProjectModal, JoinProjectModal, EUserProjectRoles } from "components/project";
|
||||
import { DeleteProjectModal, JoinProjectModal, ProjectLogo } from "components/project";
|
||||
// helpers
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// hooks
|
||||
import { useProject } from "hooks/store";
|
||||
// types
|
||||
import type { IProject } from "@plane/types";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
// constants
|
||||
|
||||
export type ProjectCardProps = {
|
||||
|
|
@ -123,13 +123,9 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
|
|||
|
||||
<div className="absolute bottom-4 z-10 flex h-10 w-full items-center justify-between gap-3 px-4">
|
||||
<div className="flex flex-grow items-center gap-2.5 truncate">
|
||||
<div className="item-center flex h-9 w-9 flex-shrink-0 justify-center rounded bg-white/90">
|
||||
<span className="flex items-center justify-center">
|
||||
{project.emoji
|
||||
? renderEmoji(project.emoji)
|
||||
: project.icon_prop
|
||||
? renderEmoji(project.icon_prop)
|
||||
: null}
|
||||
<div className="flex item-center justify-center h-9 w-9 flex-shrink-0 rounded bg-white/90">
|
||||
<span className="grid place-items-center">
|
||||
<ProjectLogo logo={project.logo_props} />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,19 +4,30 @@ import { useForm, Controller } from "react-hook-form";
|
|||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { X } from "lucide-react";
|
||||
// ui
|
||||
import { Button, CustomSelect, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
import {
|
||||
Button,
|
||||
CustomEmojiIconPicker,
|
||||
CustomSelect,
|
||||
EmojiIconPickerTypes,
|
||||
Input,
|
||||
setToast,
|
||||
TextArea,
|
||||
TOAST_TYPE,
|
||||
} from "@plane/ui";
|
||||
// components
|
||||
import { ImagePickerPopover } from "components/core";
|
||||
import { MemberDropdown } from "components/dropdowns";
|
||||
import EmojiIconPicker from "components/emoji-icon-picker";
|
||||
// constants
|
||||
import { PROJECT_CREATED } from "constants/event-tracker";
|
||||
import { NETWORK_CHOICES, PROJECT_UNSPLASH_COVERS } from "constants/project";
|
||||
import { EUserWorkspaceRoles } from "constants/workspace";
|
||||
// helpers
|
||||
import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
|
||||
import { convertHexEmojiToDecimal, getRandomEmoji } from "helpers/emoji.helper";
|
||||
// hooks
|
||||
import { useEventTracker, useProject, useUser } from "hooks/store";
|
||||
import { projectIdentifierSanitizer } from "helpers/project.helper";
|
||||
import { ProjectLogo } from "./project-logo";
|
||||
import { IProject } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
|
|
@ -29,6 +40,21 @@ interface IIsGuestCondition {
|
|||
onClose: () => void;
|
||||
}
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
cover_image: PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)],
|
||||
description: "",
|
||||
logo_props: {
|
||||
in_use: "emoji",
|
||||
emoji: {
|
||||
value: getRandomEmoji(),
|
||||
},
|
||||
},
|
||||
identifier: "",
|
||||
name: "",
|
||||
network: 2,
|
||||
project_lead: null,
|
||||
};
|
||||
|
||||
const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
|
||||
useEffect(() => {
|
||||
onClose();
|
||||
|
|
@ -42,19 +68,6 @@ const IsGuestCondition: FC<IIsGuestCondition> = ({ onClose }) => {
|
|||
return null;
|
||||
};
|
||||
|
||||
export interface ICreateProjectForm {
|
||||
name: string;
|
||||
identifier: string;
|
||||
description: string;
|
||||
emoji_and_icon: string;
|
||||
network: number;
|
||||
project_lead_member: string;
|
||||
project_lead: string;
|
||||
cover_image: string;
|
||||
icon_prop: any;
|
||||
emoji: string;
|
||||
}
|
||||
|
||||
export const CreateProjectModal: FC<Props> = observer((props) => {
|
||||
const { isOpen, onClose, setToFavorite = false, workspaceSlug } = props;
|
||||
// store
|
||||
|
|
@ -66,7 +79,6 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
// states
|
||||
const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
|
||||
// form info
|
||||
const cover_image = PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)];
|
||||
const {
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
|
|
@ -74,28 +86,20 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
control,
|
||||
watch,
|
||||
setValue,
|
||||
} = useForm<ICreateProjectForm>({
|
||||
defaultValues: {
|
||||
cover_image,
|
||||
description: "",
|
||||
emoji_and_icon: getRandomEmoji(),
|
||||
identifier: "",
|
||||
name: "",
|
||||
network: 2,
|
||||
project_lead: undefined,
|
||||
},
|
||||
} = useForm<IProject>({
|
||||
defaultValues,
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
|
||||
|
||||
if (currentWorkspaceRole && isOpen)
|
||||
if (currentWorkspaceRole < EUserWorkspaceRoles.MEMBER) return <IsGuestCondition onClose={onClose} />;
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setIsChangeInIdentifierRequired(true);
|
||||
reset();
|
||||
setTimeout(() => {
|
||||
reset();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const handleAddToFavorites = (projectId: string) => {
|
||||
|
|
@ -110,18 +114,11 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
});
|
||||
};
|
||||
|
||||
const onSubmit = async (formData: ICreateProjectForm) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { emoji_and_icon, project_lead_member, ...payload } = formData;
|
||||
|
||||
if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
|
||||
else payload.emoji = formData.emoji_and_icon;
|
||||
|
||||
payload.project_lead = formData.project_lead_member;
|
||||
const onSubmit = async (formData: Partial<IProject>) => {
|
||||
// Upper case identifier
|
||||
payload.identifier = payload.identifier.toUpperCase();
|
||||
formData.identifier = formData.identifier?.toUpperCase();
|
||||
|
||||
return createProject(workspaceSlug.toString(), payload)
|
||||
return createProject(workspaceSlug.toString(), formData)
|
||||
.then((res) => {
|
||||
const newPayload = {
|
||||
...res,
|
||||
|
|
@ -151,7 +148,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
captureProjectEvent({
|
||||
eventName: PROJECT_CREATED,
|
||||
payload: {
|
||||
...payload,
|
||||
...formData,
|
||||
state: "FAILED",
|
||||
},
|
||||
});
|
||||
|
|
@ -165,13 +162,13 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
return;
|
||||
}
|
||||
if (e.target.value === "") setValue("identifier", "");
|
||||
else setValue("identifier", e.target.value.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "").substring(0, 5));
|
||||
else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
|
||||
onChange(e);
|
||||
};
|
||||
|
||||
const handleIdentifierChange = (onChange: any) => (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const { value } = e.target;
|
||||
const alphanumericValue = value.replace(/[^ÇŞĞIİÖÜA-Za-z0-9]/g, "");
|
||||
const alphanumericValue = projectIdentifierSanitizer(value);
|
||||
setIsChangeInIdentifierRequired(false);
|
||||
onChange(alphanumericValue);
|
||||
};
|
||||
|
|
@ -204,11 +201,11 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
>
|
||||
<Dialog.Panel className="w-full transform rounded-lg bg-custom-background-100 p-3 text-left shadow-custom-shadow-md transition-all sm:w-3/5 lg:w-1/2 xl:w-2/5">
|
||||
<div className="group relative h-44 w-full rounded-lg bg-custom-background-80">
|
||||
{watch("cover_image") !== null && (
|
||||
{watch("cover_image") && (
|
||||
<img
|
||||
src={watch("cover_image")!}
|
||||
className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
|
||||
alt="Cover Image"
|
||||
alt="Cover image"
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -218,30 +215,50 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
</button>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2">
|
||||
<ImagePickerPopover
|
||||
label="Change Cover"
|
||||
onChange={(image) => {
|
||||
setValue("cover_image", image);
|
||||
}}
|
||||
<Controller
|
||||
name="cover_image"
|
||||
control={control}
|
||||
value={watch("cover_image")}
|
||||
tabIndex={9}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<ImagePickerPopover
|
||||
label="Change Cover"
|
||||
onChange={onChange}
|
||||
control={control}
|
||||
value={value}
|
||||
tabIndex={9}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-[22px] left-3">
|
||||
<Controller
|
||||
name="emoji_and_icon"
|
||||
name="logo_props"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
<CustomEmojiIconPicker
|
||||
label={
|
||||
<div className="grid h-[44px] w-[44px] place-items-center rounded-md bg-custom-background-80 text-lg outline-none">
|
||||
{value ? renderEmoji(value) : "Icon"}
|
||||
</div>
|
||||
<span className="grid h-11 w-11 place-items-center rounded-md bg-custom-background-80">
|
||||
<ProjectLogo logo={value} className="text-xl" />
|
||||
</span>
|
||||
}
|
||||
onChange={(val) => {
|
||||
let logoValue = {};
|
||||
|
||||
if (val.type === "emoji")
|
||||
logoValue = {
|
||||
value: convertHexEmojiToDecimal(val.value.unified),
|
||||
url: val.value.imageUrl,
|
||||
};
|
||||
else if (val.type === "icon") logoValue = val.value;
|
||||
|
||||
onChange({
|
||||
in_use: val.type,
|
||||
[val.type]: logoValue,
|
||||
});
|
||||
}}
|
||||
defaultIconColor={value.in_use === "icon" ? value.icon?.color : undefined}
|
||||
defaultOpen={
|
||||
value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
|
||||
}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
tabIndex={10}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -275,7 +292,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs text-red-500">{errors?.name?.message}</span>
|
||||
<span className="text-xs text-red-500">
|
||||
<>{errors?.name?.message}</>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<Controller
|
||||
|
|
@ -310,7 +329,9 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
/>
|
||||
)}
|
||||
/>
|
||||
<span className="text-xs text-red-500">{errors?.identifier?.message}</span>
|
||||
<span className="text-xs text-red-500">
|
||||
<>{errors?.identifier?.message}</>
|
||||
</span>
|
||||
</div>
|
||||
<div className="md:col-span-4">
|
||||
<Controller
|
||||
|
|
@ -336,57 +357,65 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<div className="flex-shrink-0" tabIndex={4}>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={
|
||||
<div className="flex items-center gap-1">
|
||||
{currentNetwork ? (
|
||||
<>
|
||||
<currentNetwork.icon className="h-3 w-3" />
|
||||
{currentNetwork.label}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-custom-text-400">Select Network</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
placement="bottom-start"
|
||||
noChevron
|
||||
tabIndex={4}
|
||||
>
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option key={network.key} value={network.key}>
|
||||
<div className="flex items-start gap-2">
|
||||
<network.icon className="h-3.5 w-3.5" />
|
||||
<div className="-mt-1">
|
||||
<p>{network.label}</p>
|
||||
<p className="text-xs text-custom-text-400">{network.description}</p>
|
||||
</div>
|
||||
render={({ field: { onChange, value } }) => {
|
||||
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === value);
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0" tabIndex={4}>
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={
|
||||
<div className="flex items-center gap-1">
|
||||
{currentNetwork ? (
|
||||
<>
|
||||
<currentNetwork.icon className="h-3 w-3" />
|
||||
{currentNetwork.label}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-custom-text-400">Select network</span>
|
||||
)}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
placement="bottom-start"
|
||||
noChevron
|
||||
tabIndex={4}
|
||||
>
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option key={network.key} value={network.key}>
|
||||
<div className="flex items-start gap-2">
|
||||
<network.icon className="h-3.5 w-3.5" />
|
||||
<div className="-mt-1">
|
||||
<p>{network.label}</p>
|
||||
<p className="text-xs text-custom-text-400">{network.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Controller
|
||||
name="project_lead_member"
|
||||
name="project_lead"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<div className="h-7 flex-shrink-0" tabIndex={5}>
|
||||
<MemberDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="Lead"
|
||||
multiple={false}
|
||||
buttonVariant="border-with-text"
|
||||
tabIndex={5}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
render={({ field: { value, onChange } }) => {
|
||||
if (value === undefined || value === null || typeof value === "string")
|
||||
return (
|
||||
<div className="h-7 flex-shrink-0" tabIndex={5}>
|
||||
<MemberDropdown
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="Lead"
|
||||
multiple={false}
|
||||
buttonVariant="border-with-text"
|
||||
tabIndex={5}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
else return <></>;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -396,7 +425,7 @@ export const CreateProjectModal: FC<Props> = observer((props) => {
|
|||
Cancel
|
||||
</Button>
|
||||
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={7}>
|
||||
{isSubmitting ? "Creating..." : "Create Project"}
|
||||
{isSubmitting ? "Creating" : "Create project"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,22 +3,31 @@ import { Controller, useForm } from "react-hook-form";
|
|||
// icons
|
||||
import { Lock } from "lucide-react";
|
||||
// ui
|
||||
import { Button, CustomSelect, Input, TextArea, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
import {
|
||||
Button,
|
||||
CustomSelect,
|
||||
Input,
|
||||
TextArea,
|
||||
TOAST_TYPE,
|
||||
setToast,
|
||||
CustomEmojiIconPicker,
|
||||
EmojiIconPickerTypes,
|
||||
} from "@plane/ui";
|
||||
// components
|
||||
import { ImagePickerPopover } from "components/core";
|
||||
import EmojiIconPicker from "components/emoji-icon-picker";
|
||||
// constants
|
||||
import { PROJECT_UPDATED } from "constants/event-tracker";
|
||||
import { NETWORK_CHOICES } from "constants/project";
|
||||
// helpers
|
||||
import { renderFormattedDate } from "helpers/date-time.helper";
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
// hooks
|
||||
import { useEventTracker, useProject } from "hooks/store";
|
||||
// services
|
||||
import { ProjectService } from "services/project";
|
||||
// types
|
||||
import { IProject, IWorkspace } from "@plane/types";
|
||||
import { ProjectLogo } from "./project-logo";
|
||||
import { convertHexEmojiToDecimal } from "helpers/emoji.helper";
|
||||
export interface IProjectDetailsForm {
|
||||
project: IProject;
|
||||
workspaceSlug: string;
|
||||
|
|
@ -46,7 +55,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
|||
} = useForm<IProject>({
|
||||
defaultValues: {
|
||||
...project,
|
||||
emoji_and_icon: project.emoji ?? project.icon_prop,
|
||||
workspace: (project.workspace as IWorkspace).id,
|
||||
},
|
||||
});
|
||||
|
|
@ -55,7 +63,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
|||
if (project && projectId !== getValues("id")) {
|
||||
reset({
|
||||
...project,
|
||||
emoji_and_icon: project.emoji ?? project.icon_prop,
|
||||
workspace: (project.workspace as IWorkspace).id,
|
||||
});
|
||||
}
|
||||
|
|
@ -109,14 +116,9 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
|||
identifier: formData.identifier,
|
||||
description: formData.description,
|
||||
cover_image: formData.cover_image,
|
||||
logo_props: formData.logo_props,
|
||||
};
|
||||
if (typeof formData.emoji_and_icon === "object") {
|
||||
payload.emoji = null;
|
||||
payload.icon_prop = formData.emoji_and_icon;
|
||||
} else {
|
||||
payload.emoji = formData.emoji_and_icon;
|
||||
payload.icon_prop = null;
|
||||
}
|
||||
|
||||
if (project.identifier !== formData.identifier)
|
||||
await projectService
|
||||
.checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
|
||||
|
|
@ -139,20 +141,37 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
|
|||
<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 h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90">
|
||||
<div className="grid h-7 w-7 place-items-center">
|
||||
<Controller
|
||||
control={control}
|
||||
name="emoji_and_icon"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={value ? renderEmoji(value) : "Icon"}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="logo_props"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomEmojiIconPicker
|
||||
label={
|
||||
<span className="grid h-7 w-7 place-items-center">
|
||||
<ProjectLogo logo={value} className="text-lg" />
|
||||
</span>
|
||||
}
|
||||
onChange={(val) => {
|
||||
let logoValue = {};
|
||||
|
||||
if (val.type === "emoji")
|
||||
logoValue = {
|
||||
value: convertHexEmojiToDecimal(val.value.unified),
|
||||
url: val.value.imageUrl,
|
||||
};
|
||||
else if (val.type === "icon") logoValue = val.value;
|
||||
|
||||
onChange({
|
||||
in_use: val.type,
|
||||
[val.type]: logoValue,
|
||||
});
|
||||
}}
|
||||
defaultIconColor={value.in_use === "icon" ? value.icon?.color : undefined}
|
||||
defaultOpen={value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 truncate text-white">
|
||||
<span className="truncate text-lg font-semibold">{watch("name")}</span>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export * from "./sidebar-list";
|
|||
export * from "./integration-card";
|
||||
export * from "./member-list";
|
||||
export * from "./member-list-item";
|
||||
export * from "./project-logo";
|
||||
export * from "./project-settings-member-defaults";
|
||||
export * from "./send-project-invitation-modal";
|
||||
export * from "./confirm-project-member-remove";
|
||||
|
|
|
|||
34
web/components/project/project-logo.tsx
Normal file
34
web/components/project/project-logo.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// helpers
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import { TProjectLogoProps } from "@plane/types";
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
logo: TProjectLogoProps;
|
||||
};
|
||||
|
||||
export const ProjectLogo: React.FC<Props> = (props) => {
|
||||
const { className, logo } = props;
|
||||
|
||||
if (logo.in_use === "icon" && logo.icon)
|
||||
return (
|
||||
<span
|
||||
style={{
|
||||
color: logo.icon.color,
|
||||
}}
|
||||
className={cn("material-symbols-rounded text-base", className)}
|
||||
>
|
||||
{logo.icon.name}
|
||||
</span>
|
||||
);
|
||||
|
||||
if (logo.in_use === "emoji" && logo.emoji)
|
||||
return (
|
||||
<span className={cn("text-base", className)}>
|
||||
{logo.emoji.value?.split("-").map((emoji) => String.fromCodePoint(parseInt(emoji, 10)))}
|
||||
</span>
|
||||
);
|
||||
|
||||
return <span />;
|
||||
};
|
||||
|
|
@ -29,10 +29,9 @@ import {
|
|||
LayersIcon,
|
||||
setPromiseToast,
|
||||
} from "@plane/ui";
|
||||
import { LeaveProjectModal, PublishProjectModal } from "components/project";
|
||||
import { LeaveProjectModal, ProjectLogo, PublishProjectModal } from "components/project";
|
||||
import { EUserProjectRoles } from "constants/project";
|
||||
import { cn } from "helpers/common.helper";
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
import { getNumberCount } from "helpers/string.helper";
|
||||
// hooks
|
||||
import { useApplication, useEventTracker, useInbox, useProject } from "hooks/store";
|
||||
|
|
@ -100,23 +99,21 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||
const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
|
||||
const [publishModalOpen, setPublishModal] = useState(false);
|
||||
const [isMenuActive, setIsMenuActive] = useState(false);
|
||||
// refs
|
||||
const actionSectionRef = useRef<HTMLDivElement | null>(null);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId: URLProjectId } = router.query;
|
||||
// derived values
|
||||
const project = getProjectById(projectId);
|
||||
|
||||
const isCollapsed = themeStore.sidebarCollapsed;
|
||||
const inboxesMap = project?.inbox_view ? getInboxesByProjectId(projectId) : undefined;
|
||||
const inboxDetails = inboxesMap && inboxesMap.length > 0 ? getInboxById(inboxesMap[0]) : undefined;
|
||||
// auth
|
||||
const isAdmin = project?.member_role === EUserProjectRoles.ADMIN;
|
||||
const isViewerOrGuest =
|
||||
project?.member_role && [EUserProjectRoles.VIEWER, EUserProjectRoles.GUEST].includes(project.member_role);
|
||||
|
||||
const isCollapsed = themeStore.sidebarCollapsed;
|
||||
|
||||
const actionSectionRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const inboxesMap = project?.inbox_view ? getInboxesByProjectId(projectId) : undefined;
|
||||
const inboxDetails = inboxesMap && inboxesMap.length > 0 ? getInboxById(inboxesMap[0]) : undefined;
|
||||
|
||||
const handleAddToFavorites = () => {
|
||||
if (!workspaceSlug || !project) return;
|
||||
|
||||
|
|
@ -178,9 +175,13 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||
{({ open }) => (
|
||||
<>
|
||||
<div
|
||||
className={`group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-10 hover:bg-custom-sidebar-background-80 ${
|
||||
snapshot?.isDragging ? "opacity-60" : ""
|
||||
} ${isMenuActive ? "!bg-custom-sidebar-background-80" : ""}`}
|
||||
className={cn(
|
||||
"group relative flex w-full items-center rounded-md px-2 py-1 text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80",
|
||||
{
|
||||
"opacity-60": snapshot?.isDragging,
|
||||
"bg-custom-sidebar-background-80": isMenuActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{provided && !disableDrag && (
|
||||
<Tooltip
|
||||
|
|
@ -189,11 +190,14 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400 ${
|
||||
isCollapsed ? "" : "group-hover:!flex"
|
||||
} ${project.sort_order === null ? "cursor-not-allowed opacity-60" : ""} ${
|
||||
isMenuActive ? "!flex" : ""
|
||||
}`}
|
||||
className={cn(
|
||||
"absolute -left-2.5 top-1/2 hidden -translate-y-1/2 rounded p-0.5 text-custom-sidebar-text-400",
|
||||
{
|
||||
"group-hover:flex": !isCollapsed,
|
||||
"cursor-not-allowed opacity-60": project.sort_order === null,
|
||||
flex: isMenuActive,
|
||||
}
|
||||
)}
|
||||
{...provided?.dragHandleProps}
|
||||
>
|
||||
<MoreVertical className="h-3.5" />
|
||||
|
|
@ -204,36 +208,32 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||
<Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!isCollapsed}>
|
||||
<Disclosure.Button
|
||||
as="div"
|
||||
className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
|
||||
isCollapsed ? "justify-center" : `justify-between`
|
||||
}`}
|
||||
className={cn(
|
||||
"flex items-center justify-between flex-grow cursor-pointer select-none truncate text-left text-sm font-medium",
|
||||
{
|
||||
"justify-center": isCollapsed,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={`flex w-full flex-grow items-center gap-x-2 truncate ${
|
||||
isCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
className={cn("w-full flex-grow flex items-center gap-1 truncate", {
|
||||
"justify-center": isCollapsed,
|
||||
})}
|
||||
>
|
||||
{project.emoji ? (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
{renderEmoji(project.emoji)}
|
||||
</span>
|
||||
) : project.icon_prop ? (
|
||||
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
|
||||
{renderEmoji(project.icon_prop)}
|
||||
</div>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="h-7 w-7 grid place-items-center">
|
||||
<ProjectLogo logo={project.logo_props} />
|
||||
</div>
|
||||
{!isCollapsed && <p className="truncate text-custom-sidebar-text-200">{project.name}</p>}
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<ChevronDown
|
||||
className={`hidden h-4 w-4 flex-shrink-0 ${open ? "rotate-180" : ""} ${
|
||||
isMenuActive ? "!block" : ""
|
||||
} mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:!block`}
|
||||
className={cn(
|
||||
"hidden h-4 w-4 flex-shrink-0 mb-0.5 text-custom-sidebar-text-400 duration-300 group-hover:block",
|
||||
{
|
||||
"rotate-180": open,
|
||||
block: isMenuActive,
|
||||
}
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
|
|
@ -250,7 +250,9 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
|
|||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
}
|
||||
className={`hidden flex-shrink-0 group-hover:block ${isMenuActive ? "!block" : ""}`}
|
||||
className={cn("hidden flex-shrink-0 group-hover:block", {
|
||||
"!block": isMenuActive,
|
||||
})}
|
||||
buttonClassName="!text-custom-sidebar-text-400"
|
||||
ellipsis
|
||||
placement="bottom-start"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue