github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: kanban layout sub-group ui revamp & sub-group icon fix (#4243)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-23 12:55:42 +05:30 committed by GitHub
parent 60663821df
commit 5d8c5b22e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/issues/issue-layouts/kanban/base-kanban-root.tsx
View File

@ -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 ${

2
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -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) => {

21
web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View File

@ -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";
@ -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} />
) : (
@ -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
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -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 && (
@ -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}