Fixes in styles and Translations

Author: FalkWolsky

client/packages/lowcoder-design/src/components/Section.tsx

@@ -177,6 +177,7 @@ export const sectionNames = {
   meetings: trans("prop.meetings"), // added by Falk Wolsky
   field: trans("prop.field"),
   inputFieldStyle:trans("prop.inputFieldStyle"),
+  childrenInputFieldStyle:trans("prop.childrenInputFieldStyle"),
   avatarStyle:trans("prop.avatarStyle"),
   captionStyle:trans("prop.captionStyle"),
   startButtonStyle:trans("prop.startButtonStyle"),

client/packages/lowcoder-design/src/i18n/design/locales/en.ts

@@ -30,6 +30,7 @@ export const en = {
     data: "Data",
     field: 'Field',
     inputFieldStyle: 'Input Field Style',
+    childrenInputFieldStyle: 'Children Input Field Style',
     avatarStyle: 'Avatar Style',
     captionStyle: 'Caption Style',
     startButtonStyle: 'Start Button Style',

client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx

@@ -38,8 +38,8 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
   .ant-btn span {
-    ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
-    ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+    ${(props) => props.$buttonStyle.textDecoration !== undefined ? `text-decoration: ${props.$buttonStyle.textDecoration};` : ''}
+    ${(props) => props.$buttonStyle.fontFamily !== undefined ? `font-family: ${props.$buttonStyle.fontFamily};` : ''}
   }
   
   .ant-btn {
@@ -48,6 +48,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
     height: 100%;
     &.ant-btn-default {
       margin: 0 !important;
+
       ${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
       ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
       ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}

client/packages/lowcoder/src/comps/comps/dividerComp.tsx

@@ -2,7 +2,7 @@ import { default as Divider, DividerProps } from "antd/es/divider";
 import { StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { alignControl } from "comps/controls/alignControl";
-import { UICompBuilder } from "comps/generators";
+import { UICompBuilder, withDefault } from "comps/generators";
 import { NameConfig, NameConfigHidden } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
 import _ from "lodash";
@@ -12,6 +12,8 @@ import { AnimationStyle, AnimationStyleType, DividerStyle, DividerStyleType, hei
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
+
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -22,7 +24,6 @@ type IProps = DividerProps & {
   $animationStyle:AnimationStyleType;
 };
 
-// TODO: find out how to set border style when text is active
 // TODO: enable type "vertical" https://ant.design/components/divider
 
 const StyledDivider = styled(Divider) <IProps>`
@@ -40,7 +41,7 @@ const StyledDivider = styled(Divider) <IProps>`
     font-style:${(props) => props.$style.fontStyle}
   }
   ${props=>props.$animationStyle}
-  min-width: 0;	
+  min-width: 1px;
   width: ${(props) => {
     return widthCalculator(props.$style.margin);
   }};	
@@ -57,6 +58,7 @@ const StyledDivider = styled(Divider) <IProps>`
     border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important;
     border-block-start-color: inherit;
     border-block-end: 0;
+    border-block-start-radius: inherit;
   }
 
   &.ant-divider-horizontal.ant-divider-with-text {
@@ -76,6 +78,7 @@ const childrenMap = {
   title: StringControl,
   dashed: BoolControl,
   align: alignControl(),
+  autoHeight: withDefault(AutoHeightControl, "fixed"),
   style: styleControl(DividerStyle),
   animationStyle: styleControl(AnimationStyle),
 };
@@ -96,7 +99,7 @@ function fixOldStyleData(oldData: any) {
 
 
 // Compatible with historical style data 2022-8-26
-export const DividerComp = migrateOldData(
+const DividerTempComp = migrateOldData(
   new UICompBuilder(childrenMap, (props) => {
     return (
       <StyledDivider
@@ -130,6 +133,7 @@ export const DividerComp = migrateOldData(
                     label: trans("divider.align"),
                     radioButton: true,
                   })}
+                {children.autoHeight.getPropertyView()}
               </Section>
               <Section name={sectionNames.style}>
                 {children.dashed.propertyView({ label: trans("divider.dashed") })}
@@ -152,3 +156,9 @@ export const DividerComp = migrateOldData(
     .build(),
   fixOldStyleData
 );
+
+export const DividerComp = class extends DividerTempComp {
+  override autoHeight(): boolean {
+    return this.children.autoHeight.getView();
+  }
+};

client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx

@@ -85,7 +85,7 @@ export const CascaderPropertyView = (
         <Section name={sectionNames.inputFieldStyle}>
           {children.inputFieldStyle.getPropertyView()}
         </Section>
-        <Section name={'Children Input Field Style'}>
+        <Section name={sectionNames.childrenInputFieldStyle}>
           {children.childrenInputFieldStyle.getPropertyView()}
         </Section>
         <Section name={sectionNames.animationStyle} hasTooltip={true}>

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -363,7 +363,7 @@ export const SelectPropertyView = (
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
-          <Section name={'Children Input Field Styles'}>
+          <Section name={sectionNames.childrenInputFieldStyle}>
             {children.childrenInputFieldStyle.getPropertyView()}
           </Section>
         </>

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -217,6 +217,7 @@ export const en = {
     "className": "CSS Class name",
     "dataTestId": "Individual ID",
     "preventOverwriting": "Prevent overwriting styles",
+    "color": "Color",
   },
   "autoHeightProp": {
     "auto": "Auto",
@@ -471,10 +472,10 @@ export const en = {
     "borderRadius": "Border Radius",
     "borderWidth": "Border Width",
     "borderStyle":"Border Style",
-    "background": "Background",
-    "headerBackground": "Header Background",
-    "siderBackground": "Sider Background",
-    "footerBackground": "Footer Background",
+    "background": "Background Color",
+    "headerBackground": "Header Background Color",
+    "siderBackground": "Sider Background Color",
+    "footerBackground": "Footer Background Color",
     "fill": "Fill",
     "track": "Track",
     "links": "Links",
@@ -488,20 +489,20 @@ export const en = {
     "multiIcon": "Multiselect Icon",
     "tabText": "Tab Text",
     "tabAccent": "Tab Accent",
-    "checkedBackground": "Checked Background",
-    "uncheckedBackground": "Unchecked Background",
-    "uncheckedBorder": "Unchecked Border",
-    "indicatorBackground": "Indicator Background",
+    "checkedBackground": "Checked Background Color",
+    "uncheckedBackground": "Unchecked Background Color",
+    "uncheckedBorder": "Unchecked Border Color",
+    "indicatorBackground": "Indicator Background Color",
     "tableCellText": "Cell Text",
-    "selectedRowBackground": "Selected Row Background",
-    "hoverRowBackground": "Hover Row Background",
-    "hoverBackground":"Hover Background",
+    "selectedRowBackground": "Selected Row Background Color",
+    "hoverRowBackground": "Hover Row Background Color",
+    "hoverBackground":"Hover Background Color",
     "textTransform":"Text Transform",
     "textDecoration":"Text Decoration",
-    "alternateRowBackground": "Alternate Row Background",
-    "tableHeaderBackground": "Header Background",
+    "alternateRowBackground": "Alternate Row Background Color",
+    "tableHeaderBackground": "Header Background Color",
     "tableHeaderText": "Header Text",
-    "toolbarBackground": "Toolbar Background",
+    "toolbarBackground": "Toolbar Background Color",
     "toolbarText": "Toolbar Text",
     "pen": "Pen",
     "footerIcon": "Footer Icon",
@@ -523,22 +524,36 @@ export const en = {
     "textWeight": "Text Weight",
     "fontFamily": "Font Family",
     "fontStyle":"Font Style",
-    "backgroundImage": "BG Image",
-    "backgroundImageRepeat": "BG Repeat",
-    "backgroundImageSize": "BG Size",
-    "backgroundImagePosition": "BG Position",
-    "backgroundImageOrigin": "BG Origin",
-    "headerBackgroundImage": "BgImage",
-    "headerBackgroundImageRepeat": "BgImage Repeat",
-    "headerBackgroundImageSize": "BgImage Size",
-    "headerBackgroundImagePosition": "BgImage Position",
-    "headerBackgroundImageOrigin": "BgImage Origin",
-    "footerBackgroundImage": "BgImage",
-    "footerBackgroundImageRepeat": "BgImage Repeat",
-    "footerBackgroundImageSize": "BgImage Size",
-    "footerBackgroundImagePosition": "BgImage Position",
-    "footerBackgroundImageOrigin": "BgImage Origin",
+    "backgroundImage": "Background Image",
+    "backgroundImageRepeat": "Background Repeat",
+    "backgroundImageSize": "Background Size",
+    "backgroundImagePosition": "Background Position",
+    "backgroundImageOrigin": "Background Origin",
+    "headerBackgroundImage": "Background Image",
+    "headerBackgroundImageRepeat": "Background Image Repeat",
+    "headerBackgroundImageSize": "Background Image Size",
+    "headerBackgroundImagePosition": "Background Image Position",
+    "headerBackgroundImageOrigin": "Background Image Origin",
+    "footerBackgroundImage": "Background Image",
+    "footerBackgroundImageRepeat": "Background Image Repeat",
+    "footerBackgroundImageSize": "Background Image Size",
+    "footerBackgroundImagePosition": "Background Image Position",
+    "footerBackgroundImageOrigin": "Background Image Origin",
     "rotation": "Rotation",
+    "alternateBackground": "Alternate Background Color",
+    "headerText": "Header Text Color",
+    "labelColor": "Label Color",
+    "label": "Label Color",
+    "subTitleColor": "SubTitle Color",
+    "titleText": "Title Color",
+    "success": "Success Color",
+    "siderBackgroundImage": "Sider Background Image",
+    "siderBackgroundImageRepeat": "Sider Background Image Repeat",
+    "siderBackgroundImageSize": "Sider Background Image Size",
+    "siderBackgroundImagePosition": "Sider Background Image Position",
+    "siderBackgroundImageOrigin": "Sider Background Image Origin",
+    "activeBackground": "Active Background Color",
+
   },
   "export": {
     "hiddenDesc": "If true, the component is hidden",