Numerous fixes and introduction of Layout mode.

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

@@ -24,7 +24,7 @@ import { EditorContext } from "comps/editorState";
 import React, { useContext } from "react";
 
 const Link = styled(Button)<{ $style: LinkStyleType }>`
-  ${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding};`}
+  ${(props) => `color: ${props.$style.text}; margin: ${props.$style.margin}; padding: ${props.$style.padding}; font-size: ${props.$style.textSize};`}
   &.ant-btn {
     display: inline-flex;
     align-items: center;

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

@@ -15,6 +15,11 @@ import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { CarouselStyle } from "comps/controls/styleControlConstants";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
+// TODO: dots at top position needs proper margin (should be the same as bottom position)
+
 const CarouselItem = styled.div<{ src: string }>`
   background: ${(props) => props.src && `url(${props.src})`} no-repeat 50% 50%;
   background-size: contain;
@@ -74,19 +79,29 @@ let CarouselBasicComp = (function () {
         <>
           <Section name={sectionNames.basic}>
             {children.data.propertyView({ label: trans("data") })}
-            {children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
           </Section>
-          <FormDataPropertyView {...children} />
-          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
-          <Section name={sectionNames.layout}>
-            {children.showDots.propertyView({ label: trans("carousel.showDots") })}
-            {children.dotPosition.propertyView({
-              label: trans("carousel.dotPosition"),
-              radioButton: true,
-            })}
-            {hiddenPropertyView(children)}
-          </Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <><FormDataPropertyView {...children} />
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {hiddenPropertyView(children)}
+              {children.autoPlay.propertyView({ label: trans("carousel.autoPlay") })}
+            </Section></>
+          )}
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <><Section name={sectionNames.layout}>
+                {children.showDots.propertyView({ label: trans("carousel.showDots") })}
+                {children.dotPosition.propertyView({
+                  label: trans("carousel.dotPosition"),
+                  radioButton: true,
+                })}
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+            </>
+          )}
         </>
       );
     })

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

@@ -13,14 +13,21 @@ import { migrateOldData } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
 
+// 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>`
   margin-top: 3.5px;
   .ant-divider-inner-text {
     height: 32px;
     display: flex;
     align-items: center;
+    font-size: ${(props) => props.$style.textSize};
   }
   min-width: 0;	
   width: ${(props) => {	
@@ -33,7 +40,14 @@ const StyledDivider = styled(Divider)<IProps>`
     return props.$style.margin;	
   }};	
   padding: ${(props) => props.$style.padding};
-  border-top: 1px ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
+
+  border-top: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color};
+
+  .ant-divider-inner-text::before, .ant-divider-inner-text::after {
+    border-block-start: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.color} !important;
+    border-block-start-color: inherit;
+    border-block-end: 0;
+  }
 
   &.ant-divider-horizontal.ant-divider-with-text {
     margin: 0;
@@ -76,17 +90,29 @@ export const DividerComp = migrateOldData(
         <>
           <Section name={sectionNames.basic}>
             {children.title.propertyView({ label: trans("divider.title") })}
-            {!_.isEmpty(children.title.getView()) &&
-              children.align.propertyView({
-                label: trans("divider.align"),
-                radioButton: true,
-              })}
-          </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>
-            {children.dashed.propertyView({ label: trans("divider.dashed") })}
-            {children.style.getPropertyView()}
           </Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <>
+              <Section name={sectionNames.layout}>
+                {!_.isEmpty(children.title.getView()) &&
+                  children.align.propertyView({
+                    label: trans("divider.align"),
+                    radioButton: true,
+                  })}
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.dashed.propertyView({ label: trans("divider.dashed") })}
+                {children.style.getPropertyView()}
+              </Section>
+            </>
+          )}
         </>
       );
     })

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

@@ -11,6 +11,9 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const getStyle = (style: FileViewerStyleType) => {
   return css`
     width: ${widthCalculator(style.margin)};	
@@ -20,7 +23,7 @@ const getStyle = (style: FileViewerStyleType) => {
 
     overflow: hidden;
     background-color: ${style.background};
-    border: 1px solid ${style.border};
+    border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
     border-radius: calc(min(${style.radius}, 20px));
   `;
 };
@@ -78,14 +81,22 @@ let FileViewerBasicComp = (function () {
             {children.src.propertyView({
               label: trans("fileViewer.src"),
               tooltip: (
-                <span style={{ wordBreak: "break-all" }}>{trans("fileViewer.srcTooltip")}</span>
+                <span>{trans("fileViewer.srcTooltip")}</span>
               ),
             })}
           </Section>
 
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
 
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          )}
         </>
       );
     })

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

@@ -10,11 +10,14 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import log from "loglevel";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const Wrapper = styled.div<{ $style: IframeStyleType }>`
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border: 1px solid ${(props) => props.$style.border};
+  border: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} solid ${(props) => props.$style.border};
   border-radius: calc(min(${(props) => props.$style.radius}, 20px));
 
   iframe {
@@ -64,16 +67,22 @@ let IFrameCompBase = new UICompBuilder(
         {children.url.propertyView({ label: "URL", placeholder: "https://example.com" })}
       </Section>
 
-      <Section name={sectionNames.advanced}>
-        {children.allowDownload.propertyView({ label: trans("iframe.allowDownload") })}
-        {children.allowSubmitForm.propertyView({ label: trans("iframe.allowSubmitForm") })}
-        {children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
-        {children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
-        {children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
-      </Section>
+      {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        <Section name={sectionNames.interaction}>
+          {hiddenPropertyView(children)}
+          {children.allowDownload.propertyView({ label: trans("iframe.allowDownload") })}
+          {children.allowSubmitForm.propertyView({ label: trans("iframe.allowSubmitForm") })}
+          {children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
+          {children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
+          {children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
+        </Section>
+      )}
 
-      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-      <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+      {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
+      )}
     </>
   ))
   .build();

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

@@ -29,6 +29,9 @@ import { BoolControl } from "comps/controls/boolControl";
 import { Image as AntImage } from "antd";
 import { DEFAULT_IMG_URL } from "util/stringUtils";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const Container = styled.div<{ $style: ImageStyleType | undefined }>`
   height: 100%;
   width: 100%;
@@ -52,7 +55,7 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
 const getStyle = (style: ImageStyleType) => {
   return css`
     img {
-      border: 1px solid ${style.border};
+      border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
       border-radius: ${style.radius};
       margin: ${style.margin};
       padding: ${style.padding};
@@ -169,24 +172,29 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           {children.src.propertyView({
             label: trans("image.src"),
           })}
-          {children.supportPreview.propertyView({
-            label: trans("image.supportPreview"),
-            tooltip: trans("image.supportPreviewTip"),
-          })}
-        </Section>
-
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
         </Section>
 
-        <Section name={sectionNames.layout}>
-          {children.autoHeight.getPropertyView()}
-          {hiddenPropertyView(children)}
-        </Section>
-
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+            {children.supportPreview.propertyView({
+              label: trans("image.supportPreview"),
+              tooltip: trans("image.supportPreviewTip"),
+            })}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
+            <Section name={sectionNames.layout}>
+              {children.autoHeight.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          </>
+        )}
       </>
     );
   })

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

@@ -9,6 +9,11 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
+// TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
+
 const getStyle = (style: ProgressStyleType) => {
   return css`
     width: ${widthCalculator(style.margin)};	
@@ -74,8 +79,18 @@ let ProgressCircleTmpComp = (function () {
               tooltip: trans("progress.valueTooltip"),
             })}
           </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {hiddenPropertyView(children)}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          )}
         </>
       );
     })

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

@@ -10,6 +10,9 @@ import styled, { css } from "styled-components";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+
 const getStyle = (style: ProgressStyleType) => {
   return css`
     line-height: 2;
@@ -64,12 +67,22 @@ const ProgressBasicComp = (function () {
               label: trans("progress.value"),
               tooltip: trans("progress.valueTooltip"),
             })}
-            {children.showInfo.propertyView({
-              label: trans("progress.showInfo"),
-            })}
           </Section>
-          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
-          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.interaction}>
+              {hiddenPropertyView(children)}
+              {children.showInfo.propertyView({
+                label: trans("progress.showInfo"),
+              })}
+            </Section>
+          )}
+
+          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+          )}
         </>
       );
     })