Icons and small improvements for SplitLayout

FalkWolsky · FalkWolsky · commit 34faa664c47d · 2025-02-09T01:32:53.000+01:00
diff --git a/client/packages/lowcoder-design/src/icons/index.tsx b/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";
diff --git a/client/packages/lowcoder-design/src/icons/v2/split-layout-l.svg b/client/packages/lowcoder-design/src/icons/v2/split-layout-l.svg
diff --git a/client/packages/lowcoder-design/src/icons/v2/split-layout-m.svg b/client/packages/lowcoder-design/src/icons/v2/split-layout-m.svg
@@ -0,0 +1,9 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44 9H34C32.3431 9 31 10.3431 31 12V36C31 37.6569 32.3431 39 34 39H44V41H34C31.2386 41 29 38.7614 29 36V12C29 9.23858 31.2386 7 34 7H44V9Z" fill="#B480DE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 9H14C15.6569 9 17 10.3431 17 12V36C17 37.6569 15.6569 39 14 39H4V41H14C16.7614 41 19 38.7614 19 36V12C19 9.23858 16.7614 7 14 7H4V9Z" fill="#B480DE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 6.5C24.8284 6.5 25.5 7.17157 25.5 8V40C25.5 40.8284 24.8284 41.5 24 41.5C23.1716 41.5 22.5 40.8284 22.5 40V8C22.5 7.17157 23.1716 6.5 24 6.5Z" fill="#B480DE"/>
+<path d="M40.4286 19L43.917 23.8838C43.9666 23.9533 43.9666 24.0467 43.917 24.1162L40.4286 29" stroke="#B480DE" stroke-width="2" stroke-linecap="round"/>
+<path d="M44 24H34" stroke="#B480DE" stroke-width="2" stroke-linecap="round"/>
+<path d="M7.57143 29L4.08303 24.1162C4.03336 24.0467 4.03336 23.9533 4.08303 23.8838L7.57143 19" stroke="#B480DE" stroke-width="2" stroke-linecap="round"/>
+<path d="M4 24H14" stroke="#B480DE" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/client/packages/lowcoder-design/src/icons/v2/split-layout-s.svg b/client/packages/lowcoder-design/src/icons/v2/split-layout-s.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 20H21.3H17C15.8954 20 15 19.1046 15 18V6C15 4.89543 15.8954 4 17 4H22" stroke="black"/>
+<path d="M2 20H2.7H7C8.10457 20 9 19.1046 9 18V6C9 4.89543 8.10457 4 7 4H2" stroke="black"/>
+<path d="M12 4V20" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M20.2143 9L21.917 11.3838C21.9666 11.4533 21.9666 11.5467 21.917 11.6162L20.2143 14" stroke="black" stroke-linecap="round"/>
+<path d="M22 11.5H17" stroke="black" stroke-linecap="round"/>
+<path d="M3.78571 14L2.08303 11.6162C2.03336 11.5467 2.03336 11.4533 2.08303 11.3838L3.78571 9" stroke="black" stroke-linecap="round"/>
+<path d="M2 11.5H7" stroke="black" stroke-linecap="round"/>
+</svg>
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -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({
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -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",
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
@@ -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",
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.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 />,
