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

style: list view (#409)

Browse Source 
* style: list view

* style: list board header spacing fix
This commit is contained in:
Anmol Singh Bhatia 2023-03-09 16:05:25 +05:30 committed by GitHub
parent 981a246db1
commit e3e57df4a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 157 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/components/core/list-view/all-lists.tsx
View File

@ -38,15 +38,25 @@ export const AllLists: React.FC<Props> = ({
return ( return (
<div className="flex flex-col space-y-5"> <div className="flex flex-col space-y-5">
{Object.keys(groupedByIssues).map((singleGroup) => { {Object.keys(groupedByIssues).map((singleGroup) => {
const currentState =
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)
: null;
const stateId = const stateId =
selectedGroup === "state_detail.name" selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id ?? null ? states?.find((s) => s.name === singleGroup)?.id ?? null
: null; : null;
const bgColor =
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.color
: "#000000";
return ( return (
<SingleList <SingleList
key={singleGroup} key={singleGroup}
type={type} type={type}
currentState={currentState}
bgColor={bgColor}
groupTitle={singleGroup} groupTitle={singleGroup}
groupedByIssues={groupedByIssues} groupedByIssues={groupedByIssues}
selectedGroup={selectedGroup} selectedGroup={selectedGroup}

171
apps/app/components/core/list-view/single-issue.tsx
View File

@ -27,7 +27,7 @@ import {
TrashIcon, TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard, truncateText } from "helpers/string.helper";
// types // types
import { CycleIssueResponse, IIssue, ModuleIssueResponse, Properties, UserAuth } from "types"; import { CycleIssueResponse, IIssue, ModuleIssueResponse, Properties, UserAuth } from "types";
// fetch-keys // fetch-keys
@ -176,21 +176,15 @@ export const SingleListIssue: React.FC<Props> = ({
Copy issue link Copy issue link
</ContextMenu.Item> </ContextMenu.Item>
</ContextMenu> </ContextMenu>
<div <div className="border-b border-gray-300 last:border-b-0">
className="flex items-center justify-between gap-2 px-4 py-3 text-sm" <div
onContextMenu={(e) => { className="flex items-center justify-between gap-2 px-4 py-4"
e.preventDefault(); onContextMenu={(e) => {
setContextMenu(true); e.preventDefault();
setContextMenuPosition({ x: e.pageX, y: e.pageY }); setContextMenu(true);
}} setContextMenuPosition({ x: e.pageX, y: e.pageY });
> }}
<div className="flex items-center gap-2"> >
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
/>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2"> <a className="group relative flex items-center gap-2">
{properties.key && ( {properties.key && (
@ -198,88 +192,89 @@ export const SingleListIssue: React.FC<Props> = ({
tooltipHeading="ID" tooltipHeading="ID"
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`} tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
> >
<span className="flex-shrink-0 text-xs text-gray-500"> <span className="flex-shrink-0 text-sm text-gray-400">
{issue.project_detail?.identifier}-{issue.sequence_id} {issue.project_detail?.identifier}-{issue.sequence_id}
</span> </span>
</Tooltip> </Tooltip>
)} )}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}> <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap"> <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
{issue.name}
</span>
</Tooltip> </Tooltip>
</a> </a>
</Link> </Link>
</div>
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs"> <div className="flex flex-wrap items-center gap-3 text-xs">
{properties.priority && ( {properties.priority && (
<ViewPrioritySelect <ViewPrioritySelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
position="right" position="right"
isNotAllowed={isNotAllowed} isNotAllowed={isNotAllowed}
/> />
)} )}
{properties.state && ( {properties.state && (
<ViewStateSelect <ViewStateSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
position="right" position="right"
isNotAllowed={isNotAllowed} isNotAllowed={isNotAllowed}
/> />
)} )}
{properties.due_date && ( {properties.due_date && (
<ViewDueDateSelect <ViewDueDateSelect
issue={issue} issue={issue}
partialUpdateIssue={partialUpdateIssue} partialUpdateIssue={partialUpdateIssue}
isNotAllowed={isNotAllowed} isNotAllowed={isNotAllowed}
/> />
)} )}
{properties.sub_issue_count && ( {properties.sub_issue_count && (
<div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm"> <div className="flex items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}
{properties.labels && ( {properties.labels && issue.label_details.length > 0 ? (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
>
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" key={label.id}
style={{ className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
backgroundColor: label?.color && label.color !== "" ? label.color : "#000", >
}} <span
/> className="h-1.5 w-1.5 rounded-full"
{label.name} style={{
</span> backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
))} }}
</div> />
)} {label.name}
{properties.assignee && ( </span>
<ViewAssigneeSelect ))}
issue={issue} </div>
partialUpdateIssue={partialUpdateIssue} ) : (
position="right" ""
isNotAllowed={isNotAllowed} )}
/> {properties.assignee && (
)} <ViewAssigneeSelect
{type && !isNotAllowed && ( issue={issue}
<CustomMenu width="auto" ellipsis> partialUpdateIssue={partialUpdateIssue}
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> position="right"
{type !== "issue" && removeIssue && ( isNotAllowed={isNotAllowed}
<CustomMenu.MenuItem onClick={removeIssue}> />
<>Remove from {type}</> )}
{type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
Delete issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> </CustomMenu>
Delete issue )}
</CustomMenu.MenuItem> </div>
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
</CustomMenu>
)}
</div> </div>
</div> </div>
</> </>

122
apps/app/components/core/list-view/single-list.tsx
View File

@ -7,15 +7,18 @@ import useIssuesProperties from "hooks/use-issue-properties";
// components // components
import { SingleListIssue } from "components/core"; import { SingleListIssue } from "components/core";
// icons // icons
import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/24/outline";
import { getStateGroupIcon } from "components/icons";
// helpers // helpers
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";
// types // types
import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types"; import { IIssue, IProjectMember, IState, NestedKeyOf, UserAuth } from "types";
import { CustomMenu } from "components/ui"; import { CustomMenu } from "components/ui";
type Props = { type Props = {
type?: "issue" | "cycle" | "module"; type?: "issue" | "cycle" | "module";
currentState?: IState | null;
bgColor?: string;
groupTitle: string; groupTitle: string;
groupedByIssues: { groupedByIssues: {
[key: string]: IIssue[]; [key: string]: IIssue[];
@ -33,6 +36,8 @@ type Props = {
export const SingleList: React.FC<Props> = ({ export const SingleList: React.FC<Props> = ({
type, type,
currentState,
bgColor,
groupTitle, groupTitle,
groupedByIssues, groupedByIssues,
selectedGroup, selectedGroup,
@ -69,17 +74,23 @@ export const SingleList: React.FC<Props> = ({
return ( return (
<Disclosure key={groupTitle} as="div" defaultOpen> <Disclosure key={groupTitle} as="div" defaultOpen>
{({ open }) => ( {({ open }) => (
<div className="rounded-lg bg-white"> <div className="rounded-[10px] border border-gray-300 bg-white">
<div className="rounded-t-lg bg-gray-100 px-4 py-3"> <div
className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
open ? "rounded-t-[10px]" : "rounded-[10px]"
}`}
>
<Disclosure.Button> <Disclosure.Button>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-3">
<span> {selectedGroup !== null && selectedGroup === "state_detail.name" ? (
<ChevronDownIcon <span>
className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`} {currentState && getStateGroupIcon(currentState.group, "20", "20", bgColor)}
/> </span>
</span> ) : (
""
)}
{selectedGroup !== null ? ( {selectedGroup !== null ? (
<h2 className="font-medium capitalize leading-5"> <h2 className="text-xl font-semibold capitalize leading-6 text-gray-800">
{selectedGroup === "created_by" {selectedGroup === "created_by"
? createdBy ? createdBy
: selectedGroup === "assignees" : selectedGroup === "assignees"
@ -89,65 +100,25 @@ export const SingleList: React.FC<Props> = ({
) : ( ) : (
<h2 className="font-medium leading-5">All Issues</h2> <h2 className="font-medium leading-5">All Issues</h2>
)} )}
<p className="text-sm text-gray-500"> <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
{groupedByIssues[groupTitle as keyof IIssue].length} {groupedByIssues[groupTitle as keyof IIssue].length}
</p> </span>
</div> </div>
</Disclosure.Button> </Disclosure.Button>
</div>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
<div className="divide-y-2">
{groupedByIssues[groupTitle] ? (
groupedByIssues[groupTitle].length > 0 ? (
groupedByIssues[groupTitle].map((issue: IIssue) => (
<SingleListIssue
key={issue.id}
type={type}
issue={issue}
properties={properties}
editIssue={() => handleEditIssue(issue)}
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue}
removeIssue={() => {
removeIssue && removeIssue(issue.bridge);
}}
userAuth={userAuth}
/>
))
) : (
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
)
) : (
<div className="flex h-full w-full items-center justify-center">Loading...</div>
)}
</div>
</Disclosure.Panel>
</Transition>
<div className="p-3">
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="button" type="button"
className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100" className="p-1 text-gray-500 hover:bg-gray-100"
onClick={addIssueToState} onClick={addIssueToState}
> >
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-4 w-4" />
Add issue
</button> </button>
) : ( ) : (
<CustomMenu <CustomMenu
label={ label={
<span className="flex items-center gap-1"> <span className="flex items-center">
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-4 w-4" />
Add issue
</span> </span>
} }
optionsPosition="left" optionsPosition="left"
@ -162,6 +133,41 @@ export const SingleList: React.FC<Props> = ({
</CustomMenu> </CustomMenu>
)} )}
</div> </div>
<Transition
show={open}
enter="transition duration-100 ease-out"
enterFrom="transform opacity-0"
enterTo="transform opacity-100"
leave="transition duration-75 ease-out"
leaveFrom="transform opacity-100"
leaveTo="transform opacity-0"
>
<Disclosure.Panel>
{groupedByIssues[groupTitle] ? (
groupedByIssues[groupTitle].length > 0 ? (
groupedByIssues[groupTitle].map((issue: IIssue) => (
<SingleListIssue
key={issue.id}
type={type}
issue={issue}
properties={properties}
editIssue={() => handleEditIssue(issue)}
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue}
removeIssue={() => {
removeIssue && removeIssue(issue.bridge);
}}
userAuth={userAuth}
/>
))
) : (
<p className="px-4 py-3 text-sm text-gray-500">No issues.</p>
)
) : (
<div className="flex h-full w-full items-center justify-center">Loading...</div>
)}
</Disclosure.Panel>
</Transition>
</div> </div>
)} )}
</Disclosure> </Disclosure>