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

fix: kanban board horizontal scroll (#1038)

Browse Source 
* fix: kanban board horizontal scroll

* chore: droppable placeholder position
This commit is contained in:
Aaryan Khandelwal 2023-05-12 12:41:31 +05:30 committed by GitHub
parent 6a78948113
commit bf865f399f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 46 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
apps/app/components/core/board-view/single-board.tsx
View File

@ -66,45 +66,45 @@ export const SingleBoard: React.FC<Props> = ({
}, [currentState]); }, [currentState]);
return ( return (
<div className={`h-full flex-shrink-0 ${!isCollapsed ? "" : "w-96"}`}> <div className={`flex-shrink-0 ${!isCollapsed ? "" : "flex h-full flex-col w-96"}`}>
<div className={`${!isCollapsed ? "" : "flex h-full flex-col space-y-3"}`}> <BoardHeader
<BoardHeader addIssueToState={addIssueToState}
addIssueToState={addIssueToState} currentState={currentState}
currentState={currentState} groupTitle={groupTitle}
groupTitle={groupTitle} isCollapsed={isCollapsed}
isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed}
setIsCollapsed={setIsCollapsed} isCompleted={isCompleted}
isCompleted={isCompleted} />
/> {isCollapsed && (
{isCollapsed && ( <StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}> {(provided, snapshot) => (
{(provided, snapshot) => ( <div
<div className={`relative h-full ${
className={`relative h-full overflow-y-auto p-1 ${ orderBy !== "sort_order" && snapshot.isDraggingOver ? "bg-brand-base/20" : ""
snapshot.isDraggingOver ? "bg-brand-base/20" : "" } ${!isCollapsed ? "hidden" : "flex flex-col"}`}
} ${!isCollapsed ? "hidden" : "block"}`} ref={provided.innerRef}
ref={provided.innerRef} {...provided.droppableProps}
{...provided.droppableProps} >
> {orderBy !== "sort_order" && (
{orderBy !== "sort_order" && ( <>
<> <div
<div className={`absolute ${
className={`absolute ${ snapshot.isDraggingOver ? "block" : "hidden"
snapshot.isDraggingOver ? "block" : "hidden" } pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`}
} pointer-events-none top-0 left-0 z-[99] h-full w-full bg-brand-surface-1 opacity-50`} />
/> <div
<div className={`absolute ${
className={`absolute ${ snapshot.isDraggingOver ? "block" : "hidden"
snapshot.isDraggingOver ? "block" : "hidden" } pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`}
} pointer-events-none top-1/2 left-1/2 z-[99] -translate-y-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-brand-base p-2 text-xs`} >
> This board is ordered by{" "}
This board is ordered by{" "} {replaceUnderscoreIfSnakeCase(
{replaceUnderscoreIfSnakeCase( orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at"
orderBy ? (orderBy[0] === "-" ? orderBy.slice(1) : orderBy) : "created_at" )}
)} </div>
</div> </>
</> )}
)} <div className="overflow-y-auto pt-3">
{groupedByIssues?.[groupTitle].map((issue, index) => ( {groupedByIssues?.[groupTitle].map((issue, index) => (
<Draggable <Draggable
key={issue.id} key={issue.id}
@ -146,10 +146,12 @@ export const SingleBoard: React.FC<Props> = ({
> >
{provided.placeholder} {provided.placeholder}
</span> </span>
</div>
<div>
{type === "issue" ? ( {type === "issue" ? (
<button <button
type="button" type="button"
className="flex items-center gap-2 font-medium text-brand-accent outline-none" className="flex items-center gap-2 font-medium text-brand-accent outline-none p-1"
onClick={addIssueToState} onClick={addIssueToState}
> >
<PlusIcon className="h-4 w-4" /> <PlusIcon className="h-4 w-4" />
@ -182,10 +184,10 @@ export const SingleBoard: React.FC<Props> = ({
) )
)} )}
</div> </div>
)} </div>
</StrictModeDroppable> )}
)} </StrictModeDroppable>
</div> )}
</div> </div>
); );
}; };