diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index 194e09d96..2e859ba9a 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -30,7 +30,7 @@ const getStyle = (style: ContainerStyleType) => { overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`} - ${style.backgroundImage && `background-image: ${style.backgroundImage};`} + ${style.backgroundImage && `background-image: url(${style.backgroundImage});`} ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} @@ -49,20 +49,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>` const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string - $headerBackgroundImage: string; - $headerBackgroundImageRepeat: string; - $headerBackgroundImageSize: string; - $headerBackgroundImagePosition: string; - $headerBackgroundImageOrigin: string; }>` overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`} - ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`} - ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`} - ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`} - ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`} `; const SiderInnerGrid = styled(InnerGrid)<{ @@ -76,7 +66,7 @@ const SiderInnerGrid = styled(InnerGrid)<{ overflow: auto; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$siderBackgroundImage && `background-image: ${props.$siderBackgroundImage};`} + ${(props) => props.$siderBackgroundImage && `background-image: url(${props.$siderBackgroundImage});`} ${(props) => props.$siderBackgroundImageRepeat && `background-repeat: ${props.$siderBackgroundImageRepeat};`} ${(props) => props.$siderBackgroundImageSize && `background-size: ${props.$siderBackgroundImageSize};`} ${(props) => props.$siderBackgroundImagePosition && `background-position: ${props.$siderBackgroundImagePosition};`} @@ -88,21 +78,11 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; - $backgroundImage: string; - $backgroundImageRepeat: string; - $backgroundImageSize: string; - $backgroundImagePosition: string; - $backgroundImageOrigin: string; }>` border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`} - ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`} - ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`} - ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`} - ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`} `; const FooterInnerGrid = styled(InnerGrid)<{ @@ -120,7 +100,7 @@ const FooterInnerGrid = styled(InnerGrid)<{ overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`} + ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} @@ -219,11 +199,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi containerPadding={[0, 0]} showName={{ bottom: showFooter ? 20 : 0 }} $backgroundColor={headerStyle?.headerBackground || 'transparent'} - $headerBackgroundImage={headerStyle?.headerBackgroundImage} - $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat} - $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize} - $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition} - $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin} style={{ padding: headerStyle.containerHeaderPadding }} /> @@ -286,11 +261,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} - $backgroundImage={bodyStyle?.backgroundImage} - $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat} - $backgroundImageSize={bodyStyle?.backgroundImageSize} - $backgroundImagePosition={bodyStyle?.backgroundImagePosition} - $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin} style={{ padding: bodyStyle.containerBodyPadding }} /> )} @@ -353,11 +323,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} - $backgroundImage={bodyStyle?.backgroundImage} - $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat} - $backgroundImageSize={bodyStyle?.backgroundImageSize} - $backgroundImagePosition={bodyStyle?.backgroundImagePosition} - $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin} style={{ padding: bodyStyle.containerBodyPadding }} /> )} diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx index 46feb8534..dbe0e6111 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx @@ -51,7 +51,7 @@ const childrenMap = { autoHeight: AutoHeightControl, siderScrollbars: withDefault(BoolControl, false), contentScrollbars: withDefault(BoolControl, false), - style: styleControl(ContainerStyle), + style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}), headerStyle: styleControl(ContainerHeaderStyle), siderStyle: styleControl(ContainerSiderStyle), bodyStyle: styleControl(ContainerBodyStyle), diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx index 76dfd10fc..78163c559 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx @@ -117,7 +117,7 @@ let StepControlBasicComp = (function () { background-color: ${props.style.background}; border: ${props.style.borderWidth} solid ${props.style.border}; border-radius: ${props.style.radius}; - background-image: ${props.style.backgroundImage}; + background-image: url(${props.style.backgroundImage}); background-repeat: ${props.style.backgroundImageRepeat}; background-size: ${props.style.backgroundImageSize}; background-position: ${props.style.backgroundImagePosition}; diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index eb6e0bcb4..fdfa5d7e4 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -67,6 +67,8 @@ const getStyle = ( &, > td { background: ${genLinerGradient(rowStyle.background)}; + border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important; + border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important; } } @@ -74,6 +76,8 @@ const getStyle = ( &, > td { background: ${alternateBackground}; + border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important; + border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important; } } @@ -136,14 +140,15 @@ const BackgroundWrapper = styled.div<{ $style: TableStyleType; $tableAutoHeight: boolean; }>` - ${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`} background: ${(props) => props.$style.background} !important; - border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`}; + // border: ${(props) => `${props.$style.border} !important`}; border-radius: ${(props) => props.$style.radius} !important; // padding: unset !important; - padding: ${(props) => props.$style.padding} !important + padding: ${(props) => props.$style.padding} !important; margin: ${(props) => props.$style.margin} !important; overflow: scroll !important; + border-style:${(props) => props.$style.borderStyle} !important; + border-width: ${(props) => `${props.$style.borderWidth} !important`}; ${(props) => props.$style} `; @@ -339,7 +344,6 @@ const TableTd = styled.td<{ } background: ${(props) => props.$background} !important; border-color: ${(props) => props.$style.border} !important; - border-width: ${(props) => props.$style.borderWidth} !important; border-radius: ${(props) => props.$style.radius}; padding: 0 !important; @@ -533,7 +537,7 @@ function TableCellView(props: { text: columnStyle.text || columnsStyle.text, border: columnStyle.border || columnsStyle.border, radius: columnStyle.radius || columnsStyle.radius, - borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth, + // borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth, textSize: columnStyle.textSize || columnsStyle.textSize, textWeight: columnsStyle.textWeight || columnStyle.textWeight, fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily, diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index 41a846c19..2207c08dc 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -205,12 +205,12 @@ const tableChildrenMap = { pagination: PaginationControl, sort: valueComp>([]), toolbar: TableToolbarComp, - style: styleControl(TableStyle), - rowStyle: styleControl(TableRowStyle), + style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}), + rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}), toolbarStyle: styleControl(TableToolbarStyle), - headerStyle: styleControl(TableHeaderStyle), + headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}), searchText: StringControl, - columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}), + columnsStyle: styleControl(TableColumnStyle), viewModeResizable: BoolControl, visibleResizables: BoolControl, // sample data for regenerating columns diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx index a1726dfc3..4effb590d 100644 --- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx @@ -57,7 +57,7 @@ const childrenMap = { onEvent: eventHandlerControl(EVENT_OPTIONS), disabled: BoolCodeControl, showHeader: withDefault(BoolControl, true), - style: styleControl(TabContainerStyle), + style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}), headerStyle: styleControl(ContainerHeaderStyle), bodyStyle: styleControl(ContainerBodyStyle), tabsGutter: withDefault(NumberControl, 32), @@ -72,6 +72,7 @@ const getStyle = ( headerStyle: ContainerHeaderStyleType, bodyStyle: ContainerBodyStyleType, ) => { + console.log("🚀 ~ style:", style) return css` &.ant-tabs { overflow: hidden; @@ -79,7 +80,7 @@ const getStyle = ( border-radius: ${style.radius}; padding: ${style.padding}; background-color: ${style.background}; - background-image: ${style.backgroundImage}; + background-image: url(${style.backgroundImage}); background-repeat: ${style.backgroundImageRepeat}; background-size: ${style.backgroundImageSize}; background-position: ${style.backgroundImagePosition}; @@ -90,26 +91,15 @@ const getStyle = ( .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-nav { 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 { - color: ${style.tabText}; + color: #8b8fa3; } &.ant-tabs-tab-active div { diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx index 1becd89e0..b4adf54c7 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx @@ -16,7 +16,7 @@ const getStyle = (style: ContainerStyleType) => { overflow: hidden; padding: ${style.padding}; ${style.background && `background-color: ${style.background};`} - ${style.backgroundImage && `background-image: ${style.backgroundImage};`} + ${style.backgroundImage && `background-image: url(${style.backgroundImage});`} ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`} ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`} ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`} @@ -35,20 +35,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>` const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string - $headerBackgroundImage: string; - $headerBackgroundImageRepeat: string; - $headerBackgroundImageSize: string; - $headerBackgroundImagePosition: string; - $headerBackgroundImageOrigin: string; }>` overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`} - ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`} - ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`} - ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`} - ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`} `; const BodyInnerGrid = styled(InnerGrid)<{ @@ -56,21 +46,11 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; - $backgroundImage: string; - $backgroundImageRepeat: string; - $backgroundImageSize: string; - $backgroundImagePosition: string; - $backgroundImageOrigin: string; }>` border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`} - ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`} - ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`} - ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`} - ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`} `; const FooterInnerGrid = styled(InnerGrid)<{ @@ -88,7 +68,7 @@ const FooterInnerGrid = styled(InnerGrid)<{ overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`} + ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} @@ -135,11 +115,6 @@ export function TriContainer(props: TriContainerProps) { containerPadding={[paddingWidth, 3]} showName={{ bottom: showBody || showFooter ? 20 : 0 }} $backgroundColor={headerStyle?.headerBackground || 'transparent'} - $headerBackgroundImage={headerStyle?.headerBackgroundImage} - $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat} - $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize} - $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition} - $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin} style={{padding: headerStyle.containerHeaderPadding}} /> @@ -162,11 +137,6 @@ export function TriContainer(props: TriContainerProps) { $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} - $backgroundImage={bodyStyle?.backgroundImage} - $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat} - $backgroundImageSize={bodyStyle?.backgroundImageSize} - $backgroundImagePosition={bodyStyle?.backgroundImagePosition} - $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin} style={{padding: bodyStyle.containerBodyPadding}} /> diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx index 61a64da16..b93e018b4 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx @@ -40,7 +40,7 @@ const childrenMap = { showFooter: BoolControl, autoHeight: AutoHeightControl, scrollbars: withDefault(BoolControl, false), - style: styleControl(ContainerStyle), + style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}), headerStyle: styleControl(ContainerHeaderStyle), bodyStyle: styleControl(ContainerBodyStyle), footerStyle: styleControl(ContainerFooterStyle), diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx index 0d799a2b3..e57a11dbf 100644 --- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx +++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx @@ -76,7 +76,7 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>` background-color: ${(props) => props.$style.background}; padding: ${(props) => props.$style.padding}; margin: ${(props) => props.$style.margin}; - ${(props) => props.$style.backgroundImage && `background-image: ${props.$style.backgroundImage};`} + ${(props) => props.$style.backgroundImage && `background-image: url(${props.$style.backgroundImage});`} ${(props) => props.$style.backgroundImageRepeat && `background-repeat: ${props.$style.backgroundImageRepeat};`} ${(props) => props.$style.backgroundImageSize && `background-size: ${props.$style.backgroundImageSize};`} ${(props) => props.$style.backgroundImagePosition && `background-position: ${props.$style.backgroundImagePosition};`} @@ -92,20 +92,10 @@ const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignmen const HeaderInnerGrid = styled(InnerGrid)<{ $backgroundColor: string - $headerBackgroundImage: string; - $headerBackgroundImageRepeat: string; - $headerBackgroundImageSize: string; - $headerBackgroundImagePosition: string; - $headerBackgroundImageOrigin: string; }>` overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`} - ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`} - ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`} - ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`} - ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`} `; const BodyInnerGrid = styled(InnerGrid)<{ @@ -113,21 +103,11 @@ const BodyInnerGrid = styled(InnerGrid)<{ $backgroundColor: string; $borderColor: string; $borderWidth: string; - $backgroundImage: string; - $backgroundImageRepeat: string; - $backgroundImageSize: string; - $backgroundImagePosition: string; - $backgroundImageOrigin: string; }>` border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`} - ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`} - ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`} - ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`} - ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`} `; const FooterInnerGrid = styled(InnerGrid)<{ @@ -145,7 +125,7 @@ const FooterInnerGrid = styled(InnerGrid)<{ overflow: visible; ${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`} border-radius: 0; - ${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`} + ${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`} ${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`} ${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`} ${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`} @@ -202,11 +182,6 @@ export function TriContainer(props: TriContainerProps) { containerPadding={[0, 0]} showName={{ bottom: showFooter ? 20 : 0 }} $backgroundColor={headerStyle?.headerBackground || 'transparent'} - $headerBackgroundImage={headerStyle?.headerBackgroundImage} - $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat} - $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize} - $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition} - $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin} style={{ padding: headerStyle.containerHeaderPadding }} /> )} @@ -230,11 +205,6 @@ export function TriContainer(props: TriContainerProps) { $backgroundColor={bodyStyle?.background || 'transparent'} $borderColor={style?.border} $borderWidth={style?.borderWidth} - $backgroundImage={bodyStyle?.backgroundImage} - $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat} - $backgroundImageSize={bodyStyle?.backgroundImageSize} - $backgroundImagePosition={bodyStyle?.backgroundImagePosition} - $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin} style={{ float: `${props.float}`, width: `${props.float === "none" ? "100%" : `${props.width}%`}`, diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 0ebd9c8de..177400446 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -220,7 +220,7 @@ export function handleToHeadBg(color: string) { return darkenColor(color, 0.06); } if (toHex(color) === "#000000") { - return SECOND_SURFACE_COLOR; + return SURFACE_COLOR; } if (isDarkColor(color)) { return darkenColor(color, 0.06); @@ -1154,12 +1154,9 @@ const LinkTextStyle = [ export const TableStyle = [ MARGIN, PADDING, + BORDER_STYLE, + BORDER_WIDTH, ...BG_STATIC_BORDER_RADIUS, - { - name: "borderWidth", - label: trans("style.borderWidth"), - borderWidth: "borderWidth", - }, ] as const; export const TableToolbarStyle = [ @@ -1181,10 +1178,12 @@ export const TableHeaderStyle = [ FONT_FAMILY, FONT_STYLE, TEXT, + getStaticBackground(SURFACE_COLOR), + getBackground('primarySurface'), { name: "headerBackground", label: trans("style.tableHeaderBackground"), - depName: "headerBackground", + depName: "background", transformer: handleToHeadBg, }, getStaticBorder(), @@ -1206,6 +1205,9 @@ export const TableHeaderStyle = [ ] as const; export const TableRowStyle = [ + BORDER_WIDTH, + BORDER_STYLE, + ...BG_STATIC_BORDER_RADIUS, getBackground(), { name: "selectedRowBackground", @@ -1233,7 +1235,7 @@ export const TableColumnStyle = [ getStaticBackground("#00000000"), getStaticBorder(), MARGIN, - BORDER_WIDTH, + RADIUS, TEXT, TEXT_SIZE, diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx index 9adc36385..0e62ad058 100644 --- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx +++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx @@ -33,7 +33,7 @@ const getStyle = (style: ModalStyleType) => { border: ${style.borderWidth} solid ${style.border}; overflow: hidden; background-color: ${style.background}; - ${style.backgroundImage ? `background-image: ${style.backgroundImage} !important; ` : ';'} + ${style.backgroundImage ? `background-image: url(${style.backgroundImage}) !important; ` : ';'} ${style.backgroundImageRepeat ? `background-repeat: ${style.backgroundImageRepeat};` : 'no-repeat;'} ${style.backgroundImageSize ? `background-size: ${style.backgroundImageSize};` : 'cover'} ${style.backgroundImagePosition ? `background-position: ${style.backgroundImagePosition};` : 'center;'}