Fix table and calendar headers layout

The border and height of the table and calendar headers are now defined the same way avoiding layout side effects in some context. Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
ObeoNetwork · May 16, 2024 · 98aabfb · 98aabfb
1 parent 062aec9
commit 98aabfb
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 123 deletions.
diff --git a/src/components/calendar/calendar.module.css b/src/components/calendar/calendar.module.css
@@ -1,3 +1,8 @@
+.calendarMain{    
+  border-top: #e6e4e4 3px solid;
+  border-bottom: #e6e4e4 3px solid;
+}
+
 .calendarBottomText {
   text-anchor: middle;
   fill: #333;

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
@@ -1,9 +1,5 @@
-import React, {
-  useCallback,
-} from "react";
-import type {
-  ReactNode,
-} from "react";
+import React, { useCallback } from "react";
+import type { ReactNode } from "react";
 
 import {
   DateSetup,
@@ -13,9 +9,7 @@ import {
   Distances,
 } from "../../types/public-types";
 import { TopPartOfCalendar } from "./top-part-of-calendar";
-import {
-  getDaysInMonth,
-} from "../../helpers/date-helper";
+import { getDaysInMonth } from "../../helpers/date-helper";
 import { defaultRenderBottomHeader } from "./default-render-bottom-header";
 import { defaultRenderTopHeader } from "./default-render-top-header";
 
@@ -41,10 +35,7 @@ export const Calendar: React.FC<CalendarProps> = ({
   additionalLeftSpace,
   dateSetup,
 
-  distances: {
-    columnWidth,
-    headerHeight,
-  },
+  distances: { columnWidth, headerHeight },
 
   endColumnIndex,
   getDate,
@@ -58,19 +49,20 @@ export const Calendar: React.FC<CalendarProps> = ({
   startColumnIndex,
 }) => {
   const renderBottomHeaderByDate = useCallback(
-    (date: Date, index: number) => renderBottomHeader(
-      date,
-      dateSetup.viewMode,
-      dateSetup,
-      index,
-      isUnknownDates,
-    ),
-    [renderBottomHeader, dateSetup, isUnknownDates],
+    (date: Date, index: number) =>
+      renderBottomHeader(
+        date,
+        dateSetup.viewMode,
+        dateSetup,
+        index,
+        isUnknownDates
+      ),
+    [renderBottomHeader, dateSetup, isUnknownDates]
   );
 
   const renderTopHeaderByDate = useCallback(
     (date: Date) => renderTopHeader(date, dateSetup.viewMode, dateSetup),
-    [renderTopHeader, dateSetup],
+    [renderTopHeader, dateSetup]
   );
 
   const getCalendarValuesForYear = () => {
@@ -93,10 +85,9 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (
-        !isUnknownDates && (
-          i === startColumnIndex ||
-          date.getFullYear() !== getDate(i - 1).getFullYear()
-        )
+        !isUnknownDates &&
+        (i === startColumnIndex ||
+          date.getFullYear() !== getDate(i - 1).getFullYear())
       ) {
         const topValue = date.getFullYear().toString();
 
@@ -139,10 +130,8 @@ export const Calendar: React.FC<CalendarProps> = ({
       const fullYear = date.getFullYear();
 
       if (
-        !isUnknownDates && (
-          i === startColumnIndex ||
-          fullYear !== getDate(i - 1).getFullYear()
-        )
+        !isUnknownDates &&
+        (i === startColumnIndex || fullYear !== getDate(i - 1).getFullYear())
       ) {
         const topValue = renderTopHeaderByDate(date);
         let xText: number;
@@ -180,9 +169,8 @@ export const Calendar: React.FC<CalendarProps> = ({
 
       let topValue: ReactNode = "";
       if (
-        !isUnknownDates && (
-          i === startColumnIndex || month !== getDate(i - 1).getMonth()
-        )
+        !isUnknownDates &&
+        (i === startColumnIndex || month !== getDate(i - 1).getMonth())
       ) {
         // top
         topValue = renderTopHeaderByDate(date);
@@ -206,10 +194,16 @@ export const Calendar: React.FC<CalendarProps> = ({
           <TopPartOfCalendar
             key={`${month}_${fullYear}`}
             value={topValue}
-            x1Line={additionalLeftSpace + columnWidth * i + weeksCount * columnWidth}
+            x1Line={
+              additionalLeftSpace + columnWidth * i + weeksCount * columnWidth
+            }
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={additionalLeftSpace + columnWidth * i + columnWidth * weeksCount * 0.5}
+            xText={
+              additionalLeftSpace +
+              columnWidth * i +
+              columnWidth * weeksCount * 0.5
+            }
             yText={topDefaultHeight * 0.9}
           />
         );
@@ -249,9 +243,7 @@ export const Calendar: React.FC<CalendarProps> = ({
 
       const monthKey = `${month}/${fullYear}`;
 
-      if (
-        !isUnknownDates && !renderedMonths.has(monthKey)
-      ) {
+      if (!isUnknownDates && !renderedMonths.has(monthKey)) {
         renderedMonths.add(monthKey);
         const topValue = renderTopHeaderByDate(date);
 
@@ -267,9 +259,11 @@ export const Calendar: React.FC<CalendarProps> = ({
             x1Line={additionalLeftSpace + columnWidth * endIndex}
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={additionalLeftSpace + columnWidth * (
-              startIndexOrZero + (endIndex - startIndexOrZero) / 2
-            )}
+            xText={
+              additionalLeftSpace +
+              columnWidth *
+                (startIndexOrZero + (endIndex - startIndexOrZero) / 2)
+            }
             yText={topDefaultHeight * 0.9}
           />
         );
@@ -303,22 +297,26 @@ export const Calendar: React.FC<CalendarProps> = ({
       const dayOfMonth = date.getDate();
       const prevDate = getDate(i - 1);
 
-      if (
-        !isUnknownDates && (
-          dayOfMonth !== prevDate.getDate()
-        )
-      ) {
+      if (!isUnknownDates && dayOfMonth !== prevDate.getDate()) {
         const topValue = renderTopHeaderByDate(date);
         const widthMultiplier = i - 1;
 
         topValues.push(
           <TopPartOfCalendar
-            key={`${prevDate.getDate()}_${prevDate.getMonth()}_${prevDate.getFullYear() }`}
+            key={`${prevDate.getDate()}_${prevDate.getMonth()}_${prevDate.getFullYear()}`}
             value={topValue}
-            x1Line={additionalLeftSpace + columnWidth * widthMultiplier + ticks * columnWidth}
+            x1Line={
+              additionalLeftSpace +
+              columnWidth * widthMultiplier +
+              ticks * columnWidth
+            }
             y1Line={0}
             y2Line={topDefaultHeight}
-            xText={additionalLeftSpace + columnWidth * widthMultiplier + ticks * columnWidth * 0.5}
+            xText={
+              additionalLeftSpace +
+              columnWidth * widthMultiplier +
+              ticks * columnWidth * 0.5
+            }
             yText={topDefaultHeight * 0.9}
           />
         );
@@ -402,18 +400,20 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.Hour:
       [topValues, bottomValues] = getCalendarValuesForHour();
   }
+
   return (
-    <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
-      <rect
-        x={0}
-        y={0}
+    <div className={styles.calendarMain} style={{ width: fullSvgWidth }}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
         width={fullSvgWidth}
         height={headerHeight}
-        className={styles.calendarHeader}
-      />
-
-      {topValues}
-      {bottomValues}
-    </g>
+        fontFamily={fontFamily}
+      >
+        <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
+          {topValues}
+          {bottomValues}
+        </g>
+      </svg>
+    </div>
   );
 };
diff --git a/src/components/gantt/task-gantt.tsx b/src/components/gantt/task-gantt.tsx
@@ -126,16 +126,7 @@ const TaskGanttInner: React.FC<TaskGanttProps> = ({
       onScroll={onVerticalScrollbarScrollX}
       dir="ltr"
     >
-      <div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={fullSvgWidth}
-          height={calendarProps.distances.headerHeight}
-          fontFamily={barProps.fontFamily}
-        >
-          <Calendar {...calendarProps} />
-        </svg>
-      </div>
+      <Calendar {...calendarProps} />
 
       <div
         ref={ganttTaskContentRef}

diff --git a/src/components/task-list/task-list-header.module.css b/src/components/task-list/task-list-header.module.css
@@ -1,7 +1,7 @@
 .ganttTable_Header {
   display: table;
-  border-bottom: #e6e4e4 1px solid;
-  border-top: #e6e4e4 1px solid;
+  border-bottom: #e6e4e4 3px solid;
+  border-top: #e6e4e4 3px solid;
   list-style: none;
 }
 

diff --git a/src/components/task-list/task-list-header.tsx b/src/components/task-list/task-list-header.tsx
@@ -16,7 +16,7 @@ const TaskListHeaderDefaultInner: React.FC<TaskListHeaderProps> = ({
     <div
       className={styles.ganttTable_Header}
       style={{
-        height: headerHeight - 2,
+        height: headerHeight,
         fontFamily: fontFamily,
         fontSize: fontSize,
       }}

diff --git a/stories/CustomColumns.stories.mdx b/stories/CustomColumns.stories.mdx
diff --git a/stories/CustomColumns_VerticalScroll.stories.mdx b/stories/CustomColumns_VerticalScroll.stories.mdx
@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/addon-docs';
+
+import { Gantt } from '../src';
+
+import { CustomColumns_VerticalScroll } from './CustomColumns_VerticalScroll';
+
+<Meta
+  title="CustomColumns_VerticalScroll"
+  component={Gantt}
+/>
+
+export const Template = (props) => {
+  return <CustomColumns_VerticalScroll {...props} />;
+}
+
+# Custom columns example
+
+<Story name="CustomColumns_VerticalScroll">
+  {Template.bind({})}
+</Story>
diff --git a/stories/CustomColumns.tsx → stories/CustomColumns_VerticalScroll.tsx b/stories/CustomColumns.tsx → stories/CustomColumns_VerticalScroll.tsx
@@ -87,7 +87,7 @@ export const getColumns = (
   return typeToColumn;
 };
 
-export const CustomColumns: React.FC<AppProps> = props => {
+export const CustomColumns_VerticalScroll: React.FC<AppProps> = props => {
   const [tasks, setTasks] = useState<readonly TaskOrEmpty[]>(initTasks());
 
   const onChangeTasks = useCallback<OnChangeTasks>((nextTasks, action) => {

diff --git a/stories/CustomPalette.stories.mdx b/stories/CustomPalette.stories.mdx
diff --git a/stories/CustomPalette.module.css → stories/CustomPalette_Zoom.module.css b/stories/CustomPalette.module.css → stories/CustomPalette_Zoom.module.css
diff --git a/stories/CustomPalette_Zoom.stories.mdx b/stories/CustomPalette_Zoom.stories.mdx
@@ -0,0 +1,15 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import { Gantt } from "../src";
+
+import { CustomPalette_Zoom } from "./CustomPalette_Zoom";
+
+<Meta title="CustomPalette_Zoom" component={Gantt} />
+
+export const Template = props => {
+  return <CustomPalette_Zoom {...props} />;
+};
+
+# CustomPalette_Zoom example
+
+<Story name="CustomPalette_Zoom">{Template.bind({})}</Story>
diff --git a/stories/CustomPalette.tsx → stories/CustomPalette_Zoom.tsx b/stories/CustomPalette.tsx → stories/CustomPalette_Zoom.tsx
@@ -21,13 +21,13 @@ import "../dist/style.css";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import DeleteForeverIcon from "@material-ui/icons/DeleteForever";
-import styles from "./CustomPalette.module.css";
+import styles from "./CustomPalette_Zoom.module.css";
 
 type AppProps = {
   ganttHeight?: number;
 };
 
-export const CustomPalette: React.FC<AppProps> = props => {
+export const CustomPalette_Zoom: React.FC<AppProps> = props => {
   const [tasks, setTasks] = useState<readonly TaskOrEmpty[]>(initTasks());
   const [viewMode, setView] = React.useState<ViewMode>(ViewMode.Day);
 
@@ -92,19 +92,22 @@ export const CustomPalette: React.FC<AppProps> = props => {
   };
 
   const handleWheel = (wheelEvent: WheelEvent) => {
-    const deltaY = wheelEvent.deltaY;
-
-    if (deltaY < 0 && viewMode !== ViewMode.Hour) {
-      const currentIndex = Object.values(ViewMode).indexOf(viewMode);
-      const newZoomLevel = Object.values(ViewMode)[currentIndex - 1];
-      if (newZoomLevel) {
-        setView(newZoomLevel);
-      }
-    } else if (deltaY > 0 && viewMode !== ViewMode.Month) {
-      const currentIndex = Object.values(ViewMode).indexOf(viewMode);
-      const newZoomLevel = Object.values(ViewMode)[currentIndex + 1];
-      if (newZoomLevel) {
-        setView(newZoomLevel);
+    if (wheelEvent.ctrlKey) {
+      wheelEvent.preventDefault();
+      const deltaY = wheelEvent.deltaY;
+
+      if (deltaY < 0 && viewMode !== ViewMode.Hour) {
+        const currentIndex = Object.values(ViewMode).indexOf(viewMode);
+        const newZoomLevel = Object.values(ViewMode)[currentIndex - 1];
+        if (newZoomLevel) {
+          setView(newZoomLevel);
+        }
+      } else if (deltaY > 0 && viewMode !== ViewMode.Month) {
+        const currentIndex = Object.values(ViewMode).indexOf(viewMode);
+        const newZoomLevel = Object.values(ViewMode)[currentIndex + 1];
+        if (newZoomLevel) {
+          setView(newZoomLevel);
+        }
       }
     }
   };