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: list layout (#2566)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-31 12:14:06 +05:30 committed by GitHub
parent 08ca016f65
commit 59c52023fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/src/dropdowns/helper.tsx
View File

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

4
web/components/headers/cycle-issues.tsx
View File

@ -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}

4
web/components/headers/global-issues.tsx
View File

@ -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}

4
web/components/headers/module-issues.tsx
View File

@ -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}

4
web/components/headers/project-issues.tsx
View File

@ -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}

4
web/components/headers/project-view-issues.tsx
View File

@ -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}

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

@ -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 (

2
web/components/issues/issue-layouts/list/block.tsx
View File

@ -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}

12
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@ -21,9 +21,8 @@ export const IssueBlocksList: FC<Props> = (props) => {
props;
return (
<>
{issues &&
issues?.length > 0 &&
<div className="w-full h-full relative divide-y-[0.5px] divide-custom-border-200">
{issues && 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>
);
};

30
web/components/issues/issue-layouts/list/default.tsx
View File

@ -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,21 +63,19 @@ 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}
issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
handleIssues={handleIssues}
quickActions={quickActions}
display_properties={display_properties}
states={states}
labels={labels}
members={members}
estimates={estimates}
/>
)}
</div>
{issues && (
<IssueBlocksList
columnId={getValueFromObject(_list, listKey) as string}
issues={is_list ? issues : issues[getValueFromObject(_list, listKey) as string]}
handleIssues={handleIssues}
quickActions={quickActions}
display_properties={display_properties}
states={states}
labels={labels}
members={members}
estimates={estimates}
/>
)}
{enableQuickIssueCreate && (
<ListInlineCreateIssueForm
groupId={getValueFromObject(_list, listKey) as string}

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

@ -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>
)}

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

@ -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();

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

@ -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();

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

@ -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();

4
web/components/profile/profile-issues-filter.tsx
View File

@ -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}