Bugfixing in the Cerrypicked Branch 1

lowcoder-org · FalkWolsky · Mar 24, 2024 · Mar 5, 2024 · Mar 5, 2024 · Mar 5, 2024
commit da629274d3f194dbc8a3521ad6ae2a254a58e178
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts
@@ -290,7 +290,7 @@ export { ReactComponent as WidthIcon } from "./icon-width.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./icon-responsive-layout-comp.svg";
 export { ReactComponent as TextSizeIcon } from "./remix/font-size-2.svg";
 export { ReactComponent as FontFamilyIcon } from "./remix/font-sans-serif.svg";
-export { ReactComponent as TextWeigthIcon } from "./remix/bold.svg";
+export { ReactComponent as TextWeightIcon } from "./remix/bold.svg";
 export { ReactComponent as BorderWidthIcon } from "./remix/expand-width-line.svg";
 export { ReactComponent as LeftInfoLine } from "./remix/information-line.svg";
 export { ReactComponent as LeftInfoFill } from "./remix/information-fill.svg";

diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -30,7 +30,7 @@ const getStyle = (style: SliderStyleType) => {
         }
         .ant-slider-handle {
           background-color: ${style.thumb};
-          border-color: ${style.thumbBoder};
+          border-color: ${style.thumbBorder};
         }
       }
       &:hover {
@@ -39,7 +39,7 @@ const getStyle = (style: SliderStyleType) => {
         }
       }
       .ant-slider-handle:focus {
-        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBoder, 0.08), 0.12)};
+        box-shadow: 0 0 0 5px ${fadeColor(darkenColor(style.thumbBorder, 0.08), 0.12)};
       }
     }
   `;

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -21,7 +21,7 @@ import {
   withFunction,
   wrapChildAction,
 } from "lowcoder-core";
-import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeigthIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
+import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeightIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
 import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
@@ -120,7 +120,7 @@ const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0
 const StyledBorderIcon = styled(BorderWidthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
-const StyledTextWeightIcon = styled(TextWeigthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
 
 /**
@@ -303,7 +303,7 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.textWeight.propertyView({
           label: trans('style.textWeight'),
-          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
+          preInputNode: <StyledTextWeightIcon as={TextWeightIcon} title="" />,
           placeholder: 'normal',
         })}
         {this.children.fontFamily.propertyView({

diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -46,7 +46,7 @@ import {
 import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConstants";
 import { convertTimeLineData } from "./timelineUtils";
 import { default as Timeline } from "antd/es/timeline";
-import { EditorContext } from "comps/editorState"; 
+import { EditorContext } from "comps/editorState";
 
 const EventOptions = [
   clickEvent,
@@ -108,7 +108,7 @@ const TimelineComp = (
     color: value?.color,
     dot: icons[index] || "",
     label: (
-      <span style={{ color: value?.lableColor || style?.lableColor }}>
+      <span style={{ color: value?.labelColor || style?.labelColor }}>
         {value?.label}
       </span>
     ),

diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineConstants.tsx
@@ -7,7 +7,7 @@ export type timelineNode = {
   dot?: string;
   subTitleColor?: string;
   titleColor?: string;
-  lableColor?: string;
+  labelColor?: string;
 };
 
 export const TimelineDataTooltip = (
@@ -28,7 +28,7 @@ export const TimelineDataTooltip = (
     <br />
     7. subTitleColor - {trans("timeLine.helpSubTitleColor")}
     <br />
-    8. lableColor - {trans("timeLine.helpLableColor")}
+    8. labelColor - {trans("timeLine.helpLabelColor")}
   </li>
 );
 
@@ -51,7 +51,7 @@ export const timelineDate=[
     color: 'red',
     titleColor: "red",
     subTitleColor: "red",
-    lableColor: "red",
+    labelColor: "red",
   },
   {
     title: "Lowcoder 2.0",
@@ -60,4 +60,4 @@ export const timelineDate=[
     color: "green",
     label: "2023-6-20",
   },
-]
+]
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineUtils.tsx
@@ -15,7 +15,7 @@ function checkDataNodes(value: any, key?: string): timelineNode[] | undefined {
     check(node["color"], ["string", "undefined"], "color");
     check(node["titleColor"], ["string", "undefined"], "titleColor");
     check(node["subTitleColor"], ["string", "undefined"], "subTitleColor");
-    check(node["lableColor"], ["string", "undefined"], "lableColor");
+    check(node["labelColor"], ["string", "undefined"], "labelColor");
     check(node["dot"], ["string", "undefined"], "dot");
     return node;
   });

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -9,12 +9,12 @@ import { gridItemCompToGridItems, InnerGrid } from "../containerComp/containerVi
 import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
 
 const getStyle = (style: ContainerStyleType) => {
-  return css` 
+  return css`
     border-color: ${style.border};
     border-width: ${style.borderWidth};
     border-radius: ${style.radius};
     overflow: hidden;
-    padding: ${style.padding};	
+    padding: ${style.padding};
     ${style.background && `background-color: ${style.background};`}
     ${style.backgroundImage && `background-image: ${style.backgroundImage};`}
     ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
@@ -33,7 +33,7 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const HeaderInnerGrid = styled(InnerGrid)<{ 
+const HeaderInnerGrid = styled(InnerGrid)<{
   $backgroundColor: string
   $headerBackgroundImage: string;
   $headerBackgroundImageRepeat: string;
@@ -140,7 +140,7 @@ export function TriContainer(props: TriContainerProps) {
             $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
             $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
             $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
-            style={{padding: headerStyle.containerheaderpadding}}
+            style={{padding: headerStyle.containerHeaderPadding}}
 
           />
         </BackgroundColorContext.Provider>
@@ -168,7 +168,7 @@ export function TriContainer(props: TriContainerProps) {
                 $backgroundImageSize={bodyStyle?.backgroundImageSize}
                 $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
                 $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
-                style={{padding: bodyStyle.containerbodypadding}}
+                style={{padding: bodyStyle.containerBodyPadding}}
               />
             </ScrollBar>
             ) : (
@@ -191,7 +191,7 @@ export function TriContainer(props: TriContainerProps) {
               $backgroundImageSize={bodyStyle?.backgroundImageSize}
               $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
               $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
-              style={{padding: bodyStyle.containerbodypadding}}/>
+              style={{padding: bodyStyle.containerBodyPadding}}/>
           )}
         </BackgroundColorContext.Provider>
       )}
@@ -214,7 +214,7 @@ export function TriContainer(props: TriContainerProps) {
             $footerBackgroundImageOrigin={footerStyle?.footerBackgroundImageOrigin}
             $borderColor={style?.border}
             $borderWidth={style?.borderWidth}
-            style={{padding: footerStyle.containerfooterpadding}}
+            style={{padding: footerStyle.containerFooterPadding}}
           />
         </BackgroundColorContext.Provider>
       )}

diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -14,7 +14,7 @@ import {
   CompressIcon,
   TextSizeIcon,
   FontFamilyIcon,
-  TextWeigthIcon,
+  TextWeightIcon,
   ShowBorderIcon,
   BorderWidthIcon,
   ImageCompIcon,
@@ -527,7 +527,7 @@ const MarginIcon = styled(ExpandIcon)` margin: 0 8px 0 2px;`;
 const PaddingIcon = styled(CompressIcon)`	margin: 0 8px 0 2px;`;
 const StyledTextSizeIcon = styled(TextSizeIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledFontFamilyIcon = styled(FontFamilyIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
-const StyledTextWeightIcon = styled(TextWeigthIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
+const StyledTextWeightIcon = styled(TextWeightIcon)` margin: 0 8px 0 -3px; padding: 3px;`;
 const StyledBackgroundImageIcon = styled(ImageCompIcon)` margin: 0 0px 0 -12px;`;
 
 const ResetIcon = styled(IconReset)`
