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

style: list view styling reduced (#867)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-04-18 01:15:10 +05:30 committed by GitHub
parent 396fbc4ebb
commit 5f20e65ca6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 153 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/components/core/board-view/board-header.tsx
View File

@ -96,17 +96,17 @@ export const BoardHeader: React.FC<Props> = ({
switch (selectedGroup) { switch (selectedGroup) {
case "state": case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor); icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
break; break;
case "priority": case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center"); icon = getPriorityIcon(groupTitle, "text-lg");
break; break;
case "labels": case "labels":
const labelColor = const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000"; issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = ( icon = (
<span <span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full" className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }} style={{ backgroundColor: labelColor }}
/> />
); );
@ -143,7 +143,9 @@ export const BoardHeader: React.FC<Props> = ({
{getGroupTitle()} {getGroupTitle()}
</h2> </h2>
<span <span
className={`${isCollapsed ? "ml-0.5" : ""} rounded-full bg-gray-100 py-1 px-3 text-sm`} className={`${
isCollapsed ? "ml-0.5" : ""
} rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
> >
{groupedByIssues?.[groupTitle].length ?? 0} {groupedByIssues?.[groupTitle].length ?? 0}
</span> </span>

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

@ -36,7 +36,7 @@ export const AllLists: React.FC<Props> = ({
return ( return (
<> <>
{groupedByIssues && ( {groupedByIssues && (
<div className="flex flex-col space-y-5 bg-white"> <div>
{Object.keys(groupedByIssues).map((singleGroup) => { {Object.keys(groupedByIssues).map((singleGroup) => {
const currentState = const currentState =
selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null; selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;

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

@ -216,149 +216,147 @@ export const SingleListIssue: React.FC<Props> = ({
</ContextMenu.Item> </ContextMenu.Item>
</a> </a>
</ContextMenu> </ContextMenu>
<div className="border-b mx-6 border-gray-300 last:border-b-0"> <div
<div className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
className="flex items-center justify-between gap-2 py-3" onContextMenu={(e) => {
onContextMenu={(e) => { e.preventDefault();
e.preventDefault(); setContextMenu(true);
setContextMenu(true); setContextMenuPosition({ x: e.pageX, y: e.pageY });
setContextMenuPosition({ x: e.pageX, y: e.pageY }); }}
}} >
> <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 && ( <Tooltip
<Tooltip tooltipHeading="Issue ID"
tooltipHeading="Issue 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-400">
<span className="flex-shrink-0 text-xs text-gray-400"> {issue.project_detail?.identifier}-{issue.sequence_id}
{issue.project_detail?.identifier}-{issue.sequence_id} </span>
</span>
</Tooltip>
)}
<Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
</Tooltip> </Tooltip>
</a> )}
</Link> <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
<span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
</Tooltip>
</a>
</Link>
<div className="flex flex-wrap items-center gap-2 text-xs"> <div className="flex flex-wrap items-center gap-2 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 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 && issue.label_details.length > 0 ? ( {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
key={label.id} className="h-1.5 w-1.5 rounded-full"
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs" style={{
> backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
<span }}
className="h-1.5 w-1.5 rounded-full" />
style={{ {label.name}
backgroundColor: label?.color && label.color !== "" ? label.color : "#000", </span>
}} ))}
/> </div>
{label.name} ) : (
</span> ""
))} )}
</div> {properties.assignee && (
) : ( <ViewAssigneeSelect
"" issue={issue}
)} partialUpdateIssue={partialUpdateIssue}
{properties.assignee && ( position="right"
<ViewAssigneeSelect isNotAllowed={isNotAllowed}
issue={issue} />
partialUpdateIssue={partialUpdateIssue} )}
position="right" {properties.estimate && (
isNotAllowed={isNotAllowed} <ViewEstimateSelect
/> issue={issue}
)} partialUpdateIssue={partialUpdateIssue}
{properties.estimate && ( position="right"
<ViewEstimateSelect isNotAllowed={isNotAllowed}
issue={issue} />
partialUpdateIssue={partialUpdateIssue} )}
position="right" {properties.link && (
isNotAllowed={isNotAllowed} <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
/> <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
)} <div className="flex items-center gap-1 text-gray-500">
{properties.link && ( <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200"> {issue.link_count}
<Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}> </div>
<div className="flex items-center gap-1 text-gray-500"> </Tooltip>
<LinkIcon className="h-3.5 w-3.5 text-gray-500" /> </div>
{issue.link_count} )}
</div> {properties.attachment_count && (
</Tooltip> <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
</div> <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
)} <div className="flex items-center gap-1 text-gray-500">
{properties.attachment_count && ( <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
<div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200"> {issue.attachment_count}
<Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}> </div>
<div className="flex items-center gap-1 text-gray-500"> </Tooltip>
<PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" /> </div>
{issue.attachment_count} )}
</div> {type && !isNotAllowed && (
</Tooltip> <CustomMenu width="auto" ellipsis>
</div> <CustomMenu.MenuItem onClick={editIssue}>
)} <div className="flex items-center justify-start gap-2">
{type && !isNotAllowed && ( <PencilIcon className="h-4 w-4" />
<CustomMenu width="auto" ellipsis> <span>Edit issue</span>
<CustomMenu.MenuItem onClick={editIssue}> </div>
</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<PencilIcon className="h-4 w-4" /> <XMarkIcon className="h-4 w-4" />
<span>Edit issue</span> <span>Remove from {type}</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
{type !== "issue" && removeIssue && ( )}
<CustomMenu.MenuItem onClick={removeIssue}> <CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
<XMarkIcon className="h-4 w-4" /> <TrashIcon className="h-4 w-4" />
<span>Remove from {type}</span> <span>Delete issue</span>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} <CustomMenu.MenuItem onClick={handleCopyText}>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> <div className="flex items-center justify-start gap-2">
<div className="flex items-center justify-start gap-2"> <LinkIcon className="h-4 w-4" />
<TrashIcon className="h-4 w-4" /> <span>Copy issue link</span>
<span>Delete issue</span> </div>
</div> </CustomMenu.MenuItem>
</CustomMenu.MenuItem> </CustomMenu>
<CustomMenu.MenuItem onClick={handleCopyText}> )}
<div className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy issue link</span>
</div>
</CustomMenu.MenuItem>
</CustomMenu>
)}
</div>
</div> </div>
</div> </div>
</> </>

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

@ -104,17 +104,17 @@ export const SingleList: React.FC<Props> = ({
switch (selectedGroup) { switch (selectedGroup) {
case "state": case "state":
icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor); icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
break; break;
case "priority": case "priority":
icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center"); icon = getPriorityIcon(groupTitle, "text-lg");
break; break;
case "labels": case "labels":
const labelColor = const labelColor =
issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000"; issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
icon = ( icon = (
<span <span
className="h-[18px] w-[18px] flex-shrink-0 rounded-full" className="h-3 w-3 flex-shrink-0 rounded-full"
style={{ backgroundColor: labelColor }} style={{ backgroundColor: labelColor }}
/> />
); );
@ -134,24 +134,24 @@ export const SingleList: React.FC<Props> = ({
{({ open }) => ( {({ open }) => (
<div className="bg-white"> <div className="bg-white">
<div <div
className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${ className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
open ? "" : "rounded-[10px]" open ? "" : "rounded-[10px]"
}`} }`}
> >
<Disclosure.Button> <Disclosure.Button>
<div className="flex items-center gap-x-3"> <div className="flex items-center gap-x-3">
{selectedGroup !== null && ( {selectedGroup !== null && (
<span className="flex items-center">{getGroupIcon()}</span> <div className="flex items-center">{getGroupIcon()}</div>
)} )}
{selectedGroup !== null ? ( {selectedGroup !== null ? (
<h2 className="text-base font-semibold capitalize leading-6 text-gray-800"> <h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
{getGroupTitle()} {getGroupTitle()}
</h2> </h2>
) : ( ) : (
<h2 className="font-medium leading-5">All Issues</h2> <h2 className="font-medium leading-5">All Issues</h2>
)} )}
<span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black"> <span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
{groupedByIssues[groupTitle as keyof IIssue].length} {groupedByIssues?.[groupTitle].length ?? 0}
</span> </span>
</div> </div>
</Disclosure.Button> </Disclosure.Button>

2
apps/app/components/issues/view-select/assignee.tsx
View File

@ -106,7 +106,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
} items-center gap-2 text-gray-500`} } items-center gap-2 text-gray-500`}
> >
{issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? ( {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2 -my-0.5">
<AssigneesList userIds={issue.assignees} length={3} showLength={false} /> <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
<span className="text-gray-500">{issue.assignees.length} Assignees</span> <span className="text-gray-500">{issue.assignees.length} Assignees</span>
</div> </div>

4
apps/app/components/ui/datepicker.tsx
View File

@ -34,7 +34,7 @@ export const CustomDatePicker: React.FC<Props> = ({
if (!val) onChange(null); if (!val) onChange(null);
else onChange(renderDateFormat(val)); else onChange(renderDateFormat(val));
}} }}
className={`${className} ${ className={`${
renderAs === "input" renderAs === "input"
? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none" ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
: renderAs === "button" : renderAs === "button"
@ -44,7 +44,7 @@ export const CustomDatePicker: React.FC<Props> = ({
: "" : ""
} ${error ? "border-red-500 bg-red-100" : ""} ${ } ${error ? "border-red-500 bg-red-100" : ""} ${
disabled ? "cursor-not-allowed" : "cursor-pointer" disabled ? "cursor-not-allowed" : "cursor-pointer"
} w-full rounded-md border bg-transparent caret-transparent`} } w-full rounded-md border bg-transparent caret-transparent ${className}`}
dateFormat="dd-MM-yyyy" dateFormat="dd-MM-yyyy"
isClearable={isClearable} isClearable={isClearable}
disabled={disabled} disabled={disabled}