binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-393] feat: new emoji picker using emoji-picker-react (#3868)

Browse source 
* 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 2024-03-06 19:15:48 +05:30 • committed by GitHub
parent b3d3c0fb06
commit e4f48d6878
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 1513 additions and 2462 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/components/profile/sidebar.tsx
View file

@ -13,26 +13,28 @@ import { Loader, Tooltip } from "@plane/ui";
import { USER_PROFILE_PROJECT_SEGREGATION } from "constants/fetch-keys";
// helpers
import { renderFormattedDate } from "helpers/date-time.helper";
import { renderEmoji } from "helpers/emoji.helper";
// hooks
import { useApplication, useUser } from "hooks/store";
import { useApplication, useProject, useUser } from "hooks/store";
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// services
import { UserService } from "services/user.service";
// components
import { ProfileSidebarTime } from "./time";
import { ProjectLogo } from "components/project";
// services
const userService = new UserService();
export const ProfileSidebar = observer(() => {
// refs
const ref = useRef<HTMLDivElement>(null);
// router
const router = useRouter();
const { workspaceSlug, userId } = router.query;
// store hooks
const { currentUser } = useUser();
const { theme: themeStore } = useApplication();
const ref = useRef<HTMLDivElement>(null);
const { getProjectById } = useProject();
const { data: userProjectsData } = useSWR(
workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
@ -130,6 +132,8 @@ export const ProfileSidebar = observer(() => {
</div>
<div className="mt-9 divide-y divide-custom-border-100">
{userProjectsData.project_data.map((project, index) => {
const projectDetails = getProjectById(project.id);
const totalIssues =
project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
@ -138,26 +142,18 @@ export const ProfileSidebar = observer(() => {
? 0
: Math.round((project.completed_issues / project.assigned_issues) * 100);
if (!projectDetails) return null;
return (
<Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
{({ open }) => (
<div className="w-full">
<Disclosure.Button className="flex w-full items-center justify-between gap-2">
<div className="flex w-3/4 items-center gap-2">
{project.emoji ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
{renderEmoji(project.emoji)}
</div>
) : project.icon_prop ? (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center">
{renderEmoji(project.icon_prop)}
</div>
) : (
<div className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-custom-background-90 text-xs uppercase text-custom-text-100">
{project?.name.charAt(0)}
</div>
)}
<div className="truncate break-words text-sm font-medium">{project.name}</div>
<span className="grid place-items-center flex-shrink-0 h-7 w-7">
<ProjectLogo logo={projectDetails.logo_props} />
</span>
<div className="truncate break-words text-sm font-medium">{projectDetails.name}</div>
</div>
<div className="flex flex-shrink-0 items-center gap-2">
{project.assigned_issues > 0 && (