fix: bug fixes and ui improvements (#2703)

* fix: gantt chart duration in decimal * fix: Loading text instead Spinner in peek view * fix: cycle more popover typo & icon overlapping * fix: list layout properties alignment * fix: project search empty state * fix: calendar layout issue text overflow & redirection inconsistency * style: urgent priority hover background color * fix: Cycle issues kanban layout empty state missing * style: custom snooze modal placeholder text color * refactor: replaced unwanted anchor tag with div * chore: removed empty state for cycle kanban layout
2024-06-14 14:31:34 +00:00 · 2023-11-08 17:52:34 +05:30 · 2023-11-08 17:52:34 +05:30 · 5a3bac998e
commit 5a3bac998e
parent 4096136b44
8 changed files with 56 additions and 49 deletions
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -231,7 +231,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
              </button>
            )}

-            <CustomMenu width="auto" ellipsis className="z-10">
+            <CustomMenu width="auto" ellipsis >
              {!isCompleted && (
                <>
                  <CustomMenu.MenuItem onClick={handleEditCycle}>
@ -243,7 +243,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                  <CustomMenu.MenuItem onClick={handleDeleteCycle}>
                    <span className="flex items-center justify-start gap-2">
                      <Trash2 className="h-3 w-3" />
-                      <span>Delete module</span>
+                      <span>Delete cycle</span>
                    </span>
                  </CustomMenu.MenuItem>
                </>
--- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@ -34,39 +34,38 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
              {issue?.tempId !== undefined && (
                <div className="absolute top-0 left-0 w-full h-full animate-pulse bg-custom-background-100/20 z-[99999]" />
              )}
-              <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
-                <a
-                  className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
-                    snapshot.isDragging
-                      ? "shadow-custom-shadow-rg bg-custom-background-90"
-                      : "bg-custom-background-100 hover:bg-custom-background-90"
-                  }`}
+
+              <div
+                className={`group/calendar-block h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
+                  snapshot.isDragging
+                    ? "shadow-custom-shadow-rg bg-custom-background-90"
+                    : "bg-custom-background-100 hover:bg-custom-background-90"
+                }`}
+              >
+                <span
+                  className="h-full w-0.5 rounded flex-shrink-0"
+                  style={{
+                    backgroundColor: issue.state_detail.color,
+                  }}
+                />
+                <div className="text-xs text-custom-text-300 flex-shrink-0">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+                <IssuePeekOverview
+                  workspaceSlug={issue?.workspace_detail?.slug}
+                  projectId={issue?.project_detail?.id}
+                  issueId={issue?.id}
+                  // TODO: add the logic here
+                  handleIssue={(issueToUpdate) => {
+                    handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
+                  }}
                >
-                  <span
-                    className="h-full w-0.5 rounded flex-shrink-0"
-                    style={{
-                      backgroundColor: issue.state_detail.color,
-                    }}
-                  />
-                  <div className="text-xs text-custom-text-300 flex-shrink-0">
-                    {issue.project_detail.identifier}-{issue.sequence_id}
-                  </div>
-                  <IssuePeekOverview
-                    workspaceSlug={issue?.workspace_detail?.slug}
-                    projectId={issue?.project_detail?.id}
-                    issueId={issue?.id}
-                    // TODO: add the logic here
-                    handleIssue={(issueToUpdate) => {
-                      handleIssues(issue.target_date ?? "", { ...issue, ...issueToUpdate }, "update");
-                    }}
-                  >
-                    <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                      <span className="text-xs flex-grow truncate">{issue.name}</span>
-                    </Tooltip>
-                  </IssuePeekOverview>
-                  <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
-                </a>
-              </Link>
+                  <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
+                    <div className="text-xs truncate">{issue.name}</div>
+                  </Tooltip>
+                </IssuePeekOverview>
+                <div className="hidden group-hover/calendar-block:block">{quickActions(issue)}</div>
+              </div>
            </div>
          )}
        </Draggable>
--- a/web/components/issues/issue-layouts/list/properties.tsx
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@ -54,7 +54,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
  };

  return (
-    <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+    <div className="relative flex items-center gap-2 overflow-x-auto whitespace-nowrap">
      {/* basic properties */}
      {/* state */}
      {displayProperties && displayProperties?.state && (
--- a/web/components/issues/issue-peek-overview/view.tsx
+++ b/web/components/issues/issue-peek-overview/view.tsx
@ -7,7 +7,7 @@ import { MoveRight, MoveDiagonal, Bell, Link2, Trash2 } from "lucide-react";
 import { PeekOverviewIssueDetails } from "./issue-detail";
 import { PeekOverviewProperties } from "./properties";
 import { IssueComment } from "./activity";
-import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon } from "@plane/ui";
+import { Button, CenterPanelIcon, CustomSelect, FullScreenPanelIcon, SidePanelIcon, Spinner } from "@plane/ui";
 import { DeleteIssueModal } from "../delete-issue-modal";
 import { DeleteArchivedIssueModal } from "../delete-archived-issue-modal";
 // types
@ -154,7 +154,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
          onSubmit={handleDeleteIssue}
        />
      )}
-      <div className="w-full !text-base">
+      <div className="w-full truncate !text-base">
        {children && (
          <div onClick={updateRoutePeekId} className="w-full cursor-pointer">
            {children}
@ -251,7 +251,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                <div className="absolute top-0 left-0 h-full w-full z-[999] flex items-center justify-center bg-custom-background-100 opacity-60" />
              )}
              {isLoading && !issue ? (
-                <div className="text-center py-10">Loading...</div>
+                <div className="h-full w-full flex items-center justify-center"><Spinner/></div>
              ) : (
                issue && (
                  <>
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@ -171,7 +171,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
                              setValue("time", null);
                              onChange(val);
                            }}
-                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 focus:outline-none !text-sm"
+                            className="px-3 py-2 w-full rounded-md border border-custom-border-300 bg-custom-background-100 text-custom-text-100 placeholder:!text-custom-text-400 focus:outline-none !text-sm"
                            wrapperClassName="w-full"
                            noBorder
                            minDate={new Date()}
--- a/web/components/project/card-list.tsx
+++ b/web/components/project/card-list.tsx
@ -38,12 +38,16 @@ export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
  return (
    <>
      {projects.length > 0 ? (
-        <div className="h-full p-8 overflow-y-auto">
-          <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-            {projectStore.searchedProjects.map((project) => (
-              <ProjectCard key={project.id} project={project} />
-            ))}
-          </div>
+        <div className="h-full w-full p-8 overflow-y-auto">
+          {projectStore.searchedProjects.length == 0 ? (
+            <div className="w-full text-center text-custom-text-400 mt-10">No matching projects</div>
+          ) : (
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+              {projectStore.searchedProjects.map((project) => (
+                <ProjectCard key={project.id} project={project} />
+              ))}
+            </div>
+          )}
        </div>
      ) : (
        <EmptyState
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@ -107,9 +107,13 @@ export const PrioritySelect: React.FC<Props> = ({
                ? "border-red-500/20 bg-red-500"
                : "border-custom-border-300"
              : "border-custom-border-300"
-          } ${!disabled ? "hover:bg-custom-background-80" : ""} ${
-            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"
-          } ${buttonClassName}`}
+          } ${
+            !disabled
+              ? `${
+                  value === "urgent" && highlightUrgentPriority ? "hover:bg-red-400" : "hover:bg-custom-background-80"
+                }`
+              : ""
+          } ${disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer"} ${buttonClassName}`}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@ -373,7 +373,7 @@ export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | s

  // find number of days between startDate and endDate
  const diffInTime = endDate.getTime() - startDate.getTime();
-  const diffInDays = diffInTime / (1000 * 3600 * 24);
+  const diffInDays = Math.floor(diffInTime / (1000 * 3600 * 24));

  // if inclusive is true, add 1 to diffInDays
  if (inclusive) return diffInDays + 1;