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

styles: UI changes in the gantt blocks

Browse Source
This commit is contained in:
gurusainath 2023-05-20 23:10:04 +05:30
parent af13a1b00a
commit c1f8766571
9 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/app/components/cycles/cycles-list-gantt-chart.tsx
View File

@ -23,9 +23,9 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: { data: ICycle }) => ( const GanttBlockView = ({ data }: { data: ICycle }) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div className="flex-shrink-0 w-[4px] h-auto" style={{ backgroundColor: "#858e96" }} /> <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>

6
apps/app/components/cycles/gantt-chart.tsx
View File

@ -32,12 +32,12 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div <div
className="flex-shrink-0 w-[4px] h-auto" className="flex-shrink-0 w-[4px] h-full"
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
/> />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>

10
apps/app/components/gantt-chart/blocks/index.tsx
View File

@ -21,14 +21,14 @@ export const GanttChartBlocks: FC<{
className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5" className="relative z-10 mt-[58px] h-full w-[4000px] divide-x divide-gray-300 overflow-hidden overflow-y-auto bg-[#999] bg-opacity-5"
style={{ width: `${itemsContainerWidth}px` }} style={{ width: `${itemsContainerWidth}px` }}
> >
<div className="w-full divide-y divide-brand-base"> <div className="w-full">
{blocks && {blocks &&
blocks.length > 0 && blocks.length > 0 &&
blocks.map((block: any, _idx: number) => ( blocks.map((block: any, _idx: number) => (
<> <>
{block.start_date && block.target_date && ( {block.start_date && block.target_date && (
<ChartDraggable <ChartDraggable
className="relative flex h-[36.5px] items-center" className="relative flex h-[40px] items-center"
key={`blocks-${_idx}`} key={`blocks-${_idx}`}
block={block} block={block}
handleBlock={handleChartBlockPosition} handleBlock={handleChartBlockPosition}
@ -44,15 +44,13 @@ export const GanttChartBlocks: FC<{
</div> </div>
<div <div
className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center" className="rounded-sm shadow-sm bg-brand-base overflow-hidden relative flex items-center h-[34px] border border-brand-base"
style={{ style={{
width: `${block?.position?.width}px`, width: `${block?.position?.width}px`,
}} }}
> >
<div className="w-full h-full relative overflow-hidden">
{blockRender({ ...block?.data })} {blockRender({ ...block?.data })}
</div> </div>
</div>
<div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap"> <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">
<div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium"> <div className="absolute left-0 ml-[5px] mr-[5px] rounded-sm bg-brand-surface-1 px-2 py-0.5 text-xs font-medium">
@ -71,7 +69,7 @@ export const GanttChartBlocks: FC<{
{blocks && {blocks &&
blocks.length > 0 && blocks.length > 0 &&
blocks.map((block: any, _idx: number) => ( blocks.map((block: any, _idx: number) => (
<div className="relative h-[36.5px] bg-brand-base" key={`sidebar-blocks-${_idx}`}> <div className="relative h-[40px] bg-brand-base" key={`sidebar-blocks-${_idx}`}>
{sidebarBlockRender(block?.data)} {sidebarBlockRender(block?.data)}
</div> </div>
))} ))}

2
apps/app/components/gantt-chart/chart/index.tsx
View File

@ -214,7 +214,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
<div <div
className={`${ className={`${
fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative` fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-brand-base` : `relative`
} flex h-full flex-col rounded-sm border border-brand-base select-none`} } flex h-full flex-col rounded-sm border border-brand-base select-none bg-brand-base shadow`}
> >
{/* chart title */} {/* chart title */}
<div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base"> <div className="flex w-full flex-shrink-0 flex-wrap items-center gap-5 gap-y-3 whitespace-nowrap p-2 border-b border-brand-base">

2
apps/app/components/gantt-chart/views/month-view.ts
View File

@ -184,7 +184,7 @@ export const getMonthChartItemPositionWidthInMonth = (chartData: ChartDataType,
diffMonths -= startDate.getMonth(); diffMonths -= startDate.getMonth();
diffMonths += itemStartDate.getMonth(); diffMonths += itemStartDate.getMonth();
scrollPosition = scrollPosition + diffMonths - 1; scrollPosition = scrollPosition + diffMonths;
// position code ends // position code ends
// width code starts // width code starts

6
apps/app/components/issues/gantt-chart.tsx
View File

@ -32,12 +32,12 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div <div
className="flex-shrink-0 w-[4px] h-auto" className="flex-shrink-0 w-[4px] h-full"
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
/> />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>

6
apps/app/components/modules/gantt-chart.tsx
View File

@ -32,12 +32,12 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div <div
className="flex-shrink-0 w-[4px] h-auto" className="flex-shrink-0 w-[4px] h-full"
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
/> />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>

6
apps/app/components/modules/modules-list-gantt-chart.tsx
View File

@ -27,12 +27,12 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: { data: IModule }) => ( const GanttBlockView = ({ data }: { data: IModule }) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div <div
className="flex-shrink-0 w-[4px] h-auto" className="flex-shrink-0 w-[4px] h-full"
style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }} style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
/> />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>

6
apps/app/components/views/gantt-chart.tsx
View File

@ -32,12 +32,12 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
// rendering issues on gantt card // rendering issues on gantt card
const GanttBlockView = ({ data }: any) => ( const GanttBlockView = ({ data }: any) => (
<div className="relative flex w-full h-full overflow-hidden"> <div className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
<div <div
className="flex-shrink-0 w-[4px] h-auto" className="flex-shrink-0 w-[4px] h-full"
style={{ backgroundColor: data?.state_detail?.color || "#858e96" }} style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
/> />
<div className="inline-block text-brand-base text-sm whitespace-nowrap py-[4px] px-1.5"> <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
{data?.name} {data?.name}
</div> </div>
</div> </div>