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

fix: spreadsheet view properties fix (#2599)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-11-02 16:01:49 +05:30 committed by GitHub
parent f6b95b8d31
commit 4512651f8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -21,6 +21,7 @@ export interface IIssuePropertyAssignee {
optionsClassName?: string;
placement?: Placement;
multiple?: true;
noLabelBorder?: boolean;
}
export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
@ -36,6 +37,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
optionsClassName,
placement,
multiple = false,
noLabelBorder = false,
} = props;
const { workspace: workspaceStore, project: projectStore } = useMobxStore();
@ -91,8 +93,9 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
</AvatarGroup>
) : (
<span
className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
"
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded duration-300 focus:outline-none ${
noLabelBorder ? "" : " px-2.5 py-1 border border-custom-border-300"
}}`}
>
<User2 className="h-3 w-3" />
</span>

8
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -25,6 +25,7 @@ export interface IIssuePropertyLabels {
optionsClassName?: string;
placement?: Placement;
maxRender?: number;
noLabelBorder?: boolean;
}
export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@ -40,6 +41,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
optionsClassName,
placement,
maxRender = 2,
noLabelBorder = false,
} = props;
const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
@ -149,7 +151,11 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
</div>
)
) : (
<div className="h-full flex items-center justify-center text-xs rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 hover:bg-custom-background-80">
<div
className={`h-full flex items-center justify-center text-xs rounded px-2.5 py-1 hover:bg-custom-background-80 ${
noLabelBorder ? "" : "border-[0.5px] border-custom-border-300"
}`}
>
Select labels
</div>
)}

8
web/components/issues/issue-layouts/properties/state.tsx
View File

@ -35,9 +35,9 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
onChange,
disabled,
hideDropdownArrow = false,
className,
buttonClassName,
optionsClassName,
className = "",
buttonClassName = "",
optionsClassName = "",
placement,
} = props;
@ -110,7 +110,7 @@ export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
onClick={() => fetchProjectStates()}

4
web/components/issues/issue-layouts/spreadsheet/columns/assignee-column.tsx
View File

@ -26,7 +26,9 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({ issue, members, onC
projectId={issue.project_detail.id ?? null}
value={issue.assignees}
onChange={(data) => onChange({ assignees: data })}
buttonClassName="!p-0 !rounded-none !border-0"
className="h-full w-full"
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
noLabelBorder
hideDropdownArrow
disabled={disabled}
multiple

4
web/components/issues/issue-layouts/spreadsheet/columns/created-on-column.tsx
View File

@ -19,7 +19,9 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({ issue, expandedIss
return (
<>
<div className="text-xs">{renderLongDetailDateFormat(issue.created_at)}</div>
<div className="flex items-center justify-center text-xs h-full w-full">
{renderLongDetailDateFormat(issue.created_at)}
</div>
{isExpanded &&
!isLoading &&

2
web/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
View File

@ -24,6 +24,8 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = ({ issue, onChange, exp
<ViewDueDateSelect
issue={issue}
onChange={(val) => onChange({ target_date: val })}
className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
buttonClassName="!h-full !w-full !shadow-none px-2.5"
noBorder
disabled={disabled}
/>

2
web/components/issues/issue-layouts/spreadsheet/columns/estimate-column.tsx
View File

@ -25,6 +25,8 @@ 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"
buttonClassName="h-full w-full px-2.5 py-1 !shadow-none !border-0"
hideDropdownArrow
disabled={disabled}
/>

5
web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
View File

@ -28,8 +28,9 @@ export const SpreadsheetLabelColumn: React.FC<Props> = (props) => {
projectId={issue.project_detail.id ?? null}
value={issue.labels}
onChange={(data) => onChange({ labels: data })}
className="h-full"
buttonClassName="!border-0 !h-full !w-full !rounded-none"
className="h-full w-full"
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
noLabelBorder
hideDropdownArrow
maxRender={1}
disabled={disabled}

4
web/components/issues/issue-layouts/spreadsheet/columns/priority-column.tsx
View File

@ -24,8 +24,8 @@ export const SpreadsheetPriorityColumn: React.FC<Props> = ({ issue, onChange, ex
<PrioritySelect
value={issue.priority}
onChange={(data) => onChange({ priority: data })}
className="h-full"
buttonClassName="!border-0 !h-full !w-full !rounded-none px-4"
className="h-full w-full"
buttonClassName="!shadow-none !border-0 h-full w-full px-2.5 py-1 "
showTitle
highlightUrgentPriority={false}
hideDropdownArrow

2
web/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
View File

@ -24,6 +24,8 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = ({ issue, onChange, e
<ViewStartDateSelect
issue={issue}
onChange={(val) => onChange({ start_date: val })}
className="!h-full !w-full max-w-full px-2.5 py-1 flex items-center"
buttonClassName="!h-full !w-full !shadow-none px-2.5"
noBorder
disabled={disabled}
/>

3
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -28,7 +28,8 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
projectId={issue.project_detail.id ?? null}
value={issue.state_detail}
onChange={(data) => onChange({ state: data.id, state_detail: data })}
buttonClassName="!shadow-none !border-0"
className="h-full w-full"
buttonClassName="!shadow-none !border-0 h-full w-full"
hideDropdownArrow
disabled={disabled}
/>

4
web/components/issues/issue-layouts/spreadsheet/columns/updated-on-column.tsx
View File

@ -21,7 +21,9 @@ export const SpreadsheetUpdatedOnColumn: React.FC<Props> = (props) => {
return (
<>
<div className="text-xs">{renderLongDetailDateFormat(issue.updated_at)}</div>
<div className="flex items-center justify-center text-xs h-full w-full">
{renderLongDetailDateFormat(issue.updated_at)}
</div>
{isExpanded &&
!isLoading &&

8
web/components/issues/view-select/due-date.tsx
View File

@ -12,6 +12,8 @@ type Props = {
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
className?: string;
buttonClassName?: string;
noBorder?: boolean;
disabled: boolean;
};
@ -22,6 +24,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
className = "",
buttonClassName = "",
noBorder = false,
disabled,
}) => {
@ -35,7 +39,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
position={tooltipPosition}
>
<div
className={`group flex-shrink-0 relative max-w-[6.5rem] ${
className={`group flex-shrink-0 relative max-w-[6.5rem] ${className} ${
issue.target_date === null
? ""
: issue.target_date < new Date().toISOString()
@ -47,7 +51,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
placeholder="Due date"
value={issue?.target_date}
onChange={onChange}
className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
className={`bg-transparent ${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
minDate={minDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}

8
web/components/issues/view-select/start-date.tsx
View File

@ -12,6 +12,8 @@ type Props = {
handleOnOpen?: () => void;
handleOnClose?: () => void;
tooltipPosition?: "top" | "bottom";
className?: string;
buttonClassName?: string;
noBorder?: boolean;
disabled: boolean;
};
@ -22,6 +24,8 @@ export const ViewStartDateSelect: React.FC<Props> = ({
handleOnOpen,
handleOnClose,
tooltipPosition = "top",
className = "",
buttonClassName = "",
noBorder = false,
disabled,
}) => {
@ -34,12 +38,12 @@ export const ViewStartDateSelect: React.FC<Props> = ({
tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
position={tooltipPosition}
>
<div className="group flex-shrink-0 relative max-w-[6.5rem]">
<div className={`group flex-shrink-0 relative max-w-[6.5rem] ${className}`}>
<CustomDatePicker
placeholder="Start date"
value={issue?.start_date}
onChange={onChange}
className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"}`}
className={`bg-inherit ${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${buttonClassName}`}
maxDate={maxDate ?? undefined}
noBorder={noBorder}
handleOnOpen={handleOnOpen}