style: gantt layout quick-add padding (#2272)

* fix: 'Last Drafted Issue' making sidebar look weird on collapsed * feat: scroll to the bottom when issue is created * fix: 'Add Issue' button overlapping issue card in spreadsheet view * fix: wrong placement of quick-add in calender layout * fix: spacing for issue card in spreadsheet view * style: gantt layout quick-add padding style: removed 'State group' from draft issue * style: decrese shadow, quick-add position on calender layout, and 'add issue' sticky * style: button color
2023-09-27 08:51:29 +05:30
parent 3a6d72e4b6
commit 2d8cbccfbc
10 changed files with 187 additions and 106 deletions
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -67,7 +67,7 @@ export const IssuesFilterView: React.FC = () => {
  const router = useRouter();
  const { workspaceSlug, projectId, viewId } = router.query;
  const isArchivedIssues = router.pathname.includes("archived-issues");
-  const isDraftIssues = router.pathname.includes("draft-issues");
+  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";

  const {
    displayFilters,
@@ -230,6 +230,9 @@ export const IssuesFilterView: React.FC = () => {
                                  return null;
                                if (option.key === "project") return null;

+                                if (isDraftIssues && option.key === "state_detail.group")
+                                  return null;
+
                                return (
                                  <CustomMenu.MenuItem
                                    key={option.key}
--- a/web/components/core/views/board-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/board-view/inline-create-issue-form.tsx
@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const BoardInlineCreateIssueForm: React.FC<Props> = (props) => (
  <>
    <InlineCreateIssueFormWrapper
-      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow"
+      className="flex flex-col justify-between gap-1.5 group/card relative select-none px-3.5 py-3 h-[118px] mb-3 rounded bg-custom-background-100 shadow-custom-shadow-sm"
      {...props}
    >
      <InlineInput />
--- a/web/components/core/views/calendar-view/calendar.tsx
+++ b/web/components/core/views/calendar-view/calendar.tsx
@@ -184,7 +184,7 @@ export const CalendarView: React.FC<Props> = ({
        <div className="h-full overflow-y-auto">
          <DragDropContext onDragEnd={onDragEnd}>
            <div
-              id={`calendar-view-${cycleId ?? moduleId ?? viewId}`}
+              id={`calendar-view-${cycleId ?? moduleId ?? viewId ?? ""}`}
              className="h-full rounded-lg p-8 text-custom-text-200"
            >
              <CalendarHeader
--- a/web/components/core/views/calendar-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/calendar-view/inline-create-issue-form.tsx
@@ -84,13 +84,13 @@ export const CalendarInlineCreateIssueForm: React.FC<Props> = (props) => {
    <>
      <div
        ref={ref}
-        className={`absolute -translate-x-1 top-5 transition-all z-20 ${
+        className={`absolute w-60 top-5 transition-all z-20 ${
          isOpen ? "opacity-100 scale-100" : "opacity-0 pointer-events-none scale-95"
-        } ${isSpaceOnRight ? "left-full" : "right-0"}`}
+        } right-0`}
      >
        <InlineCreateIssueFormWrapper
          {...props}
-          className="flex w-60 p-1 px-1.5 rounded items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-md transition-opacity"
+          className="flex w-full p-1 px-1.5 rounded z-50 items-center gap-x-3 bg-custom-background-100 shadow-custom-shadow-sm transition-opacity"
        >
          <InlineInput />
        </InlineCreateIssueFormWrapper>
--- a/web/components/core/views/calendar-view/single-date.tsx
+++ b/web/components/core/views/calendar-view/single-date.tsx
@@ -39,6 +39,8 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
  const [showAllIssues, setShowAllIssues] = useState(false);
  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);

+  const [formPosition, setFormPosition] = useState({ x: 0, y: 0 });
+
  const totalIssues = date.issues.length;

  return (
@@ -81,16 +83,23 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
              </Draggable>
            ))}

-          <CalendarInlineCreateIssueForm
-            isOpen={isCreateIssueFormOpen}
-            dependencies={[showWeekEnds]}
-            handleClose={() => setIsCreateIssueFormOpen(false)}
-            prePopulatedData={{
-              target_date: date.date,
-              ...(cycleId && { cycle: cycleId.toString() }),
-              ...(moduleId && { module: moduleId.toString() }),
+          <div
+            className="fixed top-0 left-0 z-50"
+            style={{
+              transform: `translate(${formPosition.x}px, ${formPosition.y}px)`,
            }}
-          />
+          >
+            <CalendarInlineCreateIssueForm
+              isOpen={isCreateIssueFormOpen}
+              dependencies={[showWeekEnds]}
+              handleClose={() => setIsCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                target_date: date.date,
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+          </div>

          {totalIssues > 4 && (
            <button
@@ -106,8 +115,11 @@ export const SingleCalendarDate: React.FC<Props> = (props) => {
            className={`absolute top-2 right-2 flex items-center justify-center rounded-md bg-custom-background-80 p-1 text-xs text-custom-text-200 opacity-0 group-hover:opacity-100`}
          >
            <button
+              onClick={(e) => {
+                setIsCreateIssueFormOpen(true);
+                setFormPosition({ x: e.clientX, y: e.clientY });
+              }}
              className="flex items-center justify-center gap-1 text-center"
-              onClick={() => setIsCreateIssueFormOpen(true)}
            >
              <PlusSmallIcon className="h-4 w-4 text-custom-text-200" />
              Add issue
--- a/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/gantt-chart-view/inline-create-issue-form.tsx
@@ -39,7 +39,7 @@ const InlineInput = () => {
        {...register("name", {
          required: "Issue title is required.",
        })}
-        className="w-full px-2 py-1.5 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
+        className="w-full px-2 rounded-md bg-transparent text-sm font-medium leading-5 text-custom-text-200 outline-none"
      />
    </>
  );
--- a/web/components/core/views/list-view/inline-create-issue-form.tsx
+++ b/web/components/core/views/list-view/inline-create-issue-form.tsx
@@ -48,7 +48,7 @@ const InlineInput = () => {
 export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
  <>
    <InlineCreateIssueFormWrapper
-      className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-md"
+      className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-sm z-10"
      {...props}
    >
      <InlineInput />
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -7,6 +7,7 @@ import { KeyedMutator, mutate } from "swr";

 // components
 import {
+  ListInlineCreateIssueForm,
  SpreadsheetAssigneeColumn,
  SpreadsheetCreatedOnColumn,
  SpreadsheetDueDateColumn,
@@ -18,7 +19,7 @@ import {
  SpreadsheetStateColumn,
  SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { Spinner } from "components/ui";
+import { CustomMenu, Spinner } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
@@ -38,6 +39,7 @@ import {
 import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import projectIssuesServices from "services/issues.service";
 // icon
+import { PlusIcon } from "lucide-react";

 type Props = {
  spreadsheetIssues: IIssue[];
@@ -66,9 +68,13 @@ export const SpreadsheetView: React.FC<Props> = ({
  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
  const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);

+  const [isInlineCreateIssueFormOpen, setIsInlineCreateIssueFormOpen] = useState(false);
+
  const router = useRouter();
  const { workspaceSlug, projectId, cycleId, moduleId, viewId, workspaceViewId } = router.query;

+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);

  const workspaceIssuesPath = [
@@ -232,51 +238,106 @@ export const SpreadsheetView: React.FC<Props> = ({
        workspaceSlug={workspaceSlug?.toString() ?? ""}
        readOnly={disableUserActions}
      />
-      <div className="relative flex  h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
-        {spreadsheetIssues ? (
-          <>
-            <div className="sticky left-0 w-[28rem] z-[2]">
-              <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
-                <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
-                  <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
-                    ID
-                  </span>
-                  <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
-                    Issue
-                  </span>
-                </div>
+      <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="h-full w-full flex flex-col">
+          <div className="flex max-h-full overflow-y-auto">
+            {spreadsheetIssues ? (
+              <>
+                <div className="sticky left-0 w-[28rem] z-[2]">
+                  <div className="relative flex flex-col h-max w-full bg-custom-background-100 rounded-sm z-[2]">
+                    <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-200">
+                      <span className="flex items-center px-4 py-2.5 h-full w-20 flex-shrink-0">
+                        ID
+                      </span>
+                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
+                        Issue
+                      </span>
+                    </div>

-                {spreadsheetIssues.map((issue: IIssue, index) => (
-                  <SpreadsheetIssuesColumn
-                    key={`${issue.id}_${index}`}
-                    issue={issue}
-                    projectId={issue.project_detail.id}
-                    expandedIssues={expandedIssues}
-                    setExpandedIssues={setExpandedIssues}
-                    setCurrentProjectId={setCurrentProjectId}
-                    properties={properties}
-                    handleIssueAction={handleIssueAction}
-                    disableUserActions={disableUserActions}
-                    userAuth={userAuth}
-                  />
-                ))}
+                    {spreadsheetIssues.map((issue: IIssue, index) => (
+                      <SpreadsheetIssuesColumn
+                        key={`${issue.id}_${index}`}
+                        issue={issue}
+                        projectId={issue.project_detail.id}
+                        expandedIssues={expandedIssues}
+                        setExpandedIssues={setExpandedIssues}
+                        setCurrentProjectId={setCurrentProjectId}
+                        properties={properties}
+                        handleIssueAction={handleIssueAction}
+                        disableUserActions={disableUserActions}
+                        userAuth={userAuth}
+                      />
+                    ))}
+                  </div>
+                </div>
+                {renderColumn("State", SpreadsheetStateColumn)}
+                {renderColumn("Priority", SpreadsheetPriorityColumn)}
+                {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
+                {renderColumn("Label", SpreadsheetLabelColumn)}
+                {renderColumn("Start Date", SpreadsheetStartDateColumn)}
+                {renderColumn("Due Date", SpreadsheetDueDateColumn)}
+                {renderColumn("Estimate", SpreadsheetEstimateColumn)}
+                {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
+                {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
+              </>
+            ) : (
+              <div className="flex flex-col justify-center items-center h-full w-full">
+                <Spinner />
              </div>
-            </div>
-            {renderColumn("State", SpreadsheetStateColumn)}
-            {renderColumn("Priority", SpreadsheetPriorityColumn)}
-            {renderColumn("Assignees", SpreadsheetAssigneeColumn)}
-            {renderColumn("Label", SpreadsheetLabelColumn)}
-            {renderColumn("Start Date", SpreadsheetStartDateColumn)}
-            {renderColumn("Due Date", SpreadsheetDueDateColumn)}
-            {renderColumn("Estimate", SpreadsheetEstimateColumn)}
-            {renderColumn("Created On", SpreadsheetCreatedOnColumn)}
-            {renderColumn("Updated On", SpreadsheetUpdatedOnColumn)}
-          </>
-        ) : (
-          <div className="flex flex-col justify-center items-center h-full w-full">
-            <Spinner />
+            )}
          </div>
-        )}
+
+          <div>
+            <ListInlineCreateIssueForm
+              isOpen={isInlineCreateIssueFormOpen}
+              handleClose={() => setIsInlineCreateIssueFormOpen(false)}
+              prePopulatedData={{
+                ...(cycleId && { cycle: cycleId.toString() }),
+                ...(moduleId && { module: moduleId.toString() }),
+              }}
+            />
+
+            {type === "issue"
+              ? !disableUserActions &&
+                !isInlineCreateIssueFormOpen && (
+                  <button
+                    className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                    onClick={() => setIsInlineCreateIssueFormOpen(true)}
+                  >
+                    <PlusIcon className="h-4 w-4" />
+                    Add Issue
+                  </button>
+                )
+              : !disableUserActions &&
+                !isInlineCreateIssueFormOpen && (
+                  <CustomMenu
+                    className="sticky left-0 z-10"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-7 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    position="left"
+                    verticalPosition="top"
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem onClick={() => setIsInlineCreateIssueFormOpen(true)}>
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {openIssuesListModal && (
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                        Add an existing issue
+                      </CustomMenu.MenuItem>
+                    )}
+                  </CustomMenu>
+                )}
+          </div>
+        </div>
      </div>
    </>
  );