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 (
<>
{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="h-10 w-10 flex-shrink-0">
<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) => {
const { project, isOpen } = props;
const { project, isOpen, onClose } = props;
// router
const router = useRouter();
const { workspaceSlug } = router.query;
@ -48,6 +48,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
const handleClose = () => {
reset({ ...defaultValues });
onClose();
};
const onSubmit = async (data: any) => {

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

@ -149,29 +149,38 @@ export const ProjectSidebarList: FC = observer(() => {
</button>
</div>
)}
<Disclosure.Panel as="div" className="space-y-2">
{orderedFavProjects.map((project, index) => (
<Draggable
key={project.id}
draggableId={project.id}
index={index}
isDragDisabled={!project.is_member}
>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps}>
<ProjectSidebarListItem
key={project.id}
project={project}
provided={provided}
snapshot={snapshot}
handleCopyText={() => handleCopyText(project.id)}
shortContextMenu
/>
</div>
)}
</Draggable>
))}
</Disclosure.Panel>
<Transition
enter="transition duration-100 ease-out"
enterFrom="transform scale-95 opacity-0"
enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0"
>
<Disclosure.Panel as="div" className="space-y-2">
{orderedFavProjects.map((project, index) => (
<Draggable
key={project.id}
draggableId={project.id}
index={index}
isDragDisabled={!project.is_member}
>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.draggableProps}>
<ProjectSidebarListItem
key={project.id}
project={project}
provided={provided}
snapshot={snapshot}
handleCopyText={() => handleCopyText(project.id)}
shortContextMenu
/>
</div>
)}
</Draggable>
))}
</Disclosure.Panel>
</Transition>
{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">
<p className="text-sm text-custom-text-200">
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.
</p>
</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">
<div className="flex items-center justify-between w-full">
<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" />
</div>
<div className="flex flex-col">
<p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
{view?.description && <p className="text-xs text-custom-text-200">{view.description}</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 break-all">{view.description}</p>}
</div>
</div>
<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 (
<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>
</div>
{workspaceIntegrations ? (