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

[WEB-823] fix: quick add flicker and dropdown placement in calendar layout (#4054)

Browse Source 
* chore: placement prop added in quick action menu

* fix: calenar layout quick action menu placement

* fix: calendar quick add flicker
This commit is contained in:
Anmol Singh Bhatia 2024-03-25 14:17:34 +05:30 committed by GitHub
parent 9f9e508bb7
commit 7e0037b06b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/components/issues/issue-layouts/calendar/base-calendar-root.tsx
View File

@ -89,7 +89,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
groupedIssueIds={groupedIssueIds}
layout={displayFilters?.calendar?.layout}
showWeekends={displayFilters?.calendar?.show_weekends ?? false}
quickActions={(issue, customActionButton) => (
quickActions={(issue, customActionButton, placement) => (
<QuickActions
customActionButton={customActionButton}
issue={issue}
@ -101,6 +101,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
readOnly={!isEditingAllowed || isCompletedCycle}
placements={placement}
/>
)}
addIssuesToView={addIssuesToView}

3
web/components/issues/issue-layouts/calendar/calendar.tsx
View File

@ -1,4 +1,5 @@
import { useState } from "react";
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react-lite";
import type {
IIssueDisplayFilterOptions,
@ -37,7 +38,7 @@ type Props = {
groupedIssueIds: TGroupedIssues;
layout: "month" | "week" | undefined;
showWeekends: boolean;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
quickAddCallback?: (
workspaceSlug: string,
projectId: string,

3
web/components/issues/issue-layouts/calendar/day-tile.tsx
View File

@ -1,4 +1,5 @@
import { Droppable } from "@hello-pangea/dnd";
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react-lite";
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
// components
@ -19,7 +20,7 @@ type Props = {
date: ICalendarDate;
issues: TIssueMap | undefined;
groupedIssueIds: TGroupedIssues;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean;
quickAddCallback?: (

3
web/components/issues/issue-layouts/calendar/issue-block-root.tsx
View File

@ -1,4 +1,5 @@
import React from "react";
import { Placement } from "@popperjs/core";
// components
import { TIssue, TIssueMap } from "@plane/types";
import { CalendarIssueBlock } from "@/components/issues";
@ -7,7 +8,7 @@ import { CalendarIssueBlock } from "@/components/issues";
type Props = {
issues: TIssueMap | undefined;
issueId: string;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
isDragging?: boolean;
};

10
web/components/issues/issue-layouts/calendar/issue-block.tsx
View File

@ -1,4 +1,5 @@
import { useState, useRef } from "react";
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react";
import { MoreHorizontal } from "lucide-react";
import { TIssue } from "@plane/types";
@ -14,7 +15,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
type Props = {
issue: TIssue;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
isDragging?: boolean;
};
@ -56,6 +57,11 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
</div>
);
const isMenuActionRefAboveScreenBottom =
menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
return (
<ControlLink
href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
@ -104,7 +110,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
e.stopPropagation();
}}
>
{quickActions(issue, customActionButton)}
{quickActions(issue, customActionButton, placement)}
</div>
</div>
</>

3
web/components/issues/issue-layouts/calendar/issue-blocks.tsx
View File

@ -1,5 +1,6 @@
import { useState } from "react";
import { Draggable } from "@hello-pangea/dnd";
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react-lite";
import { TIssue, TIssueMap } from "@plane/types";
// components
@ -12,7 +13,7 @@ type Props = {
date: Date;
issues: TIssueMap | undefined;
issueIdList: string[] | null;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
isDragDisabled?: boolean;
enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean;

2
web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx
View File

@ -230,7 +230,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
{!isOpen && (
<div
className={cn("md:hidden rounded md:border-[0.5px] border-custom-border-200 md:group-hover:block", {
className={cn("md:opacity-0 rounded md:border-[0.5px] border-custom-border-200 md:group-hover:opacity-100", {
block: isMenuOpen,
})}
>

3
web/components/issues/issue-layouts/calendar/week-days.tsx
View File

@ -1,3 +1,4 @@
import { Placement } from "@popperjs/core";
import { observer } from "mobx-react-lite";
import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
// components
@ -16,7 +17,7 @@ type Props = {
issues: TIssueMap | undefined;
groupedIssueIds: TGroupedIssues;
week: ICalendarWeek | undefined;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
enableQuickIssueCreate?: boolean;
disableIssueCreation?: boolean;
quickAddCallback?: (

2
web/components/issues/issue-layouts/list/list-view-types.d.ts vendored
View File

@ -1,3 +1,4 @@
import { Placement } from "@popperjs/core";
import { TIssue } from "@plane/types";
export interface IQuickActionProps {
@ -10,4 +11,5 @@ export interface IQuickActionProps {
customActionButton?: React.ReactElement;
portalElement?: HTMLDivElement | null;
readOnly?: boolean;
placements?: Placement;
}

3
web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
View File

@ -31,6 +31,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
customActionButton,
portalElement,
readOnly = false,
placements = "bottom-start",
} = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@ -107,7 +108,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
/>
<CustomMenu
menuItemsClassName="z-[14]"
placement="bottom-start"
placement={placements}
customButton={customActionButton}
portalElement={portalElement}
maxHeight="lg"

3
web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
View File

@ -30,6 +30,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
customActionButton,
portalElement,
readOnly = false,
placements = "bottom-start",
} = props;
// states
const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@ -106,7 +107,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
/>
<CustomMenu
menuItemsClassName="z-[14]"
placement="bottom-start"
placement={placements}
customButton={customActionButton}
portalElement={portalElement}
maxHeight="lg"

3
web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
View File

@ -28,6 +28,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
customActionButton,
portalElement,
readOnly = false,
placements = "bottom-start",
} = props;
// router
const router = useRouter();
@ -107,7 +108,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
/>
<CustomMenu
menuItemsClassName="z-[14]"
placement="bottom-start"
placement={placements}
customButton={customActionButton}
portalElement={portalElement}
maxHeight="lg"