From 951b904c9b9452a6b6d51a4bf4519edd8e3e6912 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 18:15:08 +0500 Subject: [PATCH 1/6] fix repositoryUrl check in workflows --- .github/workflows/publish-lowcoder-cli.yml | 2 +- .github/workflows/publish-lowcoder-comps.yml | 2 +- .github/workflows/publish-lowcoder-core.yml | 2 +- .github/workflows/publish-lowcoder-sdk.yml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/publish-lowcoder-cli.yml b/.github/workflows/publish-lowcoder-cli.yml index 2aadbe488..f7b325e6f 100644 --- a/.github/workflows/publish-lowcoder-cli.yml +++ b/.github/workflows/publish-lowcoder-cli.yml @@ -9,7 +9,7 @@ on: jobs: publish-package: - if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}} + if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}} runs-on: ubuntu-latest steps: - name: Checkout repository diff --git a/.github/workflows/publish-lowcoder-comps.yml b/.github/workflows/publish-lowcoder-comps.yml index 27ffb60f9..a83425cf5 100644 --- a/.github/workflows/publish-lowcoder-comps.yml +++ b/.github/workflows/publish-lowcoder-comps.yml @@ -9,7 +9,7 @@ on: jobs: publish-package: - if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}} + if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}} runs-on: ubuntu-latest steps: - name: Checkout repository diff --git a/.github/workflows/publish-lowcoder-core.yml b/.github/workflows/publish-lowcoder-core.yml index 34222ad56..7fb0b1cd7 100644 --- a/.github/workflows/publish-lowcoder-core.yml +++ b/.github/workflows/publish-lowcoder-core.yml @@ -9,7 +9,7 @@ on: jobs: publish-package: - if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}} + if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}} runs-on: ubuntu-latest steps: - name: Checkout repository diff --git a/.github/workflows/publish-lowcoder-sdk.yml b/.github/workflows/publish-lowcoder-sdk.yml index d9385b7d9..a597071ba 100644 --- a/.github/workflows/publish-lowcoder-sdk.yml +++ b/.github/workflows/publish-lowcoder-sdk.yml @@ -9,7 +9,7 @@ on: jobs: publish-package: - if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}} + if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}} runs-on: ubuntu-latest steps: - name: Checkout repository From 54cf4db6803cf6d3bf989f42afb99524df8b0ab5 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 18:15:22 +0500 Subject: [PATCH 2/6] fix styles for sortable column header --- .../comps/comps/tableComp/column/tableColumnComp.tsx | 4 ++-- .../src/comps/comps/tableComp/tableCompView.tsx | 11 +++++++---- .../lowcoder/src/comps/controls/styleControl.tsx | 2 +- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx index ac113e849..39a392ad4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx @@ -106,7 +106,7 @@ export const columnChildrenMap = { borderWidth: withDefault(RadiusControl, ""), radius: withDefault(RadiusControl, ""), textSize: withDefault(RadiusControl, ""), - textWeight: withDefault(StringControl, "regular"), + textWeight: withDefault(StringControl, "normal"), fontFamily: withDefault(StringControl, "sans-serif"), cellColor: CellColorComp, textOverflow: withDefault(TextOverflowControl, "ellipsis"), @@ -276,7 +276,7 @@ export class ColumnComp extends ColumnInitComp { {this.children.textWeight.propertyView({ label: trans('style.textWeight'), preInputNode: , - placeholder: 'regular', + placeholder: 'normal', })} {this.children.fontFamily.propertyView({ label: trans('style.fontFamily'), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index a398f0060..729e8f6b9 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -212,9 +212,6 @@ const TableWrapper = styled.div<{ border-color: ${(props) => props.$headerStyle.border}; border-width: ${(props) => props.$headerStyle.borderWidth}; color: ${(props) => props.$headerStyle.headerText}; - font-size: ${(props) => props.$headerStyle.textSize}; - font-weight: ${(props) => props.$headerStyle.textWeight}; - font-family: ${(props) => props.$headerStyle.fontFamily}; border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important; ${(props) => props.$fixedHeader && ` @@ -227,6 +224,12 @@ const TableWrapper = styled.div<{ > div { margin: ${(props) => props.$headerStyle.margin}; + + &, .ant-table-column-title > div { + font-size: ${(props) => props.$headerStyle.textSize}; + font-weight: ${(props) => props.$headerStyle.textWeight}; + font-family: ${(props) => props.$headerStyle.fontFamily}; + } } &:last-child { @@ -516,7 +519,7 @@ function TableCellView(props: { const cellColor = cellColorFn({ currentCell: record[title.toLowerCase()], }); - + const style = { background: cellColor || rowColor || columnStyle.background || columnsStyle.background, margin: columnStyle.margin || columnsStyle.margin, diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index 6a1391171..669c450e3 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -393,7 +393,7 @@ function calcColors>( } if (isTextWeightConfig(config)) { // TODO: remove default textWeight after added in theme in backend. - res[name] = themeWithDefault[config.textWeight] || 'regular'; + res[name] = themeWithDefault[config.textWeight] || 'normal'; } if (isFontFamilyConfig(config)) { res[name] = themeWithDefault[config.fontFamily] || 'sans-serif'; From f341397ffdec712c26c7578ac6dbe6e94cba5bbf Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 19:51:39 +0500 Subject: [PATCH 3/6] adding background styles in container --- .../comps/controls/styleControlConstants.tsx | 113 +++++------------- 1 file changed, 33 insertions(+), 80 deletions(-) diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 2ebd7a28a..5dea81d30 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -510,6 +510,38 @@ export const ContainerStyle = [ BORDER_WIDTH, MARGIN, PADDING, + { + name: "background", + label: trans("style.background"), + depName: "background", + depType: DEP_TYPE.SELF, + transformer: toSelf, + }, + { + name: "backgroundImage", + label: trans("style.backgroundImage"), + backgroundImage: "backgroundImage", + }, + { + name: "backgroundImageRepeat", + label: trans("style.backgroundImageRepeat"), + backgroundImageRepeat: "backgroundImageRepeat", + }, + { + name: "backgroundImageSize", + label: trans("style.backgroundImageSize"), + backgroundImageSize: "backgroundImageSize", + }, + { + name: "backgroundImagePosition", + label: trans("style.backgroundImagePosition"), + backgroundImagePosition: "backgroundImagePosition", + }, + { + name: "backgroundImageOrigin", + label: trans("style.backgroundImageOrigin"), + backgroundImageOrigin: "backgroundImageOrigin", + }, ] as const; export const ContainerHeaderStyle = [ @@ -732,9 +764,6 @@ export const MultiSelectStyle = [ ] as const; export const TabContainerStyle = [ - ...BG_STATIC_BORDER_RADIUS, - BORDER_WIDTH, - HEADER_BACKGROUND, { name: "tabText", label: trans("style.tabText"), @@ -749,83 +778,7 @@ export const TabContainerStyle = [ depType: DEP_TYPE.SELF, transformer: toSelf, }, - MARGIN, - PADDING, - { - name: "headerBackgroundImage", - label: trans("style.headerBackgroundImage"), - headerBackgroundImage: "headerBackgroundImage", - }, - { - name: "headerBackgroundImageRepeat", - label: trans("style.headerBackgroundImageRepeat"), - headerBackgroundImageRepeat: "headerBackgroundImageRepeat", - }, - { - name: "headerBackgroundImageSize", - label: trans("style.headerBackgroundImageSize"), - headerBackgroundImageSize: "headerBackgroundImageSize", - }, - { - name: "headerBackgroundImagePosition", - label: trans("style.headerBackgroundImagePosition"), - headerBackgroundImagePosition: "headerBackgroundImagePosition", - } - ,{ - name: "headerBackgroundImageOrigin", - label: trans("style.headerBackgroundImageOrigin"), - headerBackgroundImageOrigin: "headerBackgroundImageOrigin", - }, - { - name: "backgroundImage", - label: trans("style.backgroundImage"), - backgroundImage: "backgroundImage", - }, - { - name: "backgroundImageRepeat", - label: trans("style.backgroundImageRepeat"), - backgroundImageRepeat: "backgroundImageRepeat", - }, - { - name: "backgroundImageSize", - label: trans("style.backgroundImageSize"), - backgroundImageSize: "backgroundImageSize", - }, - { - name: "backgroundImagePosition", - label: trans("style.backgroundImagePosition"), - backgroundImagePosition: "backgroundImagePosition", - }, - { - name: "backgroundImageOrigin", - label: trans("style.backgroundImageOrigin"), - backgroundImageOrigin: "backgroundImageOrigin", - }, - { - name: "footerBackgroundImage", - label: trans("style.footerBackgroundImage"), - footerBackgroundImage: "footerBackgroundImage", - }, - { - name: "footerBackgroundImageRepeat", - label: trans("style.footerBackgroundImageRepeat"), - footerBackgroundImageRepeat: "footerBackgroundImageRepeat", - }, - { - name: "footerBackgroundImageSize", - label: trans("style.footerBackgroundImageSize"), - footerBackgroundImageSize: "footerBackgroundImageSize", - }, - { - name: "footerBackgroundImagePosition", - label: trans("style.footerBackgroundImagePosition"), - footerBackgroundImagePosition: "footerBackgroundImagePosition", - } - ,{ - name: "footerBackgroundImageOrigin", - label: trans("style.footerBackgroundImageOrigin"), - footerBackgroundImageOrigin: "footerBackgroundImageOrigin", - } + ...ContainerStyle, ] as const; export const ModalStyle = [ From e818a274e02a7692e21233e52dce597792fbea26 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 19:52:25 +0500 Subject: [PATCH 4/6] adding background styles in container --- .../comps/comps/triContainerComp/triContainer.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 613baf94e..eea06d569 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -18,6 +18,12 @@ const getStyle = (style: ContainerStyleType) => { padding: ${style.padding}; // width: ${widthCalculator(style.margin)}; // height: ${heightCalculator(style.margin)}; + ${style.background && `background-color: ${style.background};`} + ${style.backgroundImage && `background-image: ${style.backgroundImage};`} + ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} + ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} + ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} + ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`} `; }; @@ -130,7 +136,7 @@ export function TriContainer(props: TriContainerProps) { minHeight="46px" containerPadding={[paddingWidth, 3]} showName={{ bottom: showBody || showFooter ? 20 : 0 }} - $backgroundColor={headerStyle?.headerBackground} + $backgroundColor={headerStyle?.headerBackground || 'transparent'} $headerBackgroundImage={headerStyle?.headerBackgroundImage} $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat} $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize} @@ -154,7 +160,7 @@ export function TriContainer(props: TriContainerProps) { (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11] } hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder} - $backgroundColor={bodyStyle?.background} + $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} $backgroundImage={bodyStyle?.backgroundImage} @@ -177,7 +183,7 @@ export function TriContainer(props: TriContainerProps) { minHeight={showBody ? "47px" : "46px"} containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]} showName={{ top: showHeader || showBody ? 20 : 0 }} - $backgroundColor={footerStyle?.footerBackground} + $backgroundColor={footerStyle?.footerBackground || 'transparent'} $footerBackgroundImage={footerStyle?.footerBackgroundImage} $footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat} $footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize} From c063b69d0a6d85ff2160f97f681261a60fd9cead Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 19:53:35 +0500 Subject: [PATCH 5/6] updated tabs container styles --- .../comps/comps/tabs/tabbedContainerComp.tsx | 86 +++++++++++++------ 1 file changed, 60 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index afd010959..06a5ad955 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo import { eventHandlerControl } from "comps/controls/eventHandlerControl"; import { TabsOptionControl } from "comps/controls/optionsControl"; import { styleControl } from "comps/controls/styleControl"; -import { TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; +import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators"; import { addMapChildAction } from "comps/generators/sameTypeMap"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; @@ -33,9 +33,6 @@ import { DisabledContext } from "comps/generators/uiCompBuilder"; import { EditorContext } from "comps/editorState"; import { checkIsMobile } from "util/commonUtils"; import { messageInstance } from "lowcoder-design"; -import { show } from "antd-mobile/es/components/dialog/show"; -import { BoolControl } from "@lowcoder-ee/index.sdk"; -import { Switch } from "antd"; const EVENT_OPTIONS = [ { @@ -57,38 +54,52 @@ const childrenMap = { disabled: BoolCodeControl, showHeader: withDefault(BooleanStateControl, "true"), style: styleControl(TabContainerStyle), + headerStyle: styleControl(ContainerHeaderStyle), + bodyStyle: styleControl(ContainerBodyStyle), }; type ViewProps = RecordConstructorToView; type TabbedContainerProps = ViewProps & { dispatch: DispatchType }; -const getStyle = (style: TabContainerStyleType) => { +const getStyle = ( + style: TabContainerStyleType, + headerStyle: ContainerHeaderStyleType, + bodyStyle: ContainerBodyStyleType, +) => { return css` &.ant-tabs { + overflow: hidden; border: ${style.borderWidth} solid ${style.border}; border-radius: ${style.radius}; - overflow: hidden; padding: ${style.padding}; + background-color: ${style.background}; + background-image: ${style.backgroundImage}; + background-repeat: ${style.backgroundImageRepeat}; + background-size: ${style.backgroundImageSize}; + background-position: ${style.backgroundImagePosition}; + background-origin: ${style.backgroundImageOrigin}; + + > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane { + height: 100%; + .react-grid-layout { + border-radius: 0; + background-color: ${bodyStyle.background || 'transparent'}; + background-image: ${bodyStyle.backgroundImage}; + background-repeat: ${bodyStyle.backgroundImageRepeat}; + background-size: ${bodyStyle.backgroundImageSize}; + background-position: ${bodyStyle.backgroundImagePosition}; + background-origin: ${bodyStyle.backgroundImageOrigin}; - > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout { - background-color: ${style.background}; - border-radius: 0; - - background-image: ${style.backgroundImage}; - background-repeat: ${style.backgroundImageRepeat}; - background-size: ${style.backgroundImageSize}; - background-position: ${style.backgroundImagePosition}; - background-origin: ${style.backgroundImageOrigin}; - + } } > .ant-tabs-nav { - background-color: ${style.headerBackground}; - background-image: ${style.headerBackgroundImage}; - background-repeat: ${style.headerBackgroundImageRepeat}; - background-size: ${style.headerBackgroundImageSize}; - background-position: ${style.headerBackgroundImagePosition}; - background-origin: ${style.headerBackgroundImageOrigin}; + background-color: ${headerStyle.headerBackground || 'transparent'}; + background-image: ${headerStyle.headerBackgroundImage}; + background-repeat: ${headerStyle.headerBackgroundImageRepeat}; + background-size: ${headerStyle.headerBackgroundImageSize}; + background-position: ${headerStyle.headerBackgroundImagePosition}; + background-origin: ${headerStyle.headerBackgroundImageOrigin}; .ant-tabs-tab { div { @@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => { }; const StyledTabs = styled(Tabs)<{ - $style: TabContainerStyleType; + $style: TabContainerStyleType; + $headerStyle: ContainerHeaderStyleType; + $bodyStyle: ContainerBodyStyleType; $isMobile?: boolean; $showHeader?: boolean; }>` @@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{ margin-right: -24px; } - ${(props) => props.$style && getStyle(props.$style)} + ${(props) => props.$style && getStyle( + props.$style, + props.$headerStyle, + props.$bodyStyle, + )} `; const ContainerInTab = (props: ContainerBaseProps) => { @@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => { }; const TabbedContainer = (props: TabbedContainerProps) => { - let { tabs, containers, dispatch, style } = props; + let { + tabs, + containers, + dispatch, + style, + headerStyle, + bodyStyle, + } = props; const visibleTabs = tabs.filter((tab) => !tab.hidden); const selectedTab = visibleTabs.find((tab) => tab.key === props.selectedTabKey.value); @@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => { key: tab.key, forceRender: true, children: ( - + { { if (key !== props.selectedTabKey.value) { @@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
{children.style.getPropertyView()}
+ {children.showHeader.getView() && ( +
+ { children.headerStyle.getPropertyView() } +
+ )} +
+ { children.bodyStyle.getPropertyView() } +
)} From a0199e4d62aedccb6896da6a4ede57f22a56960b Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 19 Jan 2024 19:55:37 +0500 Subject: [PATCH 6/6] handle form height based for fixed height setting --- .../src/comps/comps/formComp/formComp.tsx | 29 +++++++++++++++---- 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx index a1fb8182d..16166e3f2 100644 --- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx @@ -57,6 +57,17 @@ import log from "loglevel"; import { DisabledContext } from "comps/generators/uiCompBuilder"; import { LoadingOutlined } from "@ant-design/icons"; import { messageInstance } from "lowcoder-design"; +import { styled } from "styled-components"; + +const FormWrapper = styled.div` + height: 100%; + .ant-spin-nested-loading { + height: 100%; + .ant-spin-container { + height: 100%; + } + } +`; const eventOptions = [submitEvent] as const; @@ -172,12 +183,18 @@ const FormBaseComp = (function () { return new ContainerCompBuilder(childrenMap, (props, dispatch) => { return ( - - } - /> - + + + } + /> + + ); })