Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WEB-911] chore: kanban layout sub-grouping ui improvement #4243

Merged
merged 1 commit into from
Apr 23, 2024
Merged

[WEB-911] chore: kanban layout sub-grouping ui improvement #4243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
className={`horizontal-scrollbar scrollbar-lg relative flex h-full w-full bg-custom-background-90 ${sub_group_by ? "vertical-scrollbar overflow-y-auto" : "overflow-x-auto overflow-y-hidden"}`}
ref={scrollableContainerRef}
>
<div className="relative h-full w-max min-w-full bg-custom-background-90 px-2">
<div className="relative h-full w-max min-w-full bg-custom-background-90">
{/* drag and delete component */}
<div
className={`fixed left-1/2 -translate-x-1/2 ${
Expand Down
2 changes: 1 addition & 1 deletion web/components/issues/issue-layouts/kanban/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
const isGroupByCreatedBy = group_by === "created_by";

return (
<div className={`relative w-full flex gap-2 ${sub_group_by ? "h-full" : "h-full"}`}>
<div className={`relative w-full flex gap-2 px-2 ${sub_group_by ? "h-full" : "h-full"}`}>
{list &&
list.length > 0 &&
list.map((subList: IGroupByColumn) => {
Expand Down
21 changes: 11 additions & 10 deletions web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from "react";
import React, { FC } from "react";
import { observer } from "mobx-react-lite";
import { Circle, ChevronDown, ChevronUp } from "lucide-react";
import { TIssueKanbanFilters } from "@plane/types";
Expand All @@ -13,13 +13,14 @@ interface IHeaderSubGroupByCard {
handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void;
}

export const HeaderSubGroupByCard = observer(
({ icon, title, count, column_id, kanbanFilters, handleKanbanFilters }: IHeaderSubGroupByCard) => (
<div className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5`}>
<div
className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80"
onClick={() => handleKanbanFilters("sub_group_by", column_id)}
>
export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props) => {
const { icon, title, count, column_id, kanbanFilters, handleKanbanFilters } = props;
return (
<div
className={`relative flex w-full flex-shrink-0 flex-row items-center gap-2 rounded-sm p-1.5 cursor-pointer`}
onClick={() => handleKanbanFilters("sub_group_by", column_id)}
>
<div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
{kanbanFilters?.sub_group_by.includes(column_id) ? (
<ChevronDown width={14} strokeWidth={2} />
) : (
Expand All @@ -36,5 +37,5 @@ export const HeaderSubGroupByCard = observer(
<div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
</div>
</div>
)
);
);
});
11 changes: 5 additions & 6 deletions web/components/issues/issue-layouts/kanban/swimlanes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,23 +175,22 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
<div className="relative h-max min-h-full w-full">
{list &&
list.length > 0 &&
list.map((_list: any) => {
list.map((_list: IGroupByColumn) => {
const subGroupByVisibilityToggle = visibilitySubGroupBy(_list);
if (subGroupByVisibilityToggle.showGroup === false) return <></>;
return (
<div key={_list.id} className="flex flex-shrink-0 flex-col">
<div className="sticky top-[50px] z-[1] flex w-full items-center bg-custom-background-90 py-1">
<div className="sticky left-0 flex-shrink-0 bg-custom-background-90 pr-2">
<div className="sticky top-[50px] z-[1] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
<div className="sticky left-0 flex-shrink-0">
<HeaderSubGroupByCard
column_id={_list.id}
icon={_list.Icon}
icon={_list.icon}
title={_list.name || ""}
count={calculateIssueCount(_list.id)}
kanbanFilters={kanbanFilters}
handleKanbanFilters={handleKanbanFilters}
/>
</div>
<div className="w-full border-b border-dashed border-custom-border-400" />
</div>

{subGroupByVisibilityToggle.showIssues && (
Expand Down Expand Up @@ -313,7 +312,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {

return (
<div className="relative">
<div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90">
<div className="sticky top-0 z-[2] h-[50px] bg-custom-background-90 px-2">
<SubGroupSwimlaneHeader
issueIds={issueIds}
group_by={group_by}
Expand Down
Loading