Merge pull request #42 from melfore/develop

Minor styles adjustments
melfore · Aug 31, 2023 · 7a38c0e · 7a38c0e
2 parents 461bd1e + cf11041
commit 7a38c0e
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/src/@components/Timeline/index.tsx b/src/@components/Timeline/index.tsx
@@ -22,7 +22,7 @@ const DEFAULT_STAGE_SIZE: StageSize = { height: 0, width: 0 };
 const Timeline: FC<TimelineInput> = ({ columnWidth: externalColumnWidth }) => {
   const { hideResources, resolution, resourcesContentHeight, setDrawRange, timeBlocks } = useTimelineContext();
 
-  const [scrollOffsetSize, setScrollOffsetSize] = useState(0);
+  const [scrollbarSize, setScrollbarSize] = useState(0);
   const [size, setSize] = useState<StageSize>(DEFAULT_STAGE_SIZE);
   const stageRef = useRef<Konva.Stage>(null);
   const wrapper = useRef<HTMLDivElement>(null);
@@ -33,10 +33,10 @@ const Timeline: FC<TimelineInput> = ({ columnWidth: externalColumnWidth }) => {
     }
 
     logDebug("Timeline", "Resizing window...");
-    const { clientHeight: height, clientWidth: width, offsetHeight } = wrapper.current;
-    const offsetSize = offsetHeight - height;
-    setScrollOffsetSize(offsetSize);
+    const { clientHeight: height, clientWidth: width, offsetHeight, offsetWidth } = wrapper.current;
+    const scrollbarSize = Math.max(offsetHeight - height, offsetWidth - width);
     setSize({ height, width });
+    setScrollbarSize(scrollbarSize);
   }, []);
 
   const onStageScroll = useCallback(() => {
@@ -83,7 +83,11 @@ const Timeline: FC<TimelineInput> = ({ columnWidth: externalColumnWidth }) => {
     return !externalColumnWidth || externalColumnWidth < COLUMN_WIDTH ? resolution.columnSize : externalColumnWidth;
   }, [externalColumnWidth, resolution]);
 
-  const stageWidth = useMemo(() => columnWidth * timeBlocks.length, [columnWidth, timeBlocks]);
+  const fullTimelineWidth = useMemo(() => columnWidth * timeBlocks.length, [columnWidth, timeBlocks]);
+
+  const stageHeight = useMemo(() => size.height, [size]);
+
+  const stageWidth = useMemo(() => scrollbarSize + size.width, [scrollbarSize, size]);
 
   const timelineCommonStyle = useMemo(
     (): CSSProperties => ({
@@ -108,50 +112,53 @@ const Timeline: FC<TimelineInput> = ({ columnWidth: externalColumnWidth }) => {
       ...timelineCommonStyle,
       backgroundColor: "white",
       boxShadow: "4px 4px 32px 1px #0000000f",
+      borderRight: "1px solid black",
       left: 0,
-      paddingBottom: `${scrollOffsetSize}px`,
+      paddingBottom: scrollbarSize,
       position: "sticky",
       top: 0,
       width: RESOURCE_HEADER_WIDTH,
       zIndex: 1,
     }),
-    [scrollOffsetSize, timelineCommonStyle]
+    [scrollbarSize, timelineCommonStyle]
   );
 
   const gridStageWrapperStyle = useMemo(
     (): CSSProperties => ({
       ...timelineCommonStyle,
       overflow: "hidden",
-      width: stageWidth,
+      width: fullTimelineWidth,
     }),
-    [stageWidth, timelineCommonStyle]
+    [fullTimelineWidth, timelineCommonStyle]
   );
 
+  const resourcesOffset = useMemo(() => (hideResources ? 0 : RESOURCE_HEADER_WIDTH + 1), [hideResources]);
+
   const gridWrapperStyle = useMemo(
     (): CSSProperties => ({
       ...timelineCommonStyle,
-      left: hideResources ? 0 : RESOURCE_HEADER_WIDTH + 1,
+      left: resourcesOffset,
       overflow: "auto",
       position: "absolute",
       top: 0,
-      width: hideResources ? "100%" : `calc(100% - ${RESOURCE_HEADER_WIDTH}px)`,
+      width: `calc(100% - ${resourcesOffset}px)`,
     }),
-    [hideResources, timelineCommonStyle]
+    [resourcesOffset, timelineCommonStyle]
   );
 
   return (
     <div style={timelineWrapperStyle}>
       {!hideResources && (
         <div style={resourcesStageWrapperStyle}>
-          <Stage height={size.height} width={RESOURCE_HEADER_WIDTH}>
+          <Stage height={stageHeight} width={RESOURCE_HEADER_WIDTH}>
             <ResourcesLayer />
           </Stage>
         </div>
       )}
       <div ref={wrapper} style={gridWrapperStyle}>
         <div style={gridStageWrapperStyle}>
-          <Stage ref={stageRef} height={size.height} width={size.width}>
-            <GridLayer columnWidth={columnWidth} height={size.height} width={stageWidth} />
+          <Stage ref={stageRef} height={stageHeight} width={stageWidth}>
+            <GridLayer columnWidth={columnWidth} height={stageHeight} width={fullTimelineWidth} />
             <TasksLayer />
           </Stage>
         </div>