@@ -568,9 +568,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
       name === "footerBackgroundImageOrigin" ||
       name === "margin" ||
       name === "padding" ||
-      name === "containerheaderpadding" ||
-      name === "containerfooterpadding" ||
-      name === "containerbodypadding"
+      name === "containerHeaderPadding" ||
+      name === "containerFooterPadding" ||
+      name === "containerBodyPadding"
     ) {
       childrenMap[name] = StringControl;
     } else {
@@ -614,9 +614,9 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                       name === "radius" ||
                       name === "margin" ||
                       name === "padding" ||
-                      name === "containerheaderpadding" ||
-                      name === "containerfooterpadding" ||
-                      name === "containerbodypadding" ||
+                      name === "containerHeaderPadding" ||
+                      name === "containerFooterPadding" ||
+                      name === "containerBodyPadding" ||
                       name === "borderWidth" ||
                       name === "backgroundImage" ||
                       name === "backgroundImageRepeat" ||
@@ -708,7 +708,11 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                               preInputNode: <PaddingIcon title="Padding" />,
                               placeholder: props[name],
                             })
-                            : name === "textSize"
+                            : name === "textSize" ||
+                              name === "padding" ||
+                              name === "containerHeaderPadding" ||
+                              name === "containerFooterPadding" ||
+                              name === "containerBodyPadding"
                               ? (
                                 children[name] as InstanceType<typeof StringControl>
                               ).propertyView({
@@ -786,7 +790,10 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
                                                 // isDep: isDepColorConfig(config),	
                                                 isDep: true,
                                                 depMsg: depMsg,
-                                              })}
+                                              })
+
+                    }
+
                   </div>
                 );
               })}
@@ -806,4 +813,4 @@ export function useStyle<T extends readonly SingleColorConfig[]>(colorConfigs: T
     props[config.name as Names<T>] = "";
   });
   return calcColors(props, colorConfigs, theme?.theme, bgColor);
-}
+}