Merge branch 'dev' into feature/#440-create-rich-text-paragraph-compo…

…nent
Lemoncode · Jan 1, 2025 · 1b83cda · 1b83cda
2 parents 3f84dfd + 5676887
commit 1b83cda
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 12 deletions.
diff --git a/public/icons/calendar-disabled.svg b/public/icons/calendar-disabled.svg
diff --git a/public/icons/clock-disabled.svg b/public/icons/clock-disabled.svg
diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -3,11 +3,12 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text, Image } from 'react-konva';
-import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 import calendarIconSrc from '/icons/calendar.svg';
+import disabledCalendarIconSrc from '/icons/calendar-disabled.svg';
 
 const datepickerInputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
@@ -45,7 +46,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
     const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
-      useShapeProps(otherProps, INPUT_SHAPE);
+      useShapeProps(otherProps, BASIC_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
       props,
@@ -64,7 +65,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
     const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
 
     const calendarIcon = new window.Image();
-    calendarIcon.src = calendarIconSrc;
+    calendarIcon.src = disabled ? disabledCalendarIconSrc : calendarIconSrc;
 
     return (
       <Group {...commonGroupProps} {...shapeProps}>
@@ -79,7 +80,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
             disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
           }
           dash={strokeStyle}
-          strokeWidth={2}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           fill={
             disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
           }
@@ -91,14 +92,16 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           width={labelFontSize + 20}
           height={labelFontSize}
           cornerRadius={borderRadius}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           fill="white"
         />
         {/* Label "Date" */}
         <Text
           text="Date"
           x={13}
           y={-5}
-          fontSize={labelFontSize}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE - 4}
           fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
@@ -110,7 +113,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}
-          fontSize={fontSize}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
           align="left"
           ellipsis={true}
           wrap="none"

diff --git a/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx b/src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
@@ -87,7 +87,11 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
   );
 
   const calculateItemBackground = (index: number) => {
-    if (disabled) return DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;
+    if (disabled) {
+      return selectedItem === index
+        ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+        : DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;
+    }
 
     return selectedItem === index ? selectedBackgroundColor : fill;
   };
@@ -127,6 +131,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
               fill={calculateItemBackground(index)}
               stroke={calculateItemStroke(index)}
               strokeWidth={selectedItem === index ? 1 : 0}
+              cornerRadius={borderRadius}
             />
             <Text
               x={10}

diff --git a/src/common/components/mock-components/front-components/progressbar-shape.tsx b/src/common/components/mock-components/front-components/progressbar-shape.tsx
@@ -31,7 +31,10 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { progress, borderRadius } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { progress, borderRadius, fill, stroke } = useShapeProps(
+    otherProps,
+    BASIC_SHAPE
+  );
 
   const progressWidth = useMemo(
     () => (progress / 100) * restrictedWidth,
@@ -54,7 +57,7 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke="black"
+        stroke={stroke}
         strokeWidth={2}
         fill="white"
       />
@@ -66,9 +69,9 @@ export const ProgressBarShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={progressWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke="black"
+        stroke={stroke}
         strokeWidth={2}
-        fill="lightgrey"
+        fill={fill}
       />
     </Group>
   );

diff --git a/...mon/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx b/...mon/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx
@@ -9,6 +9,7 @@ import { useGroupShapeProps } from '../../mock-components.utils';
 import { splitCSVContent, setTime } from './timepickerinput-shape.business';
 
 import clockIconSrc from '/icons/clock.svg';
+import disabledClockIconSrc from '/icons/clock-disabled.svg';
 
 const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 100,
@@ -68,7 +69,7 @@ export const TimepickerInputShape = forwardRef<any, ShapeProps>(
     const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
 
     const clockIcon = new window.Image();
-    clockIcon.src = clockIconSrc;
+    clockIcon.src = disabled ? disabledClockIconSrc : clockIconSrc;
 
     return (
       <Group {...commonGroupProps} {...shapeProps}>

diff --git a/src/core/providers/canvas/canvas.model.ts b/src/core/providers/canvas/canvas.model.ts
@@ -115,6 +115,7 @@ export interface CanvasContextModel {
   setIsThumbnailContextMenuVisible: React.Dispatch<
     React.SetStateAction<boolean>
   >;
+  howManyLoadedDocuments: number;
   canvasSize: CanvasSize;
   setCanvasSize: (canvasDimensions: CanvasSize) => void;
 }
diff --git a/src/core/providers/canvas/canvas.provider.tsx b/src/core/providers/canvas/canvas.provider.tsx
@@ -29,6 +29,7 @@ export const CanvasProvider: React.FC<Props> = props => {
   const [fileName, setFileName] = React.useState<string>('');
   const [isThumbnailContextMenuVisible, setIsThumbnailContextMenuVisible] =
     React.useState(false);
+  const [howManyLoadedDocuments, setHowManyLoadedDocuments] = React.useState(0);
   const [canvasSize, setCanvasSize] = React.useState<CanvasSize>({
     width: 3000,
     height: 3000,
@@ -299,6 +300,7 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const loadDocument = (document: DocumentModel) => {
     setDocument(document);
+    setHowManyLoadedDocuments(numberOfDocuments => numberOfDocuments + 1);
   };
 
   return (
@@ -339,6 +341,7 @@ export const CanvasProvider: React.FC<Props> = props => {
         activePageIndex: document.activePageIndex,
         isThumbnailContextMenuVisible,
         setIsThumbnailContextMenuVisible,
+        howManyLoadedDocuments,
         canvasSize: canvasSize,
         setCanvasSize: setCanvasSize,
       }}

diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts
@@ -230,6 +230,8 @@ export const generateDefaultOtherProps = (
       };
     case 'progressbar':
       return {
+        stroke: BASIC_SHAPE.DEFAULT_STROKE_COLOR,
+        backgroundColor: '#A9A9A9',
         progress: '50',
         borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
       };

diff --git a/src/scenes/accordion-section-visibility.hook.ts b/src/scenes/accordion-section-visibility.hook.ts
@@ -1,8 +1,21 @@
+import { useCanvasContext } from '@/core/providers';
 import { useEffect, useRef, useState } from 'react';
 
 export const useAccordionSectionVisibility = () => {
   const [isThumbPagesPodOpen, setIsThumbPagesPodOpen] = useState(false);
   const thumbPagesPodRef = useRef<HTMLDetailsElement>(null);
+  const { fullDocument, howManyLoadedDocuments } = useCanvasContext();
+
+  useEffect(() => {
+    if (
+      howManyLoadedDocuments > 0 &&
+      thumbPagesPodRef.current &&
+      fullDocument.pages.length > 1
+    ) {
+      setIsThumbPagesPodOpen(true);
+      thumbPagesPodRef.current.open = true;
+    }
+  }, [howManyLoadedDocuments]);
 
   useEffect(() => {
     const handleToggle = () => {