binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5676] style: gantt column outline #8374

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-12-18 16:34:21 +05:30 • committed by GitHub
parent ad2291dfee
commit 78f4a7294b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/core/components/gantt-chart/chart/views/month.tsx
View file

@ -62,7 +62,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
<div className="h-5 w-full flex"> <div className="h-5 w-full flex">
{weeks?.map((weekBlock) => ( {weeks?.map((weekBlock) => (
<div <div
key={`sub-title-${weekBlock.startDate}-${weekBlock.endDate}`} key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
className={cn( className={cn(
"flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1", "flex flex-shrink-0 py-1 px-2 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
{ {
@ -89,7 +89,7 @@ export const MonthChartView = observer(function MonthChartView(_props: any) {
<div className="h-full w-full flex-grow flex"> <div className="h-full w-full flex-grow flex">
{weeks?.map((weekBlock) => ( {weeks?.map((weekBlock) => (
<div <div
key={`column-${weekBlock.startDate}-${weekBlock.endDate}`} key={`column-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", { className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
"bg-accent-primary/20": weekBlock.today, "bg-accent-primary/20": weekBlock.today,
})} })}

9
apps/web/core/components/gantt-chart/chart/views/quarter.tsx
View file

@ -1,4 +1,3 @@
import type { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane utils // plane utils
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -21,11 +20,11 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
quarterBlocks?.map((quarterBlock, rootIndex) => ( quarterBlocks?.map((quarterBlock, rootIndex) => (
<div <div
key={`month-${quarterBlock.quarterNumber}-${quarterBlock.year}`} key={`month-${quarterBlock.quarterNumber}-${quarterBlock.year}`}
className="relative flex flex-col outline-[0.25px] outline outline-subtle-1" className="relative flex flex-col outline-[0.25px] outline-subtle-1"
> >
{/** Header Div */} {/** Header Div */}
<div <div
className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline outline-subtle-1" className="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
style={{ style={{
height: `${HEADER_HEIGHT}px`, height: `${HEADER_HEIGHT}px`,
}} }}
@ -55,7 +54,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
<div <div
key={`sub-title-${rootIndex}-${index}`} key={`sub-title-${rootIndex}-${index}`}
className={cn( className={cn(
"flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline outline-subtle-1", "flex flex-shrink-0 text-center capitalize justify-center outline-[0.25px] outline-subtle-1",
{ {
"bg-accent-primary/20": monthBlock.today, "bg-accent-primary/20": monthBlock.today,
} }
@ -80,7 +79,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
{quarterBlock?.children?.map((monthBlock, index) => ( {quarterBlock?.children?.map((monthBlock, index) => (
<div <div
key={`column-${rootIndex}-${index}`} key={`column-${rootIndex}-${index}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", { className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
"bg-accent-primary/20": monthBlock.today, "bg-accent-primary/20": monthBlock.today,
})} })}
style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }} style={{ width: `${currentViewData?.data.dayWidth * monthBlock.days}px` }}

9
apps/web/core/components/gantt-chart/chart/views/week.tsx
View file

@ -1,4 +1,3 @@
import type { FC } from "react";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
// plane utils // plane utils
import { cn } from "@plane/utils"; import { cn } from "@plane/utils";
@ -17,7 +16,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
{currentViewData && {currentViewData &&
weekBlocks?.map((block, rootIndex) => ( weekBlocks?.map((block, rootIndex) => (
<div <div
key={`month-${block?.startDate}-${block?.endDate}`} key={`month-${block?.startDate.toString()}-${block?.endDate.toString()}`}
className="relative flex flex-col outline-[0.25px] outline-subtle-1" className="relative flex flex-col outline-[0.25px] outline-subtle-1"
> >
{/** Header Div */} {/** Header Div */}
@ -47,7 +46,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
<div <div
key={`sub-title-${rootIndex}-${index}`} key={`sub-title-${rootIndex}-${index}`}
className={cn( className={cn(
"flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline outline-subtle-1", "flex flex-shrink-0 p-1 text-center capitalize justify-between outline-[0.25px] outline-subtle-1",
{ {
"bg-accent-primary/20": weekDay.today, "bg-accent-primary/20": weekDay.today,
} }
@ -73,13 +72,13 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
{block?.children?.map((weekDay, index) => ( {block?.children?.map((weekDay, index) => (
<div <div
key={`column-${rootIndex}-${index}`} key={`column-${rootIndex}-${index}`}
className={cn("h-full overflow-hidden outline-[0.25px] outline outline-subtle", { className={cn("h-full overflow-hidden outline-[0.25px] outline-subtle", {
"bg-accent-primary/20": weekDay.today, "bg-accent-primary/20": weekDay.today,
})} })}
style={{ width: `${currentViewData?.data.dayWidth}px` }} style={{ width: `${currentViewData?.data.dayWidth}px` }}
> >
{["sat", "sun"].includes(weekDay?.dayData?.shortTitle) && ( {["sat", "sun"].includes(weekDay?.dayData?.shortTitle) && (
<div className="h-full bg-surface-2 outline-[0.25px] outline outline-strong" /> <div className="h-full bg-surface-2 outline-[0.25px] outline-strong" />
)} )}
</div> </div>
))} ))}