style: list layout (#2566)

packages/ui/src/dropdowns/helper.tsx

@@ -1,3 +1,4 @@
+// FIXME: fix this!!!
 import { Placement } from "@blueprintjs/popover2";
 
 export interface IDropdownProps {

web/components/headers/cycle-issues.tsx

@@ -147,7 +147,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={cycleIssueFilterStore.cycleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -159,7 +159,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

web/components/headers/global-issues.tsx

@@ -128,7 +128,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
           {activeLayout === "spreadsheet" && (
             <>
               {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
-                <FiltersDropdown title="Filters">
+                <FiltersDropdown title="Filters" placement="bottom-end">
                   <FilterSelection
                     filters={storedFilters ?? {}}
                     handleFiltersUpdate={handleFiltersUpdate}
@@ -140,7 +140,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
                 </FiltersDropdown>
               )}
 
-              <FiltersDropdown title="Display">
+              <FiltersDropdown title="Display" placement="bottom-end">
                 <DisplayFiltersSelection
                   displayFilters={workspaceFilterStore.workspaceDisplayFilters}
                   displayProperties={workspaceFilterStore.workspaceDisplayProperties}

web/components/headers/module-issues.tsx

@@ -150,7 +150,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={moduleFilterStore.moduleFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -162,7 +162,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

web/components/headers/project-issues.tsx

@@ -146,7 +146,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters">
+          <FiltersDropdown title="Filters" placement="bottom-end">
             <FilterSelection
               filters={issueFilterStore.userFilters}
               handleFiltersUpdate={handleFiltersUpdate}
@@ -158,7 +158,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
               states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display">
+          <FiltersDropdown title="Display" placement="bottom-end">
             <DisplayFiltersSelection
               displayFilters={issueFilterStore.userDisplayFilters}
               displayProperties={issueFilterStore.userDisplayProperties}

web/components/headers/project-view-issues.tsx

@@ -135,7 +135,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           onChange={(layout) => handleLayoutChange(layout)}
           selectedLayout={activeLayout}
         />
-        <FiltersDropdown title="Filters">
+        <FiltersDropdown title="Filters" placement="bottom-end">
           <FilterSelection
             filters={storedFilters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
@@ -147,7 +147,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="Display">
+        <FiltersDropdown title="Display" placement="bottom-end">
           <DisplayFiltersSelection
             displayFilters={issueFilterStore.userDisplayFilters}
             displayProperties={issueFilterStore.userDisplayProperties}

web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
-
+import { Placement } from "@popperjs/core";
 // ui
 import { Button } from "@plane/ui";
 // icons
@@ -10,16 +10,17 @@ import { ChevronUp } from "lucide-react";
 type Props = {
   children: React.ReactNode;
   title?: string;
+  placement?: Placement;
 };
 
 export const FiltersDropdown: React.FC<Props> = (props) => {
-  const { children, title = "Dropdown" } = props;
+  const { children, title = "Dropdown", placement } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "auto",
+    placement: placement ?? "auto",
   });
 
   return (

web/components/issues/issue-layouts/list/block.tsx

@@ -27,7 +27,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
 
   return (
     <>
-      <div className="text-sm p-3 relative shadow-custom-shadow-2xs bg-custom-background-100 flex items-center gap-3 border-b border-custom-border-200 hover:bg-custom-background-80">
+      <div className="text-sm p-3 relative bg-custom-background-100 flex items-center gap-3">
         {display_properties && display_properties?.key && (
           <div className="flex-shrink-0 text-xs text-custom-text-300">
             {issue?.project_detail?.identifier}-{issue.sequence_id}

web/components/issues/issue-layouts/list/blocks-list.tsx

@@ -21,9 +21,8 @@ export const IssueBlocksList: FC<Props> = (props) => {
     props;
 
   return (
-    <>
+    <div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
-      {issues &&
+      {issues && issues.length > 0 ? (
-        issues?.length > 0 &&
         issues.map((issue) => (
           <IssueBlock
             key={issue.id}
@@ -37,7 +36,10 @@ export const IssueBlocksList: FC<Props> = (props) => {
             members={members}
             estimates={estimates}
           />
-        ))}
+        ))
-    </>
+      ) : (
+        <div className="bg-custom-background-100 text-custom-text-400 text-sm p-3">No issues</div>
+      )}
+    </div>
   );
 };

web/components/issues/issue-layouts/list/default.tsx

@@ -53,7 +53,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
         list.length > 0 &&
         list.map((_list: any) => (
           <div key={getValueFromObject(_list, listKey) as string} className={`flex-shrink-0 flex flex-col`}>
-            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3 border-b border-custom-border-100">
+            <div className="flex-shrink-0 w-full py-1 sticky top-0 z-[2] px-3">
               <ListGroupByHeaderRoot
                 column_id={getValueFromObject(_list, listKey) as string}
                 column_value={_list}
@@ -63,7 +63,6 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                 }
               />
             </div>
-            <div className={`w-full h-full relative transition-all`}>
             {issues && (
               <IssueBlocksList
                 columnId={getValueFromObject(_list, listKey) as string}
@@ -77,7 +76,6 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
                 estimates={estimates}
               />
             )}
-            </div>
             {enableQuickIssueCreate && (
               <ListInlineCreateIssueForm
                 groupId={getValueFromObject(_list, listKey) as string}

web/components/issues/issue-layouts/list/inline-create-issue-form.tsx

@@ -161,7 +161,7 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div>
+    <div className="bg-custom-background-100">
       <Transition
         show={isOpen}
         enter="transition ease-in-out duration-200 transform"
@@ -189,10 +189,10 @@ export const ListInlineCreateIssueForm: React.FC<Props> = observer((props) => {
       {!isOpen && (
         <button
           type="button"
-          className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
+          className="flex items-center gap-x-[6px] text-custom-primary-100 px-3 py-1 rounded-md"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" />
+          <PlusIcon className="h-3 w-3" />
           <span className="text-sm font-medium text-custom-primary-100">New Issue</span>
         </button>
       )}

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

@@ -62,7 +62,7 @@ export const CycleIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

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

@@ -62,7 +62,7 @@ export const ModuleIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

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

@@ -61,7 +61,7 @@ export const ProjectIssueQuickActions: React.FC<Props> = (props) => {
           if (issueToEdit) handleUpdate({ ...issueToEdit, ...data });
         }}
       />
-      <CustomMenu ellipsis>
+      <CustomMenu placement="bottom-start" ellipsis>
         <CustomMenu.MenuItem
           onClick={(e) => {
             e.preventDefault();

web/components/profile/profile-issues-filter.tsx

@@ -41,7 +41,7 @@ export const ProfileIssuesFilter = observer(() => {
         selectedLayout={activeLayout}
       />
 
-      <FiltersDropdown title="Filters">
+      <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={profileIssueFiltersStore.userFilters}
           handleFiltersUpdate={handleFilters}
@@ -54,7 +54,7 @@ export const ProfileIssuesFilter = observer(() => {
         />
       </FiltersDropdown>
 
-      <FiltersDropdown title="Display">
+      <FiltersDropdown title="Display" placement="bottom-end">
         <DisplayFiltersSelection
           displayFilters={profileIssueFiltersStore.userDisplayFilters}
           displayProperties={profileIssueFiltersStore.userDisplayProperties}