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: ui improvements and bug fixes (#2758)

Browse Source 
* style: add transition to favorite projects dropdown.

* style: update project integration settings borders.

* style: fix text overflow issue in project views.

* fix: issue with non-functional cancel button in leave project modal.
This commit is contained in:
Prateek Shourya 2023-11-13 14:42:45 +05:30 committed by sriram veeraghanta
parent 21988e8528
commit 16292de8d3
6 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/project/integration-card.tsx
View File

@ -91,7 +91,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
return ( return (
<> <>
{integration && ( {integration && (
<div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"> <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="h-10 w-10 flex-shrink-0"> <div className="h-10 w-10 flex-shrink-0">
<Image <Image

3
web/components/project/leave-project-modal.tsx
View File

@ -30,7 +30,7 @@ export interface ILeaveProjectModal {
} }
export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => { export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
const { project, isOpen } = props; const { project, isOpen, onClose } = props;
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -48,6 +48,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
const handleClose = () => { const handleClose = () => {
reset({ ...defaultValues }); reset({ ...defaultValues });
onClose();
}; };
const onSubmit = async (data: any) => { const onSubmit = async (data: any) => {

55
web/components/project/sidebar-list.tsx
View File

@ -149,29 +149,38 @@ export const ProjectSidebarList: FC = observer(() => {
</button> </button>
</div> </div>
)} )}
<Disclosure.Panel as="div" className="space-y-2"> <Transition
{orderedFavProjects.map((project, index) => ( enter="transition duration-100 ease-out"
<Draggable enterFrom="transform scale-95 opacity-0"
key={project.id} enterTo="transform scale-100 opacity-100"
draggableId={project.id} leave="transition duration-75 ease-out"
index={index} leaveFrom="transform scale-100 opacity-100"
isDragDisabled={!project.is_member} leaveTo="transform scale-95 opacity-0"
> >
{(provided, snapshot) => ( <Disclosure.Panel as="div" className="space-y-2">
<div ref={provided.innerRef} {...provided.draggableProps}> {orderedFavProjects.map((project, index) => (
<ProjectSidebarListItem <Draggable
key={project.id} key={project.id}
project={project} draggableId={project.id}
provided={provided} index={index}
snapshot={snapshot} isDragDisabled={!project.is_member}
handleCopyText={() => handleCopyText(project.id)} >
shortContextMenu {(provided, snapshot) => (
/> <div ref={provided.innerRef} {...provided.draggableProps}>
</div> <ProjectSidebarListItem
)} key={project.id}
</Draggable> project={project}
))} provided={provided}
</Disclosure.Panel> snapshot={snapshot}
handleCopyText={() => handleCopyText(project.id)}
shortContextMenu
/>
</div>
)}
</Draggable>
))}
</Disclosure.Panel>
</Transition>
{provided.placeholder} {provided.placeholder}
</> </>
)} )}

2
web/components/views/delete-view-modal.tsx
View File

@ -104,7 +104,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-custom-text-200"> <p className="text-sm text-custom-text-200">
Are you sure you want to delete view-{" "} Are you sure you want to delete view-{" "}
<span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the <span className="break-all font-medium text-custom-text-100">{data?.name}</span>? All of the
data related to the view will be permanently removed. This action cannot be undone. data related to the view will be permanently removed. This action cannot be undone.
</p> </p>
</div> </div>

6
web/components/views/view-list-item.tsx
View File

@ -61,12 +61,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
<a className="flex items-center justify-between relative rounded p-4 w-full"> <a className="flex items-center justify-between relative rounded p-4 w-full">
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100"> <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
<PhotoFilterIcon className="h-3.5 w-3.5" /> <PhotoFilterIcon className="h-3.5 w-3.5" />
</div> </div>
<div className="flex flex-col"> <div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p> <p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
{view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>} {view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
</div> </div>
</div> </div>
<div className="ml-2 flex flex-shrink-0"> <div className="ml-2 flex flex-shrink-0">

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
View File

@ -43,7 +43,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
return ( return (
<div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}> <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
<div className="flex items-center py-3.5 border-b border-custom-border-200"> <div className="flex items-center py-3.5 border-b border-custom-border-100">
<h3 className="text-xl font-medium">Integrations</h3> <h3 className="text-xl font-medium">Integrations</h3>
</div> </div>
{workspaceIntegrations ? ( {workspaceIntegrations ? (