mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
fix: spreadsheet layout sub issues overlapping (#3064)
* fix: spreadsheet layout sub issues overlapping * fix: logs
This commit is contained in:
parent
b515c0ffa6
commit
73b58e91ee
@ -27,7 +27,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
|
||||
value={issue.assignees}
|
||||
defaultOptions={issue?.assignee_details ? issue.assignee_details : []}
|
||||
onChange={(data) => onChange({ assignees: data })}
|
||||
className="h-full w-full"
|
||||
className="h-11 w-full"
|
||||
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
|
||||
noLabelBorder
|
||||
hideDropdownArrow
|
||||
@ -40,14 +40,16 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue) => (
|
||||
<SpreadsheetAssigneeColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
members={members}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetAssigneeColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
members={members}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -18,7 +18,7 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.attachment_count} {issue.attachment_count === 1 ? "attachment" : "attachments"}
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,9 @@ export const SpreadsheetAttachmentColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetAttachmentColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -19,7 +19,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full items-center justify-center text-xs">
|
||||
<div className="flex h-11 w-full items-center justify-center text-xs">
|
||||
{renderLongDetailDateFormat(issue.created_at)}
|
||||
</div>
|
||||
|
||||
@ -28,7 +28,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
<div className="h-11">
|
||||
<SpreadsheetCreatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -24,7 +24,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
|
||||
<ViewDueDateSelect
|
||||
issue={issue}
|
||||
onChange={(val) => onChange({ target_date: val })}
|
||||
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
|
||||
className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
|
||||
noBorder
|
||||
disabled={disabled}
|
||||
/>
|
||||
@ -34,13 +34,15 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetDueDateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetDueDateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -25,7 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
|
||||
projectId={issue.project_detail?.id ?? null}
|
||||
value={issue.estimate_point}
|
||||
onChange={(data) => onChange({ estimate_point: data })}
|
||||
className="h-full w-full"
|
||||
className="h-11 w-full"
|
||||
buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
|
||||
hideDropdownArrow
|
||||
disabled={disabled}
|
||||
@ -36,13 +36,15 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetEstimateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetEstimateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -29,7 +29,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
|
||||
value={issue.labels}
|
||||
defaultOptions={issue?.label_details ? issue.label_details : []}
|
||||
onChange={(data) => onChange({ labels: data })}
|
||||
className="h-full w-full"
|
||||
className="h-11 w-full"
|
||||
buttonClassName="px-2.5 h-full"
|
||||
hideDropdownArrow
|
||||
maxRender={1}
|
||||
@ -42,14 +42,16 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetLabelColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
labels={labels}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetLabelColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
labels={labels}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -18,7 +18,7 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.link_count} {issue.link_count === 1 ? "link" : "links"}
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,9 @@ export const SpreadsheetLinkColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetLinkColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -24,7 +24,7 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
|
||||
<PrioritySelect
|
||||
value={issue.priority}
|
||||
onChange={(data) => onChange({ priority: data })}
|
||||
className="h-full w-full"
|
||||
className="h-11 w-full"
|
||||
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
|
||||
showTitle
|
||||
highlightUrgentPriority={false}
|
||||
@ -37,13 +37,15 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetPriorityColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetPriorityColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -24,7 +24,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
|
||||
<ViewStartDateSelect
|
||||
issue={issue}
|
||||
onChange={(val) => onChange({ start_date: val })}
|
||||
className="flex !h-full !w-full max-w-full items-center px-2.5 py-1"
|
||||
className="flex !h-11 !w-full max-w-full items-center px-2.5 py-1"
|
||||
noBorder
|
||||
disabled={disabled}
|
||||
/>
|
||||
@ -34,13 +34,15 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetStartDateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetStartDateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -29,7 +29,7 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
|
||||
value={issue.state}
|
||||
defaultOptions={issue?.state_detail ? [issue.state_detail] : []}
|
||||
onChange={(data) => onChange({ state: data.id, state_detail: data })}
|
||||
className="h-full w-full"
|
||||
className="w-full !h-11"
|
||||
buttonClassName="!shadow-none !border-0 h-full w-full"
|
||||
hideDropdownArrow
|
||||
disabled={disabled}
|
||||
@ -40,14 +40,16 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue) => (
|
||||
<SpreadsheetStateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
states={states}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<div className="h-11">
|
||||
<SpreadsheetStateColumn
|
||||
key={subIssue.id}
|
||||
issue={subIssue}
|
||||
onChange={onChange}
|
||||
states={states}
|
||||
expandedIssues={expandedIssues}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -18,7 +18,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full items-center px-2.5 py-1 text-xs">
|
||||
<div className="flex h-11 w-full items-center px-2.5 py-1 text-xs">
|
||||
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
|
||||
</div>
|
||||
|
||||
@ -27,7 +27,9 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetSubIssueColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -21,7 +21,7 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-full w-full items-center justify-center text-xs">
|
||||
<div className="flex h-11 w-full items-center justify-center text-xs">
|
||||
{renderLongDetailDateFormat(issue.updated_at)}
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
|
||||
subIssues &&
|
||||
subIssues.length > 0 &&
|
||||
subIssues.map((subIssue: IIssue) => (
|
||||
<SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
<div className={`h-11`}>
|
||||
<SpreadsheetUpdatedOnColumn key={subIssue.id} issue={subIssue} expandedIssues={expandedIssues} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
@ -159,13 +159,13 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
|
||||
</CustomMenu>
|
||||
</div>
|
||||
|
||||
<div className="h-full w-full min-w-[8rem]">
|
||||
<div className="h-full w-full divide-y-[0.5px] border-b-[0.5px] min-w-[8rem]">
|
||||
{issues?.map((issue) => {
|
||||
const disableUserActions = !canEditProperties(issue.project);
|
||||
return (
|
||||
<div
|
||||
key={`${property}-${issue.id}`}
|
||||
className={`h-11 border-b-[0.5px] border-custom-border-200 ${
|
||||
className={`h-fit divide-y-[0.5px] border-custom-border-200 ${
|
||||
disableUserActions ? "" : "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
>
|
||||
|
Loading…
Reference in New Issue
Block a user