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">
{weeks?.map((weekBlock) => (
<div
key={`sub-title-${weekBlock.startDate}-${weekBlock.endDate}`}
key={`sub-title-${weekBlock.startDate.toString()}-${weekBlock.endDate.toString()}`}
className={cn(
"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">
{weeks?.map((weekBlock) => (
<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", {
"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";
// plane utils
import { cn } from "@plane/utils";
@ -21,11 +20,11 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
quarterBlocks?.map((quarterBlock, rootIndex) => (
<div
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 */}
<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={{
height: `${HEADER_HEIGHT}px`,
}}
@ -55,7 +54,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
<div
key={`sub-title-${rootIndex}-${index}`}
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,
}
@ -80,7 +79,7 @@ export const QuarterChartView = observer(function QuarterChartView(_props: any)
{quarterBlock?.children?.map((monthBlock, index) => (
<div
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,
})}
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";
// plane utils
import { cn } from "@plane/utils";
@ -17,7 +16,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
{currentViewData &&
weekBlocks?.map((block, rootIndex) => (
<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"
>
{/** Header Div */}
@ -47,7 +46,7 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
<div
key={`sub-title-${rootIndex}-${index}`}
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,
}
@ -73,13 +72,13 @@ export const WeekChartView = observer(function WeekChartView(_props: any) {
{block?.children?.map((weekDay, index) => (
<div
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,
})}
style={{ width: `${currentViewData?.data.dayWidth}px` }}
>
{["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>
))}