PageLayout: Added Main Content Scrollbar

MenamAfzal · MenamAfzal · commit 64ee003b2c40 · 2024-09-23T22:59:16.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -142,7 +142,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
   }
 
   useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]);
-  
+
   return (
     <div style={{padding: style.margin, height: '100%'}}>
       <ConfigProvider
@@ -157,7 +157,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
           }}
         >
       <Wrapper $style={style} $animationStyle={animationStyle}>
-        <Layout style={{padding: "0px"}} hasSider={showSider && !container.innerSider}>
+        <Layout style={{padding: "0px", overflow: container.mainScrollbars ? "scroll" : "inherit"}} hasSider={showSider && !container.innerSider}>
           {showSider && !container.innerSider && !container.siderRight && (
             <><BackgroundColorContext.Provider value={siderStyle?.siderBackground}>
               <Sider 
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -53,6 +53,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   siderScrollbars: withDefault(BoolControl, false),
   contentScrollbars: withDefault(BoolControl, false),
+  mainScrollbars: withDefault(BoolControl, false),
   style: styleControl(ContainerStyle , 'style'),
   headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
   siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
@@ -157,7 +158,8 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
   heightPropertyView() {
     return [
       this.children.autoHeight.getPropertyView(),
-      this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar")}),
+      this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar") }),
+      (!this.children.autoHeight.getView()) && this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }),
       (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }),
     ];
   }
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -203,6 +203,7 @@ export const en = {
     "showVerticalScrollbar" : "Show Vertical Scrollbar",
     "showHorizontalScrollbar" : "Show Horizontal Scrollbar",
     "siderScrollbar" : "Show Scrollbars in Sider",
+    "mainScrollbar": "Show Scrollbars in main content",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",
diff --git a/translations/locales/en.js b/translations/locales/en.js
@@ -196,6 +196,7 @@ export const en = {
         "textOverflow": "Text Overflow",
         "scrollbar": "Show Scrollbars",
         "siderScrollbar": "Show Scrollbars in Sider",
+        "mainScrollbar": "Show Scrollbars in main content",
         "siderRight": "Show sider on the Right",
         "siderWidth": "Sider Width",
         "siderWidthTooltip": "Sider width supports percentages (%) and pixels (px).",
diff --git a/translations/locales/en.ts b/translations/locales/en.ts
@@ -201,6 +201,7 @@ export const en = {
     "textOverflow": "Text Overflow",
     "scrollbar": "Show Scrollbars",
     "siderScrollbar" : "Show Scrollbars in Sider",
+    "mainScrollbar": "Show Scrollbars in main content",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",
