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

refactor: spreadsheet layout components

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-18 18:39:57 +05:30
parent 2ae71b76c5
commit f82b876379
3 changed files with 163 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@ export const IssueColumn: React.FC<Props> = ({
const paddingLeft = `${nestingLevel * 54}px`; const paddingLeft = `${nestingLevel * 54}px`;
return ( return (
<div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100"> <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-custom-border-100">
{properties.key && ( {properties.key && (
<div <div
className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]" className="flex gap-1.5 px-4 pr-0 py-2.5 items-center min-w-[96px]"

14
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -34,7 +34,6 @@ import {
} from "types"; } from "types";
// constants // constants
import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet"; import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";
import { Command } from "cmdk";
type Props = { type Props = {
disableUserActions: boolean; disableUserActions: boolean;
@ -166,15 +165,10 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
)} )}
</CustomMenu> </CustomMenu>
</div> </div>
<div className="h-full min-w-[8rem] w-full"> <div className="h-full min-w-[8rem] w-full">
<Command.Group>
<>
{issues?.map((issue) => ( {issues?.map((issue) => (
<Command.Item <div className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200">
key={`${property}-${issue.id}`}
value={`${property}-${issue.id}`}
className="h-11 flex items-center px-4 py-2.5 border-b-[0.5px] border-custom-border-200"
>
{property === "state" ? ( {property === "state" ? (
<SpreadsheetStateColumn <SpreadsheetStateColumn
disabled={disableUserActions} disabled={disableUserActions}
@ -246,10 +240,8 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
issue={issue} issue={issue}
/> />
) : null} ) : null}
</Command.Item> </div>
))} ))}
</>
</Command.Group>
</div> </div>
</div> </div>
); );

5
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -19,7 +19,6 @@ import {
IStateResponse, IStateResponse,
IUserLite, IUserLite,
} from "types"; } from "types";
import { Command } from "cmdk";
type Props = { type Props = {
displayProperties: IIssueDisplayProperties; displayProperties: IIssueDisplayProperties;
@ -81,8 +80,6 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
}, []); }, []);
return ( return (
<Command>
<Command.List>
<div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200"> <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
<div className="h-full w-full flex flex-col"> <div className="h-full w-full flex flex-col">
<div <div
@ -188,7 +185,5 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
</div> </div>
</div> </div>
</div> </div>
</Command.List>
</Command>
); );
}); });