From 64ee003b2c403e0a36d0cde526bb85eded79143b Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Mon, 23 Sep 2024 22:18:03 +0500 Subject: [PATCH 01/22] PageLayout: Added Main Content Scrollbar --- .../lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx | 4 ++-- .../src/comps/comps/pageLayoutComp/pageLayoutComp.tsx | 4 +++- client/packages/lowcoder/src/i18n/locales/en.ts | 1 + translations/locales/en.js | 1 + translations/locales/en.ts | 1 + 5 files changed, 8 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index b501e3cab..15fad9f07 100644 --- 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 (
- + {showSider && !container.innerSider && !container.siderRight && ( <> Date: Mon, 23 Sep 2024 23:33:34 +0500 Subject: [PATCH 02/22] ResponsiveLayout: Added Main Content Scrollbar --- .../comps/comps/responsiveLayout/responsiveLayout.tsx | 10 +++++++++- 1 file changed, 9 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 d52054f17..f9afdb0cf 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -18,7 +18,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { NameGenerator } from "comps/utils"; -import { Section, controlItem, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; import React, { useEffect } from "react"; @@ -95,6 +95,7 @@ const childrenMap = { matchColumnsHeight: withDefault(BoolControl, true), style: styleControl(ResponsiveLayoutRowStyle , 'style'), columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'), + mainScrollbar: withDefault(BoolControl, false), animationStyle:styleControl(AnimationStyle , 'animationStyle'), columnPerRowLG: withDefault(NumberControl, 4), columnPerRowMD: withDefault(NumberControl, 2), @@ -138,12 +139,15 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { horizontalSpacing, animationStyle, horizontalGridCells, + mainScrollbar, + autoHeight } = props; return (
+ { }) } +
@@ -214,6 +219,9 @@ export const ResponsiveLayoutBaseComp = (function () { <>
{children.autoHeight.getPropertyView()} + {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({ + label: trans("prop.mainScrollbar") + })} {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} From ac9cb311ae0923679a2d37feae4cdbd477aa9c53 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Tue, 24 Sep 2024 00:07:48 +0500 Subject: [PATCH 03/22] ColumnLayout: Added Main Content Scrollbar --- .../comps/comps/columnLayout/columnLayout.tsx | 85 ++++++++++--------- .../comps/comps/pageLayoutComp/pageLayout.tsx | 2 +- 2 files changed, 48 insertions(+), 39 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx index a271f3972..df3fe5011 100644 --- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx @@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { NameGenerator } from "comps/utils"; -import { Section, controlItem, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; import styled from "styled-components"; @@ -96,6 +96,7 @@ const childrenMap = { templateRows: withDefault(StringControl, "1fr"), rowGap: withDefault(StringControl, "20px"), templateColumns: withDefault(StringControl, "1fr 1fr"), + mainScrollbar: withDefault(BoolControl, false), columnGap: withDefault(StringControl, "20px"), style: styleControl(ContainerStyle, 'style'), columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle') @@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => { columnGap, columnStyle, horizontalGridCells, + mainScrollbar } = props; return ( - - {columns.map(column => { - const id = String(column.id); - const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); - if(!containers[id]) return null - const containerProps = containers[id].children; - const noOfColumns = columns.length; - return ( - - - - - - ) - }) - } - +
+ + + {columns.map(column => { + const id = String(column.id); + const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id); + if(!containers[id]) return null + const containerProps = containers[id].children; + const noOfColumns = columns.length; + return ( + + + + + + ) + }) + } + + +
); @@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () { <>
{children.autoHeight.getPropertyView()} + {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({ + label: trans("prop.mainScrollbar") + })} {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index 15fad9f07..e618adf6e 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -157,7 +157,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi }} > - + {showSider && !container.innerSider && !container.siderRight && ( <> Date: Tue, 24 Sep 2024 14:48:30 +0500 Subject: [PATCH 04/22] added heightControl & scroll toggleBar in JSONSCHEMAFORM --- .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 39 +++++++++++++++++-- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index a8ddfc99d..298d34970 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -14,15 +14,15 @@ import { i18nObjs, trans } from "i18n"; import type { JSONSchema7 } from "json-schema"; import styled from "styled-components"; import { toBoolean, toNumber, toString } from "util/convertUtils"; -import { Section, sectionNames } from "lowcoder-design"; +import { Section, sectionNames, ScrollBar } from "lowcoder-design"; import { jsonObjectControl } from "../../controls/codeControl"; import { eventHandlerControl, submitEvent } from "../../controls/eventHandlerControl"; -import { UICompBuilder } from "../../generators"; +import { UICompBuilder, withDefault } from "../../generators"; import DateWidget from "./dateWidget"; import ErrorBoundary from "./errorBoundary"; import { Theme } from "@rjsf/antd"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; - +import { AutoHeightControl } from "../../controls/autoHeightControl"; import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; @@ -49,6 +49,11 @@ const Container = styled.div<{ font-size: 18px; } + .ant-row { + margin-left: 0 !important; + margin-right: 0 !important; + } + #root-description { font-size: 12px; display: inline-block; @@ -188,7 +193,9 @@ let FormBasicComp = (function () { const childrenMap = { resetAfterSubmit: BoolControl, schema: jsonObjectControl(i18nObjs.jsonForm.defaultSchema), + showVerticalScrollbar: withDefault(BoolControl, false), uiSchema: jsonObjectControl(i18nObjs.jsonForm.defaultUiSchema), + autoHeight: AutoHeightControl, data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData), onEvent: eventHandlerControl(EventOptions), style: styleControl(JsonSchemaFormStyle , 'style'), @@ -202,6 +209,15 @@ let FormBasicComp = (function () { return ( +
+ ); }) @@ -325,9 +342,16 @@ let FormBasicComp = (function () { })}
)} - {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> +
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} +
{children.style.getPropertyView()}
@@ -343,6 +367,13 @@ let FormBasicComp = (function () { .build(); })(); +FormBasicComp = class extends FormBasicComp { + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } +}; + + let FormTmpComp = withExposingConfigs(FormBasicComp, [ depsConfig({ name: "data", From 9973b1ece1008ceb53a3d1392ad5305b0ce0ab9a Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 19:57:58 +0500 Subject: [PATCH 05/22] Modal: Added Main Content Scrollbar --- .../lowcoder/src/comps/hooks/modalComp.tsx | 16 ++++++++++++---- client/packages/lowcoder/src/i18n/locales/en.ts | 1 + translations/locales/en.js | 1 + translations/locales/en.ts | 1 + 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx index 0d7ea6be8..ed2710ed5 100644 --- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx @@ -29,7 +29,7 @@ const EventOptions = [ { label: trans("modalComp.close"), value: "close", description: trans("modalComp.closeDesc") }, ] as const; -const getStyle = (style: ModalStyleType) => { +const getStyle = (style: ModalStyleType, modalScrollbar: boolean) => { return css` .ant-modal-content { border-radius: ${style.radius}; @@ -49,6 +49,9 @@ const getStyle = (style: ModalStyleType) => { background-color: ${style.background}; } } + div.ant-modal-body div.react-grid-layout::-webkit-scrollbar { + display: ${modalScrollbar ? "block" : "none"}; + } .ant-modal-close { inset-inline-end: 10px !important; top: 10px; @@ -80,8 +83,8 @@ function extractMarginValues(style: ModalStyleType) { return valuesarray; } -const ModalStyled = styled.div<{ $style: ModalStyleType }>` - ${(props) => props.$style && getStyle(props.$style)} +const ModalStyled = styled.div<{ $style: ModalStyleType, $modalScrollbar: boolean }>` + ${(props) => props.$style && getStyle(props.$style, props.$modalScrollbar)} `; const ModalWrapper = styled.div` @@ -105,6 +108,7 @@ let TmpModalComp = (function () { autoHeight: AutoHeightControl, title: StringControl, titleAlign: HorizontalAlignmentControl, + modalScrollbar: withDefault(BoolControl, false), style: styleControl(ModalStyle), maskClosable: withDefault(BoolControl, true), showMask: withDefault(BoolControl, true), @@ -174,7 +178,7 @@ let TmpModalComp = (function () { if (open) props.onEvent("open"); }} zIndex={Layers.modal} - modalRender={(node) => {node}} + modalRender={(node) => {node}} mask={props.showMask} className={props.className as string} data-testid={props.dataTestId as string} @@ -203,6 +207,10 @@ let TmpModalComp = (function () { label: trans('prop.horizontalGridCells'), })} {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.modalScrollbar.propertyView({ + label: trans("prop.modalScrollbar") + })} {!children.autoHeight.getView() && children.height.propertyView({ label: trans("modalComp.modalHeight"), diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 21e73d006..a45d28bbd 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -204,6 +204,7 @@ export const en = { "showHorizontalScrollbar" : "Show Horizontal Scrollbar", "siderScrollbar" : "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", "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 index 791b6f886..a98904e37 100644 --- a/translations/locales/en.js +++ b/translations/locales/en.js @@ -197,6 +197,7 @@ export const en = { "scrollbar": "Show Scrollbars", "siderScrollbar": "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", "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 index cd1cd85d3..03a47be6c 100644 --- a/translations/locales/en.ts +++ b/translations/locales/en.ts @@ -202,6 +202,7 @@ export const en = { "scrollbar": "Show Scrollbars", "siderScrollbar" : "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", + "modalScrollbar": "Show Scrollbars in Modal", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).", From 9279376f9d7bc31d37fb385601efcc299411579a Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 20:11:05 +0500 Subject: [PATCH 06/22] Drawer: Added Main Content Scrollbar --- client/packages/lowcoder/src/comps/hooks/drawerComp.tsx | 8 +++++++- client/packages/lowcoder/src/i18n/locales/en.ts | 1 + translations/locales/en.js | 1 + translations/locales/en.ts | 1 + 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx index 8270d23e7..43fa3e5b7 100644 --- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx @@ -41,11 +41,14 @@ const DrawerWrapper = styled.div` } `; -const StyledDrawer = styled(Drawer)<{$titleAlign?: string}>` +const StyledDrawer = styled(Drawer)<{$titleAlign?: string, $drawerScrollbar: boolean}>` .ant-drawer-header-title { margin: 0px 20px !important; text-align: ${(props) => props.$titleAlign || "center"}; } + div.ant-drawer-body div.react-grid-layout::-webkit-scrollbar { + display: ${(props) => props.$drawerScrollbar ? "block" : "none"}; + } `; const ButtonStyle = styled(Button)<{$closePosition?: string, $title? :string}>` @@ -93,6 +96,7 @@ let TmpDrawerComp = (function () { titleAlign: HorizontalAlignmentControl, horizontalGridCells: SliderControl, autoHeight: AutoHeightControl, + drawerScrollbar: withDefault(BoolControl, true), style: styleControl(DrawerStyle), placement: PositionControl, closePosition: withDefault(LeftRightControl, "left"), @@ -137,6 +141,7 @@ let TmpDrawerComp = (function () { }} title={props.title} $titleAlign={props.titleAlign} + $drawerScrollbar={props.drawerScrollbar} closable={false} placement={props.placement} open={props.visible.value} @@ -209,6 +214,7 @@ let TmpDrawerComp = (function () { {children.horizontalGridCells.propertyView({ label: trans('prop.horizontalGridCells'), })} + {children.drawerScrollbar.propertyView({ label: trans("prop.drawerScrollbar") })} {children.maskClosable.propertyView({ label: trans("prop.maskClosable"), })} diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index a45d28bbd..5d8b979a0 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -205,6 +205,7 @@ export const en = { "siderScrollbar" : "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", "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 index a98904e37..3940e3a27 100644 --- a/translations/locales/en.js +++ b/translations/locales/en.js @@ -198,6 +198,7 @@ export const en = { "siderScrollbar": "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", "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 index 03a47be6c..778c21b3c 100644 --- a/translations/locales/en.ts +++ b/translations/locales/en.ts @@ -203,6 +203,7 @@ export const en = { "siderScrollbar" : "Show Scrollbars in Sider", "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", + "drawerScrollbar": "Show Scrollbars in Drawer", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).", From ac126e61e14606c7d882914a635d41ffe678a962 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 20:21:28 +0500 Subject: [PATCH 07/22] added height control in fileViewer --- .../lowcoder/src/comps/comps/fileViewerComp.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index cb0c689bc..0b9cf8af4 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -6,11 +6,11 @@ import { DocumentViewer } from "react-documents"; import styled, { css } from "styled-components"; import { Section, sectionNames } from "lowcoder-design"; import { StringControl } from "../controls/codeControl"; -import { UICompBuilder } from "../generators"; +import { UICompBuilder, withDefault } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; - +import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -67,6 +67,8 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an let FileViewerBasicComp = (function () { const childrenMap = { src: StringControl, + autoHeight: withDefault(AutoHeightControl,'auto'), + showVerticalScrollbar: withDefault(BoolControl, false), style: styleControl(FileViewerStyle , 'style'), animationStyle: styleControl(AnimationStyle , 'animationStyle'), }; @@ -100,6 +102,14 @@ let FileViewerBasicComp = (function () { {hiddenPropertyView(children)}
)} +
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} +
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <> @@ -119,7 +129,7 @@ let FileViewerBasicComp = (function () { FileViewerBasicComp = class extends FileViewerBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; From d529033f8ded8286785c40a0432325cb261f2e9b Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 20:57:11 +0500 Subject: [PATCH 08/22] FloatTextContainer: Added Main Content Scrollbar --- .../triFloatTextContainer.tsx | 78 +++++++++---------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 096757b34..ee1fa3248 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -7,7 +7,7 @@ import { } from "comps/controls/styleControlConstants"; import { EditorContext } from "comps/editorState"; import { BackgroundColorContext } from "comps/utils/backgroundColorContext"; -import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design"; +import { HintPlaceHolder, ScrollBar, TacoMarkDown } from "lowcoder-design"; import { ReactNode, useContext } from "react"; import styled, { css } from "styled-components"; import { checkIsMobile } from "util/commonUtils"; @@ -76,6 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle} display: flex; flex-flow: column; height: 100%; + overflow-y: scroll; border: ${(props) => props.$style.borderWidth} ${(props) => (props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border}; border-radius: ${(props) => props.$style.radius}; background-color: ${(props) => props.$style.background}; @@ -194,45 +195,42 @@ export function TriContainer(props: TriContainerProps) { )} {showBody && ( -
- - -

- {props.type === "markdown" ? ( - {text.value} - ) : ( - text.value - )} -

- -
+ +
+ + +

+ {props.type === "markdown" ? ( + {text.value} + ) : ( + text.value + )} +

+ +
+ )} {showFooter && ( From 54581e368d9326c997ee72cb787ce2271dee5469 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 21:08:27 +0500 Subject: [PATCH 09/22] TextDisplay: Added Main Content Scrollbar --- .../packages/lowcoder/src/comps/comps/textComp.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index ec3acbd9c..e8a695164 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -1,7 +1,7 @@ import { dropdownControl } from "comps/controls/dropdownControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import styled, { css } from "styled-components"; import { AlignCenter } from "lowcoder-design"; import { AlignLeft } from "lowcoder-design"; @@ -24,6 +24,7 @@ import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl import { NewChildren } from "../generators/uiCompBuilder"; import { RecordConstructorToComp } from "lowcoder-core"; import { ToViewReturn } from "../generators/multi"; +import { BoolControl } from "@lowcoder-ee/index.sdk"; const EventOptions = [clickEvent] as const; @@ -142,6 +143,7 @@ const childrenMap = { autoHeight: AutoHeightControl, type: dropdownControl(typeOptions, "markdown"), horizontalAlignment: alignWithJustifyControl(), + contentScrollBar: withDefault(BoolControl, true), verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"), style: styleControl(TextStyle, 'style'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), @@ -176,6 +178,10 @@ const TextPropertyView = React.memo((props: { <>
{props.children.autoHeight.getPropertyView()} + {!props.children.autoHeight.getView() && + props.children.contentScrollBar.propertyView({ + label: trans("prop.contentScrollbar"), + })} {!props.children.autoHeight.getView() && props.children.verticalAlignment.propertyView({ label: trans("textShow.verticalAlignment"), @@ -214,7 +220,9 @@ const TextView = React.memo((props: ToViewReturn) => { }} onClick={() => props.onEvent("click")} > - {props.type === "markdown" ? {value} : value} + + {props.type === "markdown" ? {value} : value} + ); }, (prev, next) => JSON.stringify(prev) === JSON.stringify(next)); From c3f5b1cb9a71ca1c5cab8cb303499a65b13bdd3f Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Tue, 24 Sep 2024 22:25:26 +0500 Subject: [PATCH 10/22] RichTextEditor: Added Main Content Scrollbar --- .../src/comps/comps/richTextEditorComp.tsx | 18 +++++++++++++++--- .../comps/comps/textInputComp/textAreaComp.tsx | 5 +++++ .../packages/lowcoder/src/i18n/locales/en.ts | 1 + translations/locales/en.js | 1 + translations/locales/en.ts | 1 + 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index b39c3879c..c0f25aad2 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -79,9 +79,13 @@ const localizeStyle = css` } `; -const commonStyle = (style: RichTextEditorStyleType) => css` +const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean) => css` height: 100%; + .ql-editor::-webkit-scrollbar { + display: ${contentScrollBar ? "block" : "none"}; + } + & .ql-editor { min-height: 85px; } @@ -126,11 +130,12 @@ const hideToolbarStyle = (style: RichTextEditorStyleType) => css` interface Props { $hideToolbar: boolean; $style: RichTextEditorStyleType; + $contentScrollBar: boolean; } const AutoHeightReactQuill = styled.div` ${localizeStyle} - ${(props) => commonStyle(props.$style)} + ${(props) => commonStyle(props.$style, props.$contentScrollBar)} & .ql-container .ql-editor { min-height: 125px; } @@ -139,7 +144,7 @@ const AutoHeightReactQuill = styled.div` const FixHeightReactQuill = styled.div` ${localizeStyle} - ${(props) => commonStyle(props.$style)} + ${(props) => commonStyle(props.$style, props.$contentScrollBar)} & .quill { display: flex; flex-direction: column; @@ -169,6 +174,7 @@ const childrenMap = { hideToolbar: BoolControl, readOnly: BoolControl, autoHeight: withDefault(AutoHeightControl, "fixed"), + contentScrollBar: withDefault(BoolControl, false), placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")), toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)), onEvent: ChangeEventHandlerControl, @@ -188,6 +194,7 @@ interface IProps { autoHeight: boolean; onChange: (value: string) => void; $style: RichTextEditorStyleType; + contentScrollBar: boolean; } const ReactQuillEditor = React.lazy(() => import("react-quill")); @@ -264,6 +271,7 @@ function RichTextEditor(props: IProps) { ref={wrapperRef} $hideToolbar={props.hideToolbar} $style={props.$style} + $contentScrollBar={props.contentScrollBar} > }> { placeholder={props.placeholder} onChange={handleChange} $style={props.style} + contentScrollBar={props.contentScrollBar} /> ); }) @@ -325,6 +334,9 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { <>
{children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && children.contentScrollBar.propertyView({ + label: trans("prop.textAreaScrollBar"), + })} {children.toolbar.propertyView({ label: trans("richTextEditor.toolbar"), tooltip: trans("richTextEditor.toolbarDescription") })} {children.hideToolbar.propertyView({ label: trans("richTextEditor.hideToolbar") })}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx index 4b34ba614..2a559dee3 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx @@ -75,6 +75,7 @@ let TextAreaTmpComp = (function () { autoHeight: withDefault(AutoHeightControl, "fixed"), style: styleControl(InputFieldStyle, 'style') , labelStyle: styleControl(LabelStyle ,'labelStyle' ), + textAreaScrollBar: withDefault(BoolControl, false), inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'), animationStyle: styleControl(AnimationStyle, 'animationStyle') }; @@ -114,6 +115,10 @@ let TextAreaTmpComp = (function () { <>
{children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.textAreaScrollBar.propertyView({ + label: trans("prop.textAreaScrollBar"), + })} {hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 5d8b979a0..03cedc4e6 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -206,6 +206,7 @@ export const en = { "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "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 index 3940e3a27..aafb078ed 100644 --- a/translations/locales/en.js +++ b/translations/locales/en.js @@ -199,6 +199,7 @@ export const en = { "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "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 index 778c21b3c..75c7036bb 100644 --- a/translations/locales/en.ts +++ b/translations/locales/en.ts @@ -204,6 +204,7 @@ export const en = { "mainScrollbar": "Show Scrollbars in main content", "modalScrollbar": "Show Scrollbars in Modal", "drawerScrollbar": "Show Scrollbars in Drawer", + "textAreaScrollBar": "Show Scrollbars in Text Area", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).", From 8a56c372a4c025b38280ae93e81037ae68bda749 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 25 Sep 2024 13:52:39 +0500 Subject: [PATCH 11/22] fileViewer: fixing scrollbar funxtionality --- .../lowcoder/src/comps/comps/fileViewerComp.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index 0b9cf8af4..4b53dea3a 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -42,12 +42,18 @@ const StyledDiv = styled.div<{$style: FileViewerStyleType;}>` ${(props) => props.$style && getStyle(props.$style)} `; -const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => { +const DraggableFileViewer = (props: { + src: string; + style: FileViewerStyleType, + animationStyle:AnimationStyleType, + showVerticalScrollbar: boolean, +}) => { const [isActive, setActive] = useState(false); return ( setActive(true)} onMouseLeave={(e) => setActive(false)} > @@ -83,7 +89,12 @@ let FileViewerBasicComp = (function () { ); } - return ; + return ; }) .setPropertyViewFn((children) => { return ( From ed5596ccce448164fc68b70a7dc448cbb0d96a3e Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 25 Sep 2024 20:33:36 +0500 Subject: [PATCH 12/22] scrollBar toggle in calendar --- .../lowcoder-comps/src/comps/calendarComp/calendarComp.tsx | 6 ++++++ .../src/comps/calendarComp/calendarConstants.tsx | 4 ++++ client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts | 3 ++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx index 9a24ef242..f0c05f1d5 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx @@ -96,6 +96,7 @@ let childrenMap: any = { currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"), currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"), animationStyle: styleControl(AnimationStyle, 'animationStyle'), + showVerticalScrollbar: withDefault(BoolControl, false), }; // this should ensure backwards compatibility with older versions of the SDK if (DragEventHandlerControl) { @@ -134,6 +135,7 @@ let CalendarBasicComp = (function () { currentPremiumView?: string; animationStyle?:any; modalStyle?:any + showVerticalScrollbar?:boolean }, dispatch: any) => { @@ -261,6 +263,7 @@ let CalendarBasicComp = (function () { licenseKey, resourceName, modalStyle, + showVerticalScrollbar } = props; function renderEventContent(eventInfo: EventContentArg) { @@ -626,6 +629,7 @@ let CalendarBasicComp = (function () { $editable={editable} $style={style} $theme={theme?.theme} + $showVerticalScrollbar={showVerticalScrollbar} onDoubleClick={handleDbClick} $left={left} key={initialDate ? currentView + initialDate : currentView} @@ -756,6 +760,7 @@ let CalendarBasicComp = (function () { animationStyle: { getPropertyView: () => any; }; modalStyle: { getPropertyView: () => any; }; licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; }; + showVerticalScrollbar: { propertyView: (arg0: { label: string; }) => any; }; }) => { const license = children.licenseKey.getView(); @@ -796,6 +801,7 @@ let CalendarBasicComp = (function () { ? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), }) : children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })} {children.firstDay.propertyView({ label: trans("calendar.startWeek"), })} + {children.showVerticalScrollbar.propertyView({ label: trans("calendar.showVerticalScrollbar")})}
{children.style.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx index 0b84dba58..09d97f7b4 100644 --- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx @@ -32,6 +32,7 @@ export const Wrapper = styled.div<{ $style?: CalendarStyleType; $theme?: ThemeDetail; $left?: number; + $showVerticalScrollbar?:boolean; }>` position: relative; height: 100%; @@ -359,6 +360,9 @@ export const Wrapper = styled.div<{ .fc .fc-scrollgrid table { width: 100% !important; } + .fc-scroller.fc-scroller-liquid-absolute::-webkit-scrollbar { + display:${(props) => (props.$showVerticalScrollbar ? 'block' : 'none')}; + } // event .fc-timegrid-event .fc-event-main { diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index c421bb60e..c04cbce84 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -341,7 +341,8 @@ export const en = { animationType:"Type", animationDelay:"Delay", animationDuration:"Duration", - animationIterationCount:"IterationCount" + animationIterationCount:"IterationCount", + showVerticalScrollbar:"Show Vertical ScrollBar" }, }; From 5bd097cd58c9ca397c12b340bb91935eec99799e Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 25 Sep 2024 20:38:42 +0500 Subject: [PATCH 13/22] Timeline: Added autoHeight component and a vertical scrollbar --- .../comps/comps/timelineComp/timelineComp.tsx | 63 +++++++++++-------- 1 file changed, 36 insertions(+), 27 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index f7c877c90..5854058af 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -8,7 +8,7 @@ import { } from "lowcoder-core"; import { trans } from "i18n"; import { UICompBuilder, withDefault } from "../../generators"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { hiddenPropertyView } from "comps/utils/propertyUtils"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; @@ -62,6 +62,8 @@ const childrenMap = { value: jsonControl(convertTimeLineData, timelineDate), mode: dropdownControl(modeOptions, "alternate"), reverse: BoolControl, + autoHeight: AutoHeightControl, + verticalScrollbar: withDefault(BoolControl, false), pending: withDefault(StringControl, trans("timeLine.defaultPending")), onEvent: eventHandlerControl(EventOptions), style: styleControl(TimeLineStyle, 'style'), @@ -136,31 +138,33 @@ const TimelineComp = ( })); return ( -
- - {props?.pending || ""} - - ) - } - items={timelineItems} - /> -
+ +
+ + {props?.pending || ""} + + ) + } + items={timelineItems} + /> +
+ ); }; @@ -187,6 +191,11 @@ let TimeLineBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( <>
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.verticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar") + })} {children.mode.propertyView({ label: trans("timeLine.mode"), tooltip: trans("timeLine.modeTooltip"), @@ -211,7 +220,7 @@ let TimeLineBasicComp = (function () { TimeLineBasicComp = class extends TimeLineBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; From 0d15cc7e10fb882fa75196f88bddf2fe2d7c1582 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 25 Sep 2024 21:33:28 +0500 Subject: [PATCH 14/22] TreeComponent: Added autoHeight component and a vertical scrollbar --- .../src/comps/comps/treeComp/treeComp.tsx | 117 ++++++++---------- 1 file changed, 53 insertions(+), 64 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index b6ebf264c..aa117ff5c 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -1,11 +1,10 @@ import { RecordConstructorToView } from "lowcoder-core"; import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { withExposingConfigs } from "comps/generators/withExposing"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { default as Tree } from "antd/es/tree"; import { useEffect, useState } from "react"; import styled from "styled-components"; -import ReactResizeDetector from "react-resize-detector"; import { StyleConfigType, styleControl } from "comps/controls/styleControl"; import { InputFieldStyle, LabelStyle, TreeStyle } from "comps/controls/styleControlConstants"; import { LabelControl } from "comps/controls/labelControl"; @@ -13,8 +12,6 @@ import { withDefault } from "comps/generators"; import { dropdownControl } from "comps/controls/dropdownControl"; import { BoolControl } from "comps/controls/boolControl"; import { - advancedSection, - expandSection, formSection, // intersectSection, treeCommonChildren, @@ -24,8 +21,6 @@ import { valuePropertyView, } from "./treeUtils"; import { - SelectInputInvalidConfig, - SelectInputValidationChildren, SelectInputValidationSection, } from "../selectInputComp/selectInputConstants"; import { selectInputValidate } from "../selectInputComp/selectInputConstants"; @@ -33,10 +28,11 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; type TreeStyleType = StyleConfigType; -const Container = styled.div` +const Container = styled.div` height: 100%; padding: 4px; background: ${(props) => props.background}; @@ -45,18 +41,8 @@ const Container = styled.div` .ant-tree-show-line .ant-tree-switcher { background: ${(props) => props.background}; } - .ant-tree:hover .ant-tree-list-scrollbar-show { - display: block !important; - } - .ant-tree-list-scrollbar { - width: 6px !important; - } - .ant-tree-list-scrollbar-thumb { - border-radius: 9999px !important; - background: rgba(139, 143, 163, 0.2) !important; - } - .ant-tree-list-scrollbar-thumb:hover { - background: rgba(139, 143, 163, 0.5) !important; + .simplebar-vertical { + display: ${(props) => props.verticalScrollbar ? 'block' : 'none'}; } `; @@ -74,6 +60,8 @@ const childrenMap = { checkStrictly: BoolControl, autoExpandParent: BoolControl, label: withDefault(LabelControl, { position: "column" }), + autoHeight: AutoHeightControl, + verticalScrollbar: withDefault(BoolControl, false), // TODO: more event onEvent: SelectEventHandlerControl, style: styleControl(InputFieldStyle , 'style'), @@ -101,50 +89,46 @@ const TreeCompView = (props: RecordConstructorToView) => { labelStyle, inputFieldStyle:props.inputFieldStyle, children: ( - setHeight(h)} - render={() => ( - - { - value.onChange(keys as (string | number)[]); - props.onEvent("change"); - }} - onCheck={(keys) => { - value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]); - props.onEvent("change"); - }} - onExpand={(keys) => { - expanded.onChange(keys as (string | number)[]); - }} - onFocus={() => props.onEvent("focus")} - onBlur={() => props.onEvent("blur")} - /> - - )} - > - + + + { + value.onChange(keys as (string | number)[]); + props.onEvent("change"); + }} + onCheck={(keys) => { + value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]); + props.onEvent("change"); + }} + onExpand={(keys) => { + expanded.onChange(keys as (string | number)[]); + }} + onFocus={() => props.onEvent("focus")} + onBlur={() => props.onEvent("blur")} + /> + + ), }); }; @@ -179,6 +163,11 @@ let TreeBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && + children.verticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar") + })} {children.expanded.propertyView({ label: trans("tree.expanded") })} {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })} {children.showLine.propertyView({ label: trans("tree.showLine") })} @@ -202,7 +191,7 @@ let TreeBasicComp = (function () { TreeBasicComp = class extends TreeBasicComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; From 0a7dfb8094d4f9b8dd06680a1da8db905d0db696 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 00:02:28 +0500 Subject: [PATCH 15/22] responsive layout edited --- .../comps/responsiveLayout/responsiveLayout.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx index f9afdb0cf..c51ffb073 100644 --- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx @@ -18,7 +18,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { NameGenerator } from "comps/utils"; -import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design"; +import { Section, controlItem, sectionNames } from "lowcoder-design"; import { HintPlaceHolder } from "lowcoder-design"; import _ from "lodash"; import React, { useEffect } from "react"; @@ -47,6 +47,7 @@ import SliderControl from "@lowcoder-ee/comps/controls/sliderControl"; const RowWrapper = styled(Row)<{ $style: ResponsiveLayoutRowStyleType; $animationStyle: AnimationStyleType; + $showScrollbar:boolean }>` ${(props) => props.$animationStyle} height: 100%; @@ -56,8 +57,12 @@ const RowWrapper = styled(Row)<{ border-style: ${(props) => props.$style?.borderStyle}; padding: ${(props) => props.$style.padding}; background-color: ${(props) => props.$style.background}; - overflow-x: auto; rotate: ${props=> props.$style.rotation} + overflow: ${(props) => (props.$showScrollbar ? 'auto' : 'hidden')}; + ::-webkit-scrollbar { + display: ${(props) => (props.$showScrollbar ? 'block' : 'none')}; + } + `; const ColWrapper = styled(Col)<{ @@ -147,10 +152,10 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
- @@ -185,7 +190,6 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => { }) } -
From d57085ec6a1668b06cff08ff55b540797705dd94 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 01:33:24 +0500 Subject: [PATCH 16/22] stepControl fixed --- .../comps/selectInputComp/stepControl.tsx | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index f06e5a231..53e2d7ede 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -10,7 +10,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { selectDivRefMethods, } from "./selectInputConstants"; -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { hasIcon } from "comps/utils"; @@ -18,6 +18,7 @@ import { RefControl } from "comps/controls/refControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { useContext, useState, useEffect } from "react"; import { EditorContext } from "comps/editorState"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; const sizeOptions = [ { @@ -76,6 +77,7 @@ const statusOptions = [ ] const StepsChildrenMap = { + autoHeight: AutoHeightControl, initialValue: numberExposingStateControl("1"), value: stringExposingStateControl("value"), stepStatus : stringExposingStateControl("process"), @@ -92,13 +94,16 @@ const StepsChildrenMap = { options: StepOptionControl, style: styleControl(StepsStyle , 'style'), viewRef: RefControl, - animationStyle: styleControl(AnimationStyle ,'animationStyle' ) + animationStyle: styleControl(AnimationStyle ,'animationStyle' ), + showVerticalScrollbar: withDefault(BoolControl, false), }; let StepControlBasicComp = (function () { return new UICompBuilder(StepsChildrenMap, (props) => { const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} + height: 100%; + overflow-y: scroll; min-height: 24px; max-width: ${widthCalculator(props.style.margin)}; max-height: ${heightCalculator(props.style.margin)}; @@ -168,6 +173,14 @@ let StepControlBasicComp = (function () { }} > + ))} + ); @@ -217,6 +231,12 @@ let StepControlBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} {children.size.propertyView({ label: trans("step.size"), radioButton: true, @@ -260,6 +280,12 @@ let StepControlBasicComp = (function () { .build(); })(); +StepControlBasicComp = class extends StepControlBasicComp { + override autoHeight(): boolean { + return this.children.autoHeight.getView(); + } +}; + export const StepComp = withExposingConfigs(StepControlBasicComp, [ new NameConfig("value", trans("step.valueDesc")), new NameConfig("stepStatus", trans("step.status") ), From 31e93947f9193187d9da40022aa64f5a0fc4760e Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 11:34:43 +0500 Subject: [PATCH 17/22] Dropdown: Added scrollbar --- .../lowcoder-design/src/components/Dropdown.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx index adc5465d9..c20733c0f 100644 --- a/client/packages/lowcoder-design/src/components/Dropdown.tsx +++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx @@ -6,6 +6,7 @@ import { ReactNode } from "react"; import styled from "styled-components"; import { CustomSelect } from "./customSelect"; import { EllipsisTextCss } from "./Label"; +import { useEffect } from "react"; import { TacoMarkDown } from "./markdown"; import { Tooltip, ToolTipLabel } from "./toolTip"; @@ -157,6 +158,19 @@ interface DropdownProps extends Omit(props: DropdownProps) { const { placement = "right" } = props; const valueInfoMap = _.fromPairs(props.options.map((option) => [option.value, option])); + + useEffect(() => { + const dropdownElems = document.querySelectorAll("div.ant-dropdown ul.ant-dropdown-menu"); + for (let index = 0; index < dropdownElems.length; index++) { + const element = dropdownElems[index]; + console.log(element); + element.style.maxHeight = "300px"; + element.style.overflowY = "scroll"; + element.style.minWidth = "150px"; + element.style.paddingRight = "10px"; + } + }, []); + return ( {props.label && ( From 168efdb1e955c28109bf59ab88bbcf5c13e4f48a Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 12:20:57 +0500 Subject: [PATCH 18/22] PageLayout: Fixed main content scrollbar --- .../src/comps/comps/pageLayoutComp/pageLayout.tsx | 10 +++++++--- .../src/comps/comps/pageLayoutComp/pageLayoutComp.tsx | 6 +++++- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index e618adf6e..105164b0d 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -39,7 +39,7 @@ const getStyle = (style: ContainerStyleType) => { `; }; -const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType }>` +const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType, $mainScrollbars: boolean }>` display: flex; flex-flow: column; height: 100%; @@ -47,6 +47,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:Animatio border-radius: 4px; ${(props) => props.$style && getStyle(props.$style)} ${props=>props.$animationStyle} + + #pageLayout::-webkit-scrollbar { + display: ${(props) => props.$mainScrollbars ? "block" : "none"}; + } `; const HeaderInnerGrid = styled(InnerGrid)<{ @@ -156,8 +160,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi }, }} > - - + + {showSider && !container.innerSider && !container.siderRight && ( <> Date: Thu, 26 Sep 2024 12:25:47 +0500 Subject: [PATCH 19/22] PageLayout: Changed the placement of scrollbar controllers --- .../src/comps/comps/pageLayoutComp/pageLayoutComp.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index 4a6962fa4..2a921432f 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -159,12 +159,12 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer { return [ this.children.autoHeight.getPropertyView(), this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar") }), - (!this.children.autoHeight.getView()) && ( - !this.children.siderScrollbars.getView() || - !this.children.contentScrollbars.getView() - ) && - this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }), (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }), + (!this.children.autoHeight.getView()) && ( + !this.children.siderScrollbars.getView() || + !this.children.contentScrollbars.getView() + ) && + this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }), ]; } From b153e17f83b2a303d03b605e96b83a8686b9574c Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 18:46:58 +0500 Subject: [PATCH 20/22] minor tweak --- .../src/comps/comps/selectInputComp/stepControl.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 53e2d7ede..00e64b75c 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -232,11 +232,6 @@ let StepControlBasicComp = (function () { {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{children.autoHeight.getPropertyView()} - {!children.autoHeight.getView() && ( - children.showVerticalScrollbar.propertyView({ - label: trans("prop.showVerticalScrollbar"), - }) - )} {children.size.propertyView({ label: trans("step.size"), radioButton: true, @@ -261,6 +256,9 @@ let StepControlBasicComp = (function () { { children.displayType.getView() != "inline" && !children.showDots.getView() && ( children.showIcons.propertyView({label: trans("step.showIcons")} ))} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({label: trans("prop.showVerticalScrollbar")}) + )}
)} From a74271cf54267b63b0078efae5ce7f2c34d0234d Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 19:48:43 +0500 Subject: [PATCH 21/22] StepControl: Added min width and a horizontal scroll --- .../comps/selectInputComp/stepControl.tsx | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 00e64b75c..10716264d 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -1,5 +1,5 @@ import { ConfigProvider, Steps} from "antd"; -import { BoolCodeControl } from "comps/controls/codeControl"; +import { BoolCodeControl, RadiusControl } from "comps/controls/codeControl"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl, numberExposingStateControl } from "comps/controls/codeStateControl"; import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; @@ -96,10 +96,19 @@ const StepsChildrenMap = { viewRef: RefControl, animationStyle: styleControl(AnimationStyle ,'animationStyle' ), showVerticalScrollbar: withDefault(BoolControl, false), + minHorizontalWidth: withDefault(RadiusControl, ''), }; let StepControlBasicComp = (function () { return new UICompBuilder(StepsChildrenMap, (props) => { + + const ScrollWrapper = styled.div<{ $showHorizontalScroll: boolean }>` + overflow-x: scroll; + ::-webkit-scrollbar { + display: ${props => props.$showHorizontalScroll ? "block" : "none"}; + } + `; + const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} height: 100%; @@ -176,6 +185,7 @@ let StepControlBasicComp = (function () { {children.autoHeight.getPropertyView()} + {!children.autoHeight.getView() && ( + children.showVerticalScrollbar.propertyView({ + label: trans("prop.showVerticalScrollbar"), + }) + )} + {children.minHorizontalWidth.propertyView({ + label: trans("prop.minHorizontalWidth"), + placeholder: '100px', + })} {children.size.propertyView({ label: trans("step.size"), radioButton: true, From 76cf4d76eac809f9c07cd40642982f16756eebd2 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 26 Sep 2024 19:59:09 +0500 Subject: [PATCH 22/22] StepControl: refactor non used code --- .../src/comps/comps/selectInputComp/stepControl.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 10716264d..572ba4a60 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -101,14 +101,6 @@ const StepsChildrenMap = { let StepControlBasicComp = (function () { return new UICompBuilder(StepsChildrenMap, (props) => { - - const ScrollWrapper = styled.div<{ $showHorizontalScroll: boolean }>` - overflow-x: scroll; - ::-webkit-scrollbar { - display: ${props => props.$showHorizontalScroll ? "block" : "none"}; - } - `; - const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>` ${props=>props.$animationStyle} height: 100%;