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

style: sidebar project list improvement (#1767)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-08-02 14:21:26 +05:30 committed by GitHub
parent b61adbed4b
commit 584192faba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/app/components/project/sidebar-list.tsx
View File

@ -130,7 +130,7 @@ export const ProjectSidebarList: FC = () => {
data={projectToDelete} data={projectToDelete}
user={user} user={user}
/> />
<div className="h-full overflow-y-auto px-5 space-y-3 pt-3 border-t border-custom-sidebar-border-300"> <div className="h-full overflow-y-auto px-4 space-y-3 pt-3 border-t border-custom-sidebar-border-300">
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="favorite-projects"> <Droppable droppableId="favorite-projects">
{(provided) => ( {(provided) => (

18
apps/app/components/project/single-sidebar-project.tsx
View File

@ -170,17 +170,17 @@ export const SingleSidebarProject: React.FC<Props> = ({
> >
<Disclosure.Button <Disclosure.Button
as="div" as="div"
className={`flex items-center w-full cursor-pointer select-none text-left text-sm font-medium ${ className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
sidebarCollapse ? "justify-center" : `justify-between` sidebarCollapse ? "justify-center" : `justify-between`
}`} }`}
> >
<div className="flex items-center gap-x-2"> <div className="flex items-center flex-grow w-full truncate gap-x-2">
{project.emoji ? ( {project.emoji ? (
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase"> <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
{renderEmoji(project.emoji)} {renderEmoji(project.emoji)}
</span> </span>
) : project.icon_prop ? ( ) : project.icon_prop ? (
<div className="h-7 w-7 grid place-items-center"> <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
{renderEmoji(project.icon_prop)} {renderEmoji(project.icon_prop)}
</div> </div>
) : ( ) : (
@ -190,19 +190,15 @@ export const SingleSidebarProject: React.FC<Props> = ({
)} )}
{!sidebarCollapse && ( {!sidebarCollapse && (
<p <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
className={`overflow-hidden text-ellipsis ${ {project.name}
open ? "" : "text-custom-sidebar-text-200"
}`}
>
{truncateText(project.name, 15)}
</p> </p>
)} )}
</div> </div>
{!sidebarCollapse && ( {!sidebarCollapse && (
<ExpandMoreOutlined <ExpandMoreOutlined
fontSize="small" fontSize="small"
className={`${ className={`flex-shrink-0 ${
open ? "rotate-180" : "" open ? "rotate-180" : ""
} !hidden group-hover:!block text-custom-sidebar-text-200 duration-300`} } !hidden group-hover:!block text-custom-sidebar-text-200 duration-300`}
/> />
@ -211,7 +207,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
</Tooltip> </Tooltip>
{!sidebarCollapse && ( {!sidebarCollapse && (
<CustomMenu className="hidden group-hover:block" ellipsis> <CustomMenu className="hidden group-hover:block flex-shrink-0" ellipsis>
{!shortContextMenu && ( {!shortContextMenu && (
<CustomMenu.MenuItem onClick={handleDeleteProject}> <CustomMenu.MenuItem onClick={handleDeleteProject}>
<span className="flex items-center justify-start gap-2 "> <span className="flex items-center justify-start gap-2 ">