From f23c3099da6d13ba2df63328f513d4a043615d19 Mon Sep 17 00:00:00 2001 From: Kamal Qureshi Date: Thu, 5 Jun 2025 01:46:17 +0500 Subject: [PATCH 1/2] Added hide toggle for columns in responsive layout --- .../src/comps/comps/responsiveLayout/responsiveLayout.tsx | 2 +- .../packages/lowcoder/src/comps/controls/optionsControl.tsx | 4 ++++ translations/locales/en.js | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index 0ce837560c..c9c8229ed4 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -234,7 +234,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { {columns.map((column) => { const id = String(column.id); const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); - if (!containers[id]) return null; + if (!containers[id] || column.hidden) return null; const containerProps = containers[id].children; // Use the actual minWidth from column configuration instead of calculated width diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx index e32c32c09f..4ddb7463d9 100644 --- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx @@ -588,6 +588,7 @@ const ColumnOption = new MultiCompBuilder( radius: withDefault(RadiusControl, ""), margin: withDefault(StringControl, ""), padding: withDefault(StringControl, ""), + hidden: withDefault(BoolControl, false), }, (props) => props ) @@ -624,6 +625,9 @@ const ColumnOption = new MultiCompBuilder( preInputNode: , placeholder: '3px', })} + {children.hidden.propertyView({ + label: trans('style.hideColumn'), + })} )) .build(); diff --git a/translations/locales/en.js b/translations/locales/en.js index 0628515d6b..5b69d23f0b 100644 --- a/translations/locales/en.js +++ b/translations/locales/en.js @@ -589,6 +589,7 @@ export const en = { "chartBorderColor": "Border Color", "chartTextColor": "Text Color", "detailSize": "Detail Size", + "hideColumn": "Hide Column", "radiusTip": "Specifies the radius of the element's corners. Example: 5px, 50%, or 1em.", "gapTip": "Specifies the gap between rows and columns in a grid or flex container. Example: 10px, 1rem, or 5%.", From f7ba1b83f2e00c60d2eca4ee3ade27cb27d28153 Mon Sep 17 00:00:00 2001 From: Kamal Qureshi Date: Fri, 6 Jun 2025 01:26:34 +0500 Subject: [PATCH 2/2] Updated Boolean toggle with Boolean Code Control --- .../packages/lowcoder/src/comps/controls/optionsControl.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx index 4ddb7463d9..9e927331d2 100644 --- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx @@ -30,6 +30,7 @@ import { Option, WidthIcon, ImageCompIcon, + CloseEyeIcon, } from "lowcoder-design"; import styled from "styled-components"; import { lastValueIfEqual } from "util/objectUtils"; @@ -588,7 +589,7 @@ const ColumnOption = new MultiCompBuilder( radius: withDefault(RadiusControl, ""), margin: withDefault(StringControl, ""), padding: withDefault(StringControl, ""), - hidden: withDefault(BoolControl, false), + hidden: withDefault(BoolCodeControl, false), }, (props) => props ) @@ -627,6 +628,7 @@ const ColumnOption = new MultiCompBuilder( })} {children.hidden.propertyView({ label: trans('style.hideColumn'), + preInputNode: })} ))