Icons and small improvements for SplitLayout

Author: FalkWolsky

client/packages/lowcoder-design/src/icons/index.tsx

@@ -317,6 +317,7 @@ export { ReactComponent as RadioCompIconSmall } from "./v2/radio-button-s.svg";
 export { ReactComponent as RangeSliderCompIconSmall } from "./v2/range-slider-s.svg"; // new
 export { ReactComponent as RatingCompIconSmall } from "./v2/rating-s.svg";
 export { ReactComponent as ResponsiveLayoutCompIconSmall } from "./v2/resposive-layout-s.svg"; // new
+export { ReactComponent as SplitLayoutCompIconSmall } from "./v2/split-layout-s.svg"; // new
 export { ReactComponent as RichTextEditorCompIconSmall } from "./v2/rich-text-editor-s.svg"; // new
 export { ReactComponent as ScannerCompIconSmall } from "./v2/scanner-s.svg";    // new
 export { ReactComponent as ShapesCompIconSmall } from "./v2/shapes-s.svg"; // new
@@ -419,6 +420,7 @@ export { ReactComponent as RadioCompIcon } from "./v2/radio-button-m.svg";
 export { ReactComponent as RangeSliderCompIcon } from "./v2/range-slider-m.svg";
 export { ReactComponent as RatingCompIcon } from "./v2/rating-m.svg";
 export { ReactComponent as ResponsiveLayoutCompIcon } from "./v2/resposive-layout-m.svg";
+export { ReactComponent as SplitLayoutCompIcon } from "./v2/split-layout-m.svg";
 export { ReactComponent as RichTextEditorCompIcon } from "./v2/rich-text-editor-m.svg";
 export { ReactComponent as ScannerCompIcon } from "./v2/scanner-m.svg";
 export { ReactComponent as ShapesCompIcon } from "./v2/shapes-m.svg";

client/packages/lowcoder-design/src/icons/v2/split-layout-l.svg

@@ -114,6 +114,7 @@ const childrenMap = {
     1: { view: {}, layout: {} },
   }),
   horizontalGridCells: SliderControl,
+  verticalGridCells: SliderControl,
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, true),
   useComponentWidth: withDefault(BoolControl, true),
@@ -139,7 +140,6 @@ const ColumnContainer = (props: ColumnContainerProps) => {
   return (
     <InnerGrid
       {...props}
-      emptyRows={15}
       hintPlaceholder={HintPlaceHolder}
       radius={props.style.radius}
       style={props.style}
@@ -259,6 +259,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
                     autoHeight={props.autoHeight}
                     horizontalGridCells={horizontalGridCells}
                     style={columnStyle}
+                    emptyRows={props.verticalGridCells}
                   />
                 </ColWrapper>
               );
@@ -304,6 +305,9 @@ export const ResponsiveLayoutBaseComp = (function () {
               {children.horizontalGridCells.propertyView({
                 label: trans('prop.horizontalGridCells'),
               })}
+              {children.verticalGridCells.propertyView({
+                label: trans('prop.verticalGridCells'),
+              })}
             </Section>
             <Section name={trans("responsiveLayout.rowLayout")}>
               {children.rowBreak.propertyView({

client/packages/lowcoder-design/src/icons/v2/split-layout-m.svg

@@ -678,8 +678,8 @@ const SplitColumnOption = new MultiCompBuilder(
 
 export const SplitColumnOptionControl = manualOptionsControl(SplitColumnOption, {
   initOptions: [
-    { id: 0, key: "Area1", label: "Area 1" },
-    { id: 1, key: "Area2", label: "Area 2" },
+    { id: 0, key: "Area1", label: "Area 1", minWidth: "10%", maxWidth: "90%",  width: "50%"},
+    { id: 1, key: "Area2", label: "Area 2", minWidth: "10%", maxWidth: "90%",  width: "50%", collapsible : true},
   ],
   uniqField: "key",
   autoIncField: "id",

client/packages/lowcoder-design/src/icons/v2/split-layout-s.svg

@@ -86,6 +86,7 @@ import {
   MentionCompIcon,
   AutoCompleteCompIcon,
   ResponsiveLayoutCompIcon,
+  SplitLayoutCompIcon,
   MermaidCompIcon,
   IconCompIcon,
   PageLayoutCompIcon,
@@ -470,12 +471,12 @@ export var uiCompMap: Registry = {
     },
   },
   splitLayout: {
-    name: trans("uiComp.responsiveLayoutCompName"),
+    name: trans("uiComp.splitLayoutCompName"),
     enName: "Split Layout",
-    description: trans("uiComp.responsiveLayoutCompDesc"),
+    description: trans("uiComp.splitLayoutCompDesc"),
     categories: ["layout"],
-    icon: ResponsiveLayoutCompIcon,
-    keywords: trans("uiComp.responsiveLayoutCompKeywords"),
+    icon: SplitLayoutCompIcon,
+    keywords: trans("uiComp.splitLayoutCompKeywords"),
     lazyLoad: true,
     compName: "SplitLayoutComp",
     compPath: "comps/splitLayout/index",

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

@@ -53,6 +53,7 @@ import {
   RangeSliderCompIconSmall,
   RatingCompIconSmall,
   ResponsiveLayoutCompIconSmall,
+  SplitLayoutCompIconSmall,
   RichTextEditorCompIconSmall,
   ScannerCompIconSmall,
   SegmentedCompIconSmall,
@@ -162,7 +163,7 @@ export const CompStateIcon: {
   rangeSlider: <RangeSliderCompIconSmall />,
   rating: <RatingCompIconSmall />,
   responsiveLayout: <ResponsiveLayoutCompIconSmall />,
-  splitLayout: <ResponsiveLayoutCompIconSmall />,
+  splitLayout: <SplitLayoutCompIconSmall />,
   richTextEditor: <RichTextEditorCompIconSmall />,
   scanner: <ScannerCompIconSmall />,
   segmentedControl: <SegmentedCompIconSmall />,