thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: project list page revamp (#2448)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-10-17 12:14:55 +05:30 committed by GitHub
parent 5a4e9f42f0
commit 7f06d5a30d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 108 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/headers/projects.tsx
View File

@ -39,10 +39,10 @@ export const ProjectsHeader = observer(() => {
</div> </div>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90"> <div className="flex w-full gap-1 items-center justify-start text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
<Search size={12} strokeWidth={2} /> <Search className="h-3.5 w-3.5" />
<input <input
className="w-full border-none bg-transparent text-xs text-custom-text-200 focus:outline-none" className="min-w-[234px] w-full border-none bg-transparent text-sm focus:outline-none"
value={projectStore.searchQuery} value={projectStore.searchQuery}
onChange={(e) => projectStore.setSearchQuery(e.target.value)} onChange={(e) => projectStore.setSearchQuery(e.target.value)}
placeholder="Search" placeholder="Search"
@ -50,13 +50,13 @@ export const ProjectsHeader = observer(() => {
</div> </div>
<Button <Button
className="flex items-center gap-1 flex-shrink-0" prependIcon={<Plus />}
size="md"
onClick={() => { onClick={() => {
const e = new KeyboardEvent("keydown", { key: "p" }); const e = new KeyboardEvent("keydown", { key: "p" });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
> >
<Plus size={14} strokeWidth={3} />
Add Project Add Project
</Button> </Button>
</div> </div>

185
web/components/project/card.tsx
View File

@ -5,19 +5,20 @@ import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root"; import { RootStore } from "store/root";
// icons // icons
import { CalendarDays, Link2Icon, Pencil, Plus, Star, Trash2 } from "lucide-react"; import { Globe2, LinkIcon, Lock, Pencil, Star } from "lucide-react";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { Tooltip } from "@plane/ui"; import { Button, Tooltip } from "@plane/ui";
// helpers // helpers
import { renderShortDateWithYearFormat } from "helpers/date-time.helper"; import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { copyTextToClipboard, truncateText } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// types // types
import type { IProject } from "types"; import type { IProject } from "types";
// components // components
import { DeleteProjectModal, JoinProjectModal } from "components/project"; import { DeleteProjectModal, JoinProjectModal } from "components/project";
import { AssigneesList } from "components/ui";
export type ProjectCardProps = { export type ProjectCardProps = {
project: IProject; project: IProject;
@ -75,6 +76,8 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
}); });
}; };
const projectMembersIds = project.members.map((member) => member.member_id);
return ( return (
<> <>
{/* Delete Project Modal */} {/* Delete Project Modal */}
@ -83,6 +86,7 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
isOpen={deleteProjectModalOpen} isOpen={deleteProjectModalOpen}
onClose={() => setDeleteProjectModal(false)} onClose={() => setDeleteProjectModal(false)}
/> />
{/* Join Project Modal */}
{workspaceSlug && ( {workspaceSlug && (
<JoinProjectModal <JoinProjectModal
workspaceSlug={workspaceSlug?.toString()} workspaceSlug={workspaceSlug?.toString()}
@ -93,123 +97,124 @@ export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
)} )}
{/* Card Information */} {/* Card Information */}
<div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow"> <div className="flex flex-col rounded bg-custom-background-100 shadow-custom-shadow-xs">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}> <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a> <a>
<div className="relative h-32 w-full rounded-t-[10px]"> <div className="relative h-[118px] w-full rounded-t ">
<div className="absolute z-[1] inset-0 bg-gradient-to-t from-black/50 to-transparent" />
<img <img
src={ src={
project.cover_image ?? project.cover_image ??
"https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
} }
alt={project.name} alt={project.name}
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]" className="absolute top-0 left-0 h-full w-full object-cover rounded-t"
/> />
<div className="absolute bottom-4 right-4 flex items-center gap-3 text-white">
{!project.is_member ? (
<button
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setJoinProjectModal(true);
}}
className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
>
<Plus height={12} width={12} />
<span>Select to Join</span>
</button>
) : (
<span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Joined</span>
)}
</div>
<div className="absolute top-4 right-4 bg-slate-300 rounded z-10"> <div className="absolute h-9 w-full bottom-4 z-10 flex items-center justify-between px-4">
<button <div className="flex items-center gap-2.5">
className="grid h-6 w-9 place-items-center cursor-pointer" <div className="h-9 w-9 flex item-center justify-center rounded bg-white/90 flex-shrink-0">
onClick={(e) => { <span className="flex items-center justify-center">
if (project.is_favorite) { {project.emoji
e.preventDefault(); ? renderEmoji(project.emoji)
e.stopPropagation(); : project.icon_prop
handleRemoveFromFavorites(); ? renderEmoji(project.icon_prop)
} else { : null}
e.preventDefault(); </span>
e.stopPropagation(); </div>
handleAddToFavorites();
} <div className="flex flex-col justify-center h-9">
}} <h3 className="text-sm text-white font-medium line-clamp-1">{project.name}</h3>
> <span className="flex items-center gap-1.5">
<Star className={`h-3.5 w-3.5 ${project.is_favorite ? "text-orange-400" : ""} `} /> <p className="text-xs text-white">
</button> Created on {renderShortDateWithYearFormat(project?.created_at)}
</div> </p>
<div className="absolute bottom-4 left-4 bg-slate-300 rounded-md"> {project.network === 0 ? (
{project.emoji ? ( <Lock className="h-3 w-3 text-white" />
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase"> ) : (
{renderEmoji(project.emoji)} <Globe2 className="h-3 w-3 text-white" />
</span> )}
) : project.icon_prop ? ( </span>
renderEmoji(project.icon_prop) </div>
) : null} </div>
</div>
</div> <div className="flex items-center h-full gap-2">
</a>
</Link>
<div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
<Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
<a>
<div className="flex items-center gap-1">
<h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
</div>
<p className="mt-3.5 mb-7 break-words">{truncateText(project.description ?? "", 100)}</p>
</a>
</Link>
<div className="flex h-full items-end justify-between">
<Tooltip
tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
position="bottom"
>
<div className="flex cursor-default items-center gap-1.5 text-xs">
<CalendarDays height={14} width={14} />
{renderShortDateWithYearFormat(project.created_at)}
</div>
</Tooltip>
{project.is_member ? (
<div className="flex items-center gap-1">
<div className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded">
<button <button
className="flex items-center justify-center h-6 w-6 rounded bg-white/30"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
handleCopyText(); handleCopyText();
}} }}
> >
<Link2Icon height={16} width={16} className="-rotate-45" /> <LinkIcon className="h-3 w-3 text-white" />
</button>
<button
className="flex items-center justify-center h-6 w-6 rounded bg-white/30"
onClick={(e) => {
if (project.is_favorite) {
e.preventDefault();
e.stopPropagation();
handleRemoveFromFavorites();
} else {
e.preventDefault();
e.stopPropagation();
handleAddToFavorites();
}
}}
>
<Star
className={`h-3 w-3 ${project.is_favorite ? "fill-orange-400 text-transparent" : "text-white"} `}
/>
</button> </button>
</div> </div>
</div>
</div>
<div className="h-[104px] w-full flex flex-col justify-between p-4 rounded-b">
<p className="text-xs text-custom-text-200 break-words line-clamp-2">{project.description}</p>
<div className="flex item-center justify-between">
<Tooltip
tooltipHeading="Members"
tooltipContent={
project.members && project.members.length > 0
? project.members.map((member) => member?.member__display_name).join(", ")
: "No Assignee"
}
position="top"
>
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
<AssigneesList userIds={projectMembersIds} length={3} showLength={true} />
</div>
</Tooltip>
{(isOwner || isMember) && ( {(isOwner || isMember) && (
<Link href={`/${workspaceSlug}/projects/${project.id}/settings`}> <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
<a className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded"> <a className="flex items-center justify-center p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200 rounded">
<Pencil height={16} width={16} /> <Pencil className="h-3.5 w-3.5" />
</a> </a>
</Link> </Link>
)} )}
{isOwner && (
<div className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded"> {!project.is_member ? (
<button <div className="flex items-center">
<Button
variant="link-primary"
className="!p-0"
onClick={(e) => { onClick={(e) => {
e.stopPropagation();
e.preventDefault(); e.preventDefault();
setDeleteProjectModal(true); e.stopPropagation();
setJoinProjectModal(true);
}} }}
> >
<Trash2 height={16} width={16} /> Join
</button> </Button>
</div> </div>
)} ) : null}
</div> </div>
) : null} </div>
</div> </a>
</div> </Link>
</div> </div>
</> </>
); );

8
web/types/projects.d.ts vendored
View File

@ -33,6 +33,7 @@ export interface IProject {
is_favorite: boolean; is_favorite: boolean;
is_member: boolean; is_member: boolean;
member_role: 5 | 10 | 15 | 20 | null; member_role: 5 | 10 | 15 | 20 | null;
members: IProjectMemberLite[];
issue_views_view: boolean; issue_views_view: boolean;
module_view: boolean; module_view: boolean;
name: string; name: string;
@ -62,6 +63,13 @@ type ProjectPreferences = {
}; };
}; };
export interface IProjectMemberLite {
id: string;
member__avatar: string;
member__display_name: string;
member_id: string;
}
export interface IProjectMember { export interface IProjectMember {
id: string; id: string;
member: IUserMemberLite; member: IUserMemberLite;